import 'package:flutter/material.dart';
import 'package:flutter_reaction_button/flutter_reaction_button.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:regroup/Common/CommonGlassmorphism.dart';
import 'package:regroup/Common/CommonTabBar.dart';
import 'package:regroup/Common/CommonWidget.dart';
import 'package:regroup/Feed%20Module/Main_Screens/Community/Community.dart';
import 'package:regroup/Utils/Common/CommonAppbar.dart';
import 'package:regroup/Utils/Common/blureffect.dart';
import 'package:regroup/Utils/Common/sized_box.dart';
import 'package:regroup/Utils/texts.dart';
import 'package:regroup/resources/routes/route_name.dart';

class CycleScreen extends StatefulWidget {
  const CycleScreen({super.key});

  @override
  State<CycleScreen> createState() => _CycleScreenState();
}

class _CycleScreenState extends State<CycleScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xFF222935),
        extendBody: true,
        resizeToAvoidBottomInset: false,
        appBar: CommonAppbar(
            titleTxt: "Cycle",
            customActionWidget: Image.asset(
              "assets/images/png/sidemenu/f7_pin-fill.png",
              height: 26.h,
              width: 26.w,
            )),
        body: Stack(children: [
         Container(
            decoration: const BoxDecoration(
                image: DecorationImage(
                    image: AssetImage("assets/images/png/Ellipse 1496.png"),
                    fit: BoxFit.fill)),
          ),  Column(children: [
            sizedBoxHeight(10.h),
            DefaultTabController(
                length: 2,
                // initialIndex: selectedIndex.value,
                child: Column(
                  children: [
                    CommonTabBar(tabs: const [
                      Tab(
                        text: 'Popular',
                      ),
                      Tab(
                        text: 'Latest',
                      ),
                    ]),
                    SizedBox(
                      height: 670.h,
                      child: TabBarView(
                        children: [
                          CyclepopularTab(),
                          CyclelatestTab(),
                        ],
                      ),
                    ),
                  ],
                ))
          ])
        ]));
  }
}

Widget CyclepopularTab() {
  return SingleChildScrollView(
    child: Column(children: [
      sizedBoxHeight(20.h),
      normalcardtile(
          profileImg: 'assets/images/png/Ellipse 52.png',
          title: 'Ryan Dorwat',
          mainImg: 'assets/images/png/img322.png',
          containerTitle: [
            'Football',
            'Teams player',
            'Events',
            'Marathon',
            'Events'
          ]),
      sizedBoxHeight(30.h),
      normalcardtile(
          profileImg: 'assets/images/png/Ellipse 43.png',
          title: 'Edward Hackket',
          mainImg: 'assets/images/png/Rectangle 24.png',
          containerTitle: [
            'Cycle',
            'Marathon',
            'Events',
            'Marathon',
            'Events'
          ]),
    ]),
  );
}

Widget CyclelatestTab() {
  return SingleChildScrollView(
    child: Column(children: [
      sizedBoxHeight(20.h),
      normalcardtile(
          profileImg: 'assets/images/png/Ellipse 43.png',
          title: 'Edward Hackket',
          mainImg: 'assets/images/png/Rectangle 24.png',
          containerTitle: [
            'Cycle',
            'Marathon',
            'Events',
            'Marathon',
            'Events'
          ]),
    ]),
  );
}

Widget normalcardtile({
  required String profileImg,
  required String title,
  required String mainImg,
  required List<String> containerTitle,
}) {
  var mainImage = 'assets/images/png/uiw_like-o.png'.obs;
  void updateImage(String reaction) {
    if (reaction == 'like') {
      mainImage.value = 'assets/images/png/f7_hand-thumbsup.png';
    } else if (reaction == 'heart') {
      mainImage.value = 'assets/images/png/heart 2.png';
    } else if (reaction == 'party') {
      mainImage.value = 'assets/images/png/party-popper 2.png';
    }
  }

  return commonGlassContainer(
      width: double.infinity,
      height: 570.h,
      border: 0,
      borderradius: 1,
      customWidget: Column(
        children: [
          sizedBoxHeight(25.h),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 16.w),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                CircleAvatar(
                  foregroundImage: AssetImage(profileImg),
                  radius: 25.r,
                ),
                sizedBoxWidth(12.w),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    text16w400_FCFCFC(title),
                    sizedBoxHeight(5.h),
                    Row(
                      children: [
                        Image.asset(
                          'assets/images/png/community 1 (traced).png',
                          height: 14.w,
                          width: 14.w,
                        ),
                        sizedBoxWidth(7.w),
                        text12w400_FCFCFC('Active alliance network'),
                        sizedBoxWidth(7.w),
                        Icon(
                          Icons.circle,
                          color: Color(0xFFFCFCFC),
                          size: 4.sp,
                        ),
                        sizedBoxWidth(6.w),
                        text12w400_FCFCFC('1 Hour ago'),
                      ],
                    )
                  ],
                ),
                Spacer(),
                PopupMenuButton(
                  surfaceTintColor: Color(0xFF222935),
                  constraints: BoxConstraints.tightFor(width: 176.w),
                  offset: Offset(0, 50),
                  color: Color(0xFF222935),
                  tooltip: "",
                  itemBuilder: (BuildContext context) => <PopupMenuEntry>[
                    PopupMenuItem(
                      onTap: () {},
                      child: Padding(
                        padding: EdgeInsets.symmetric(horizontal: 12.w),
                        child: Row(
                          children: [
                            Text(
                              'Report Post',
                              style: TextStyle(
                                fontSize: 16.sp,
                                color: Colors.white,
                                fontWeight: FontWeight.w800,
                                fontFamily: "Nunito Sans",
                              ),
                            ),
                            Spacer(),
                            Image.asset(
                              "assets/images/png/Vector (5).png",
                              height: 15.h,
                              width: 15.w,
                            )
                          ],
                        ),
                      ),
                    ),
                    PopupMenuDivider(),
                    PopupMenuItem(
                      onTap: () {},
                      child: Padding(
                        padding: EdgeInsets.symmetric(horizontal: 12.w),
                        child: Row(
                          children: [
                            Text(
                              'Share post',
                              style: TextStyle(
                                fontSize: 16.sp,
                                color: Colors.white,
                                fontWeight: FontWeight.w800,
                                fontFamily: "Nunito Sans",
                              ),
                            ),
                            Spacer(),
                            Image.asset(
                              "assets/images/png/share.png",
                              height: 20.h,
                              width: 20.w,
                            )
                          ],
                        ),
                      ),
                    ),
                    PopupMenuDivider(),
                    PopupMenuItem(
                      onTap: () {},
                      child: Padding(
                        padding: EdgeInsets.symmetric(horizontal: 12.w),
                        child: Row(
                          children: [
                            Text(
                              'Pin',
                              style: TextStyle(
                                fontSize: 16.sp,
                                color: Colors.white,
                                fontWeight: FontWeight.w800,
                                fontFamily: "Nunito Sans",
                              ),
                            ),
                            Spacer(),
                            Image.asset(
                              "assets/images/png/f7_pin-fill (2).png",
                              height: 25.h,
                              width: 25.w,
                            )
                          ],
                        ),
                      ),
                    ),
                  ],
                  child: Image.asset(
                    'assets/images/png/Group 1000004071.png',
                    width: 16.w,
                    height: 18.h,
                  ),
                ),
                sizedBoxWidth(5.w)
              ],
            ),
          ),
          sizedBoxHeight(20.h),
          GestureDetector(
              onTap: () {
                Get.toNamed(RouteName.postdetailsScreen);
              },
              child: Container(
                height: 163.h,
                width: double.infinity,
                child: Image.asset(
                  mainImg,
                  fit: BoxFit.cover,
                ),
              )),
          sizedBoxHeight(20.h),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 16.w),
            child: Column(children: [
              SizedBox(
                height: 30.h,
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  shrinkWrap: true,
                  itemCount: containerTitle.length,
                  itemBuilder: (context, index) {
                    return Padding(
                      padding: EdgeInsets.only(right: 12.w),
                      child: GestureDetector(
                          onTap: () {
                            Get.toNamed(RouteName.cyclescreen);
                          },
                          child: containertile(text: containerTitle[index])),
                    );
                  },
                ),
              ),
              sizedBoxHeight(20.h),
              text16w400_FCFCFC(
                  "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s . . ."),
              Row(children: [
                InkWell(
                  onTap: () {
                    Get.toNamed(RouteName.reactionview);
                  },
                  child: stackReaction(number: '20', containerImages: [
                    'assets/images/png/f7_hand-thumbsup.png',
                    'assets/images/png/heart 2.png',
                    'assets/images/png/party-popper 2.png'
                  ]),
                ),
                Spacer(),
                commonGlassContainer(
                  border: 0.43,
                  width: 30.w,
                  height: 30.h,
                  opacity1: 0.05,
                  opacity2: 0.06,
                  borderradius: 100,
                  customWidget: Center(
                    child: Image.asset(
                      'assets/images/png/Frame 1000004088.png',
                      height: 13.h,
                      width: 13.w,
                    ),
                  ),
                ),
                sizedBoxWidth(12.w),
                text14w400_FCFCFC('20'),
                sizedBoxWidth(20.w),
                commonGlassContainer(
                  border: 0.43,
                  width: 30.w,
                  height: 30.h,
                  borderradius: 100,
                  opacity1: 0.05,
                  opacity2: 0.06,
                  customWidget: Center(
                    child: Image.asset(
                      'assets/images/png/Vector (1).png',
                      height: 12.h,
                      width: 12.w,
                    ),
                  ),
                ),
                sizedBoxWidth(12.w),
                text14w400_FCFCFC('10'),
              ]),
              sizedBoxHeight(12.h),
              commonDivider(),
              sizedBoxHeight(12.h),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Obx(() {
                        return ReactionButton<String>(
                          onReactionChanged: (reaction) {
                            updateImage(reaction?.value ?? 'like');
                            debugPrint('Selected value: ${reaction?.value}');
                          },
                          reactions: <Reaction<String>?>[
                            Reaction<String>(
                              value: 'like',
                              previewIcon: _buildReactionsPreviewIcon(
                                  'assets/images/png/f7_hand-thumbsup.png'),
                              icon: _buildReactionsIcon(
                                  'assets/images/png/f7_hand-thumbsup.png'),
                            ),
                            Reaction<String>(
                              value: 'heart',
                              previewIcon: _buildReactionsPreviewIcon(
                                  'assets/images/png/heart 2.png'),
                              icon: _buildReactionsIcon(
                                  'assets/images/png/heart 2.png'),
                            ),
                            Reaction<String>(
                              value: 'party',
                              previewIcon: _buildReactionsPreviewIcon(
                                  'assets/images/png/party-popper 2.png'),
                              icon: _buildReactionsIcon(
                                  'assets/images/png/party-popper 2.png'),
                            ),
                          ],
                          selectedReaction: Reaction<String>(
                            value: 'like',
                            icon: _buildReactionsIcon(
                                'assets/images/png/f7_hand-thumbsup.png'),
                          ),
                          boxColor: Colors.white,
                          boxElevation: 9,
                          boxRadius: 30,
                          itemsSpacing: 8,
                          itemScale: 0.4,
                          itemSize: Size(45, 45),
                          boxPadding: EdgeInsets.all(8),
                          boxAnimationDuration: Duration(milliseconds: 200),
                          itemAnimationDuration: Duration(milliseconds: 500),
                          hoverDuration: Duration(milliseconds: 700),
                          // toggle: false,

                          child: _buildReactionsIcon(mainImage.value),
                        );
                      })
                    ],
                  ),
                  GestureDetector(
                    onTap: () {
                      Get.toNamed(RouteName.postdetailsScreen);
                    },
                    child: Column(
                      children: [
                        Image.asset(
                          'assets/images/png/Frame 1000004088.png',
                          height: 19.h,
                          width: 19.w,
                        ),
                        sizedBoxHeight(8.h),
                        text11w400_FCFCFC('Comment')
                      ],
                    ),
                  ),
                  Column(
                    children: [
                      Image.asset(
                        'assets/images/png/Frame 1000004089.png',
                        height: 19.h,
                        width: 19.w,
                      ),
                      sizedBoxHeight(8.h),
                      text11w400_FCFCFC('Save')
                    ],
                  )
                ],
              ),
              sizedBoxHeight(12.h),
              commonDivider(),
              sizedBoxHeight(12.h),
            ]),
          ),
        ],
      ));
}

Widget _buildReactionsPreviewIcon(String assetPath) {
  return Padding(
    padding: const EdgeInsets.all(8.0),
    child: Image.asset(
      assetPath,
      height: 40.h,
      width: 40.w,
    ),
  );
}

Widget _buildReactionsIcon(String assetPath) {
  return Column(
    children: [
      Image.asset(
        assetPath,
        height: 19.h,
        width: 19.w,
      ),
      sizedBoxHeight(8.h),
      text11w400_FCFCFC('Like')
    ],
  );
}