import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:konectar_events/model/eventsmodel.dart';
import 'package:konectar_events/utils/constants.dart';
import 'package:konectar_events/utils/util.dart';
import 'package:konectar_events/view/hcplist.dart';
import 'package:konectar_events/widgets/customdropdown.dart';

class EventsDetailTab extends StatefulWidget {
  EventsListOld event;
  EventsDetailTab({super.key, required this.event});

  @override
  State<EventsDetailTab> createState() => _EventsDetailTabState();
}

class _EventsDetailTabState extends State<EventsDetailTab> {
  // @override
  // Widget build(BuildContext context) {
  //   return SafeArea(
  //     child: Scaffold(
  //       body: Column(
  //         children: [buildCardView(context)],
  //       ),
  //     ),
  //   );
  // }
  int itemcount = 3;
  bool isExtended = false;
  bool isExtendedInterested = false;
  String? _selectedFruit;

  final List<String> _fruits = ['Events', 'Sessions'];
  final List<String> topics = [
    "	Admin. & Managemente",
    "Cyclin-Dependent Kinase 4 | Cyclin-Dependent Kinase 6 | Breast Neoplasms"
  ];
  final List<String> sessions = [
    "Program Committee",
    "Practical Application of CDK 4/6 Inhibitor"
  ];
  TextEditingController notesController = TextEditingController(text: "");
  List<String> sessionNotesList = [];

  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 2,
        child: Scaffold(
          body: NestedScrollView(
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                SliverAppBar(
                  // expandedHeight: 200.0,
                  //expandedHeight: MediaQuery.of(context).size.height * 0.4,
                  scrolledUnderElevation: 40.0,
                  collapsedHeight: 30,
                  floating: false,
                  pinned: true,
                  stretch: true,
                  flexibleSpace: FlexibleSpaceBar(
                      centerTitle: true,
                      collapseMode: CollapseMode.parallax,
                      title: const Text("",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 16.0,
                          )),
                      background: buildCardView(context, widget.event)

                      // Image.network(
                      //   "https://images.pexels.com/photos/417173/pexels-photo-417173.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
                      //   fit: BoxFit.cover,
                      // )
                      ),
                ),
                SliverPersistentHeader(
                  delegate: _SliverAppBarDelegate(
                    const TabBar(
                      isScrollable: true,
                      indicatorSize: TabBarIndicatorSize.label,
                      labelColor: Colors.black,
                      unselectedLabelColor: Colors.grey,
                      tabs: _tabs,
                    ),
                  ),
                  pinned: true,
                ),
              ];
            },
            body: TabBarView(children: [
              // sessionNotes(context)
              expandableDetails(context),
              speakersList(),
            ]
                // _tabs
                //     .map((e) => Center(
                //           child: FloatingActionButton.extended(
                //             backgroundColor:
                //                 const Color.fromARGB(255, 222, 237, 247),
                //             onPressed: () {},
                //             heroTag: 'follow',
                //             elevation: 0,
                //             label: const Text("Add Notes"),
                //             icon: const Icon(Icons.add),
                //           ),
                //           // Text("${e.text}", textAlign: TextAlign.center),
                //         ))
                //     .toList()),
                ),
          ),
        ));
  }

  buildCardView(BuildContext context, EventsListOld event) {
    double height = isTablet
        ? MediaQuery.of(context).size.height * 0.35
        : MediaQuery.of(context).size.height / 1.2;

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.max,
      // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        //Expanded(flex: 3, child: TopPortion(context, event)),
        Expanded(
          flex: 4,
          child: Align(
            alignment: Alignment.center,
            child: Container(
              color: EventsConstants.bgcolor,
              // height: isTablet ? height * 0.50 : height * 0.30,
              // padding: const EdgeInsets.only(top: 5.0),
              //  width: double.maxFinite,
              padding: const EdgeInsets.only(left: 8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                mainAxisSize: MainAxisSize.max,
                children: [
                  TopPortion(context, event),
                  RichText(
                      text: TextSpan(
                    children: [
                      TextSpan(
                        text: event.eventName,
                        style: TextStyle(
                          // decoration: TextDecoration.underline,
                          // decorationColor: Colors.blue,
                          color: Colors.black,
                          //fontWeight: FontWeight.bold,
                          fontSize: isTablet ? 22 : 18,
                          fontFamily: "SourceSerif",
                        ),
                      ),
                    ],
                  )),
                  Text(
                    'Event by: ${event.organizer}',
                    style: TextStyle(
                      // decoration: TextDecoration.underline,
                      // decorationColor: Colors.blue,
                      color: Colors.black,
                      //fontWeight: FontWeight.italic,
                      fontSize: isTablet ? 18 : 14,
                      fontFamily: "SourceSerif",
                      letterSpacing: 0.3,
                    ),
                    maxLines: isTablet ? 3 : 3,
                    softWrap: true,
                    overflow: TextOverflow.ellipsis,
                  ),
                  SizedBox(
                    height: 10.0,
                  ),
                  RichText(
                    text: TextSpan(
                      children: [
                        WidgetSpan(
                          child: Icon(Icons.calendar_month, size: 18),
                        ),
                        TextSpan(
                          text: ' ${event.startdate} to ${event.enddate}',
                          style: TextStyle(
                              color: Colors.black,
                              // fontStyle: FontStyle.italic,
                              letterSpacing: 0.3,
                              fontFamily: "SourceSerif",
                              fontSize: isTablet ? 20 : 14),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 8.0,
                  ),
                  RichText(
                    text: TextSpan(
                      children: [
                        WidgetSpan(
                          child: Icon(Icons.location_on, size: 18),
                        ),
                        TextSpan(
                          text: '${event.city},${event.state},${event.country}',
                          style: TextStyle(
                              color: Colors.black,
                              //fontStyle: FontStyle.italic,
                              letterSpacing: 0.3,
                              fontFamily: "SourceSerif",
                              fontSize: isTablet ? 20 : 14),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 8.0,
                  ),
                  RichText(
                    text: TextSpan(
                      children: [
                        WidgetSpan(
                          child: Icon(Icons.link, size: 18),
                        ),
                        TextSpan(
                          text: ' websitelink',
                          style: TextStyle(
                              decoration: TextDecoration.underline,
                              color: Colors.black,
                              // fontStyle: FontStyle.italic,
                              letterSpacing: 0.3,
                              fontFamily: "SourceSerif",
                              fontSize: isTablet ? 20 : 14),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 8.0,
                  ),
                  RichText(
                    text: TextSpan(
                      children: [
                        WidgetSpan(
                          child: Icon(Icons.person, size: 18),
                        ),
                        TextSpan(
                          text: ' ${event.attendees} attendees',
                          style: TextStyle(
                              color: Colors.black,
                              //fontStyle: FontStyle.italic,
                              letterSpacing: 0.3,
                              fontFamily: "SourceSerif",
                              fontSize: isTablet ? 20 : 14),
                        ),
                      ],
                    ),
                  ),
                ],
              ),

              // Image.asset(
              //   "assets/images/events2.jpg",
              //   fit: BoxFit.cover,
              // ),
            ),
          ),
        ),
        Expanded(
          flex: 2,
          child: Positioned(
            child: Align(
              alignment: FractionalOffset.bottomLeft,
              child: Padding(
                padding: const EdgeInsets.only(
                  left: 8.0,
                ),
                child: Row(children: [
                  SizedBox(
                    height: 40,
                    child: FloatingActionButton.extended(
                        elevation: 1,
                        backgroundColor: EventsConstants.oldbgcolor,
                        onPressed: () {
                          setState(() {
                            isExtended = !isExtended;
                          });
                        },
                        label: AnimatedSwitcher(
                            duration: Duration(seconds: 1),
                            transitionBuilder:
                                (Widget child, Animation<double> animation) =>
                                    FadeTransition(
                                      opacity: animation,
                                      child: SizeTransition(
                                        child: child,
                                        sizeFactor: animation,
                                        axis: Axis.horizontal,
                                      ),
                                    ),
                            child: isExtended
                                ? Row(
                                    children: [
                                      Padding(
                                        padding:
                                            const EdgeInsets.only(right: 4.0),
                                        child: Icon(Icons.check),
                                      ),
                                      Text("Attending")
                                    ],
                                  )
                                : Row(
                                    children: [
                                      // Padding(
                                      //   padding: const EdgeInsets.only(right: 4.0),
                                      //   child: Icon(Icons.add),
                                      // ),
                                      Text("Attend")
                                    ],
                                  ))),
                  ),
                  SizedBox(
                    width: 15,
                  ),
                  SizedBox(
                    height: 40,
                    child: FloatingActionButton.extended(
                        elevation: 1,
                        backgroundColor: EventsConstants.oldbgcolor,
                        onPressed: () {
                          setState(() {
                            isExtendedInterested = !isExtendedInterested;
                          });
                        },
                        label: AnimatedSwitcher(
                            duration: Duration(seconds: 1),
                            transitionBuilder:
                                (Widget child, Animation<double> animation) =>
                                    FadeTransition(
                                      opacity: animation,
                                      child: SizeTransition(
                                        child: child,
                                        sizeFactor: animation,
                                        axis: Axis.horizontal,
                                      ),
                                    ),
                            child: isExtendedInterested
                                ? Row(
                                    children: [
                                      Padding(
                                        padding:
                                            const EdgeInsets.only(right: 4.0),
                                        child: Icon(Icons.check),
                                      ),
                                      Text("Interested")
                                    ],
                                  )
                                : Row(
                                    children: [
                                      // Padding(
                                      //   padding: const EdgeInsets.only(right: 4.0),
                                      //   child: Icon(Icons.add),
                                      // ),
                                      Text("Interested")
                                    ],
                                  ))),
                  ),
                ]),
              ),
            ),
          ),
        ),
      ],
      // ),
    );
  }

  Widget expandableDetails(BuildContext context) {
    return
        // isTablet
        //     ? Container(
        //         margin: EdgeInsets.symmetric(vertical: 20.0),
        //         height: 200.0,
        //         child: Row(
        //           mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        //           children: <Widget>[
        //             _topicCard("Top 3 topics",
        //                 " 1. Hematologic Neoplasms \n 2. Antibodies, Bispecific \n 3. Multiple Myeloma"),
        //             _topicCard("Speakers with most sessions",
        //                 " 1. James A. Davis \n 2. Sandra Cuellar \n 3. Allison Butts"),
        //             _topicCard("Sponsors",
        //                 " 1. Amgen Inc \n 2. Bristol-Myers Squibb Company \n 3. Genmab A/S")
        //           ],
        //         ))
        //     :
        Container(
      height: MediaQuery.of(context).size.height * 0.45,
      color: Colors.white,
      padding: EdgeInsets.only(left: 8),
      child: Column(children: [
        // SizedBox(
        //   height: 5,
        // ),
        listViewTopicCard(
            "Top 3 topics",
            " 1. Hematologic Neoplasms \n 2. Antibodies, Bispecific \n 3. Multiple Myeloma",
            true),
        // SizedBox(
        //   height: 3,
        // ),
        listViewTopicCard(
            "Speakers with most sessions",
            " 1. James A. Davis \n 2. Sandra Cuellar \n 3. Allison Butts",
            true),
        // SizedBox(
        //   height: 3,
        // ),
        listViewTopicCard(
            "Sponsors",
            " 1. Amgen Inc \n 2. Bristol-Myers Squibb Company \n 3. Genmab A/S ",
            true)
      ]),
    );
  }

  Widget _topicCard(String title, String content, BuildContext context) {
    return SizedBox(
      width: MediaQuery.of(context).size.width / 3.2,
      child: Card(
        child: Padding(
          padding: const EdgeInsets.only(top: 18.0, left: 3.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Center(
                child: Text(
                  title,
                  style: TextStyle(fontSize: 16),
                  maxLines: 2,
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Text(
                content,
                style: TextStyle(fontSize: 16),
                maxLines: 6,
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget listViewTopicCard(String title, String content, bool visible) {
    return Visibility(
      visible: visible,
      child: Container(
        width: double.infinity,
        decoration: BoxDecoration(
          // color: Color.fromARGB(179, 248, 238, 238),
          color: Colors.white,
        ),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: TextStyle(
                  fontSize: isTablet ? 22 : 16,
                  fontWeight: FontWeight.bold,
                  fontFamily: "SourceSerif",
                ),
              ),
              Text(
                content,
                style: TextStyle(
                  fontSize: isTablet ? 22 : 14,
                  color: Colors.grey[700],
                  fontFamily: "SourceSerif",
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget TopPortion(BuildContext context, EventsListOld event) {
    return Stack(
      // fit: StackFit.expand,
      children: [
        Container(
          margin: const EdgeInsets.only(bottom: 100),
          decoration: const BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.bottomCenter,
                end: Alignment.topCenter,
                colors: [
                  const Color.fromARGB(255, 222, 237, 247),
                  const Color.fromARGB(255, 222, 237, 247),
                  // Color(0xff006df1)
                ]),
            // borderRadius: BorderRadius.only(
            //   bottomLeft: Radius.circular(20),
            //   bottomRight: Radius.circular(20),
            // )
          ),
        ),

        // Container(
        //   decoration: const BoxDecoration(
        //     color: Colors.black,
        //     shape: BoxShape.circle,
        //     image: DecorationImage(
        //         fit: BoxFit.cover,
        //         image: NetworkImage(
        //             'https://cardio-staging.konectar.io/images/kol_images/resized/1093755944.jpeg')),
        //     // 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80')),
        //   ),
        // ),
        // Positioned(
        //   bottom: 0,
        //   right: 0,
        //   child: CircleAvatar(
        //     radius: 20,
        //     backgroundColor: Theme.of(context).scaffoldBackgroundColor,
        //     child: Container(
        //       margin: const EdgeInsets.all(8.0),
        //       decoration: const BoxDecoration(
        //           color: Colors.green, shape: BoxShape.circle),
        //     ),
        //   ),
        // ),
      ],
    );
  }

  Widget speakersList() {
    return Container(
        width: double.maxFinite,
        padding: EdgeInsets.only(left: 8),
        decoration: BoxDecoration(
          // color: Color.fromARGB(179, 248, 238, 238),
          color: Colors.white,
        ),
        child: SingleChildScrollView(
          child: ListView.separated(
            shrinkWrap: true,
            padding: const EdgeInsets.all(8),
            itemCount: itemcount,
            itemBuilder: (BuildContext context, int index) {
              return GestureDetector(
                onTap: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => HcpListScreen(),
                    ),
                  );
                },
                child: Container(
                    // height: 50,
                    child: Column(
                  children: [
                    Row(
                      children: [
                        CircleAvatar(
                          radius: 24,
                          child: Icon(Icons.person, size: 24),
                        ),
                        SizedBox(
                          width: 10,
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              'Rugo, Hope S.',
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontFamily: "SourceSerif",
                                fontSize: 14,
                              ),
                              maxLines: 2,
                              softWrap: true,
                              overflow: TextOverflow.ellipsis,
                            ),
                            SizedBox(
                              width: isTablet
                                  ? MediaQuery.of(context).size.width * 0.25
                                  : MediaQuery.of(context).size.width * 0.5,
                              child: Text(
                                'Programmed Cell Death 1 Receptor | Human Epidermal Growth Factor Receptor 2 +6more',
                                maxLines: 3,
                                style: TextStyle(
                                    // decoration: TextDecoration.underline,
                                    // decorationColor: Colors.blue,
                                    fontFamily: "SourceSerifLight",
                                    color: Colors.black,

                                    //fontStyle: FontStyle.italic,
                                    fontSize: 14),
                              ),
                            ),
                          ],
                        ),
                        const Spacer(),
                        SizedBox(
                          height: 30,
                          child: OutlinedButton(
                            onPressed: () {},
                            child: Icon(
                              Icons.add,
                              size: 24,
                            ),
                            style: OutlinedButton.styleFrom(
                              shape: CircleBorder(),
                            ),
                          ),
                        ),
                      ],
                    ),
                    index == itemcount - 1
                        ? Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Container(
                              height: 30,
                              child: OutlinedButton(
                                onPressed: () {
                                  setState(() {
                                    itemcount = 15;
                                  });
                                  // Navigator.of(context).push(
                                  //   MaterialPageRoute(
                                  //     builder: (context) => HcpListScreen(),
                                  //   ),
                                  // );
                                },
                                child: Text(
                                  'See All',
                                  style: TextStyle(
                                      // fontFamily: "SourceSerif",
                                      fontSize: 14,
                                      color: Colors.black,
                                      fontWeight: FontWeight.normal),
                                ),
                                style: OutlinedButton.styleFrom(
                                  shape: StadiumBorder(),
                                ),
                              ),
                            ),
                          )
                        : SizedBox.shrink()
                  ],
                )),
              );
            },
            separatorBuilder: (BuildContext context, int index) {
              return Padding(
                  padding: const EdgeInsets.only(left: 34.0), child: Divider());
            },
          ),
        ));
  }
}

const _tabs = [
  Tab(text: "Details"),
  Tab(text: "Speakers"),

  // Tab(text: "Survey"),
];

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate(this._tabBar);

  final TabBar _tabBar;

  @override
  double get minExtent => _tabBar.preferredSize.height;
  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return _tabBar;
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return false;
  }
}

class _ProfileInfoRow extends StatelessWidget {
  const _ProfileInfoRow({Key? key}) : super(key: key);

  final List<ProfileInfoItem> _items = const [
    ProfileInfoItem("Posts", 900),
    ProfileInfoItem("Followers", 120),
    ProfileInfoItem("Following", 200),
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      constraints: const BoxConstraints(maxWidth: 400),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: _items
            .map((item) => Expanded(
                    child: Row(
                  children: [
                    if (_items.indexOf(item) != 0) const VerticalDivider(),
                    Expanded(child: _singleItem(context, item)),
                  ],
                )))
            .toList(),
      ),
    );
  }

  Widget _singleItem(BuildContext context, ProfileInfoItem item) => Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              item.value.toString(),
              style: const TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 14,
              ),
            ),
          ),
          Text(
            item.title,
            //style: Theme.of(context).textTheme.caption,
          )
        ],
      );
}

class ProfileInfoItem {
  final String title;
  final int value;
  const ProfileInfoItem(this.title, this.value);
}