import 'package:avatar_stack/avatar_stack.dart';
import 'package:avatar_stack/positions.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:konectar_events/utils/util.dart';
import 'package:konectar_events/view/eventstab.dart';
import 'package:konectar_events/widgets/customtextfield.dart';
import 'package:konectar_events/widgets/responsive_utils.dart';
import 'package:konectar_events/widgets/typography.dart';

class EventsGrid extends StatelessWidget {
  final Color iconColor;
  VoidCallback addtoFav;
  EventsGrid({super.key, required this.iconColor, required this.addtoFav});

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context)
        .textTheme
        .apply(displayColor: Theme.of(context).colorScheme.onSurface);

    // Set the default number of columns to 3.
    int columnsCount = 2;

    // Define the icon size based on the screen width

    // Use the ResponsiveUtils class to determine the device's screen size.
    if (ResponsiveUtils.isMobile(context)) {
      columnsCount = 1;
    } else if (ResponsiveUtils.isDesktop(context)) {
      columnsCount = 3;
    }

    // Build the grid view using the number of columns.
    return Expanded(
      child: GridView.builder(
        // Set padding and spacing between cards.
        padding: const EdgeInsets.symmetric(vertical: 5),
        scrollDirection: Axis.vertical,

        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          // Set the number of columns based on the device's screen size.
          crossAxisCount: columnsCount,

          // Set the aspect ratio of each card.
          // childAspectRatio: isTablet ? 2 : 2,
          // crossAxisSpacing: isTablet ? 30 : 20,
          // mainAxisSpacing: isTablet ? 40 : 20,

          childAspectRatio: isTablet ? 2 : 2.2,
          crossAxisSpacing: isTablet ? 30 : 1,
          mainAxisSpacing: isTablet ? 40 : 4,
        ),
        // Set the number of items in the grid view.
        itemCount: 20,
        itemBuilder: (BuildContext context, int index) {
          // Build each card in the grid view.
          return InkWell(
              // onTap: () {
              //   Navigator.of(context).push(MaterialPageRoute(
              //     builder: (context) => EventsTab(),
              //   ));
              // },
              child: Card(child: buildCardView(context)));
        },
        // Set the grid view to shrink wrap its contents.
        shrinkWrap: true,
        // Disable scrolling in the grid view.
        // physics: const NeverScrollableScrollPhysics(),
      ),
    );
  }

  buildCardView(BuildContext context) {
    double height = isTablet
        ? MediaQuery.of(context).size.height * 0.35
        : MediaQuery.of(context).size.height * 0.65;
    return Container(
      decoration: BoxDecoration(
          // color: Color.fromARGB(179, 248, 238, 238),
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(20))),
      height: height,
      padding: isTablet
          ? EdgeInsets.symmetric(horizontal: 8.0, vertical: 2.0)
          : EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          SizedBox(
            height: isTablet ? 1 : 3,
          ),
          Container(
            // height: isTablet ? height * 0.50 : height * 0.30,
            padding: const EdgeInsets.only(top: 5.0),
            width: double.maxFinite,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '2024 Hematology/Oncology Pharmacy Association Annual Conference (HOPA)',
                  style: TextStyle(
                    // decoration: TextDecoration.underline,
                    // decorationColor: Colors.blue,
                    color: Colors.black,
                    //fontWeight: FontWeight.bold,
                    fontSize: isTablet ? 22 : 18,
                    fontFamily: "SourceSerif",
                  ),
                  maxLines: isTablet ? 3 : 3,
                  softWrap: true,
                  overflow: TextOverflow.ellipsis,
                ),
                SizedBox(
                  height: 20.0,
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        RichText(
                          text: TextSpan(
                            children: [
                              WidgetSpan(
                                child: Icon(Icons.location_on, size: 18),
                              ),
                              TextSpan(
                                text: 'Tampa,Florida,United States',
                                style: TextStyle(
                                    color: Colors.black,
                                    fontStyle: FontStyle.italic,
                                    fontFamily: "SourceSerif",
                                    fontSize: isTablet ? 20 : 16),
                              ),
                            ],
                          ),
                        ),
                        SizedBox(
                          height: 5.0,
                        ),
                        RichText(
                          text: TextSpan(
                            children: [
                              WidgetSpan(
                                child: Icon(Icons.calendar_month, size: 18),
                              ),
                              TextSpan(
                                text: ' 06-10-2024 - 10-10-2024',
                                style: TextStyle(
                                    color: Colors.black,
                                    fontStyle: FontStyle.italic,
                                    fontFamily: "SourceSerif",
                                    fontSize: isTablet ? 20 : 16),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                    Align(
                      alignment: Alignment.bottomRight,
                      child: SizedBox(
                        height: 30,
                        child: OutlinedButton(
                          onPressed: () => addtoFav,
                          child: Icon(
                            Icons.favorite_border_outlined,
                            size: isTablet ? 20 : 18,
                            color: iconColor,
                          ),
                          style: OutlinedButton.styleFrom(
                            shape: CircleBorder(),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),

            // Image.asset(
            //   "assets/images/events2.jpg",
            //   fit: BoxFit.cover,
            // ),
          ),
          // Divider(
          //   color: Colors.blueGrey,
          //   thickness: 2,
          //   height: 2,
          // ),

          // SizedBox(
          //   height: 5,
          // ),
          // Text(
          //   'Organizer: Hematology/Oncology Pharmacy Association (HOPA)',
          //   style: TextStyle(
          //       color: Colors.black,
          //       fontStyle: FontStyle.italic,
          //       fontFamily: "SourceSerif",
          //       fontSize: isTablet ? 18 : 14),
          //   maxLines: 2,
          //   softWrap: true,
          //   overflow: TextOverflow.ellipsis,
          // ),
          // SizedBox(
          //   // height: 100,
          //   child: Padding(
          //     padding: const EdgeInsets.symmetric(vertical: 4.0),
          //     child: Column(
          //       mainAxisAlignment: MainAxisAlignment.start,
          //       crossAxisAlignment: CrossAxisAlignment.start,
          //       children: [
          //         Row(
          //           children: [],
          //         ),

          // RichText(
          //   text: TextSpan(
          //     children: [
          //       WidgetSpan(
          //         child: SizedBox(
          //           width: 80,
          //           height: 18,
          //           child: WidgetStack(
          //             stackedWidgets: [
          //               for (var n = 0; n < 5; n++)
          //                 CircleAvatar(
          //                     child: Icon(
          //                   Icons.person,
          //                   size: 14,
          //                   color: Colors.blueGrey[300],
          //                 ))
          //             ],
          //             positions: RestrictedPositions(
          //               maxCoverage: 0.3,
          //               minCoverage: 0.4,
          //             ),
          //             buildInfoWidget: (surplus) {
          //               return Center(
          //                   child: Text(
          //                 '+$surplus',
          //                 style: Theme.of(context).textTheme.headline5,
          //               ));
          //             },
          //           ),
          //         ),
          //       ),
          //       TextSpan(
          //         text: '5',
          //         style: TextStyle(
          //             color: Colors.black,
          //             fontFamily: "SourceSerif",
          //             fontSize: 16),
          //       ),
          //       TextSpan(
          //         text: ' attendees',
          //         style: TextStyle(
          //             color: Colors.black,
          //             fontFamily: "SourceSerif",
          //             fontSize: 14),
          //       ),
          //     ],
          //   ),
          // ),
          // RichText(
          //   text: TextSpan(
          //     children: [
          //       WidgetSpan(
          //         child: SizedBox(
          //           width: 50,
          //           height: 18,
          //           child: WidgetStack(
          //             stackedWidgets: [
          //               for (var n = 0; n < 3; n++)
          //                 CircleAvatar(
          //                     child: Icon(
          //                   Icons.person,
          //                   size: 14,
          //                   color: Colors.blueGrey[300],
          //                 ))
          //             ],
          //             positions: RestrictedPositions(
          //               maxCoverage: 0.3,
          //               minCoverage: 0.4,
          //             ),
          //             buildInfoWidget: (surplus) {
          //               return Center(
          //                   child: Text(
          //                 '+$surplus',
          //                 style: Theme.of(context).textTheme.headline5,
          //               ));
          //             },
          //           ),
          //         ),
          //       ),
          //       TextSpan(
          //         text: '3',
          //         style: TextStyle(
          //             color: Colors.black,
          //             fontFamily: "SourceSerif",
          //             fontSize: 16),
          //       ),
          //       TextSpan(
          //         text: ' client attendees',
          //         style: TextStyle(
          //             color: Colors.black,
          //             fontFamily: "SourceSerif",
          //             fontSize: 14),
          //       ),
          //     ],
          //   ),
          // ),
          //       ],
          //     ),
          //   ),
          // ),
          // Row(
          //   children: [
          //     SizedBox(
          //       height: 30,
          //       child: OutlinedButton(
          //         onPressed: () {},
          //         child: Text('Add to My Events'),
          //         style: OutlinedButton.styleFrom(
          //           shape: StadiumBorder(),
          //         ),
          //       ),
          //     ),
          //   ],
          // )
        ],
      ),
    );
  }
}