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/CommonBottomNavigationBar.dart';
import 'package:regroup/Common/CommonGlassmorphism.dart';
import 'package:regroup/Common/controller/MainScreen.dart';
import 'package:regroup/Feed%20Module/sidemenu/sidemenu.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 CommunityScreen extends StatefulWidget {
  const CommunityScreen({super.key});

  @override
  State<CommunityScreen> createState() => _CommunityScreenState();
}

final List<String> titles = [
  'Race',
  'Swimming',
  'Events',
  'Swimming',
  'Events',
];

class _CommunityScreenState extends State<CommunityScreen> {
  GlobalKey<ScaffoldState> _scaffoldKey1 = GlobalKey<ScaffoldState>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey1,
      backgroundColor: Color(0xFF222935),
      // drawerEnableOpenDragGesture: false,
      drawer: SizedBox(width: 300.w, child: SideMenu()),
      extendBody: true,
      appBar: AppBar(
        scrolledUnderElevation: 0.0,
        backgroundColor: Color(0xff222935),
        elevation: 0,
        automaticallyImplyLeading: false,
        titleSpacing: 0,
        leading: InkWell(
          onTap: () {
            _scaffoldKey1.currentState?.openDrawer();
          },
          child: Center(
            child: Image.asset(
              'assets/images/png/menu.png',
              height: 15.h,
              width: 20.w,
            ),
          ),
        ),
        title: Image.asset(
          'assets/images/png/Group.png',
          width: 26.w,
          height: 25.h,
        ),
        actions: [
          Image.asset(
            'assets/images/png/ion_search-outline.png',
            height: 25.h,
            width: 25.w,
          ),
          sizedBoxWidth(10.w),
          Image.asset(
            'assets/images/png/Frame 9.png',
            height: 25.h,
            width: 25.w,
          ),
          sizedBoxWidth(16.w),
        ],
      ),
      body: Stack(children: [
        const CommonBlurLeftRed(),
        const CommonBlurRightRed(),
        const CommonBlurLeft(),
        const CommonBlurRight(),
        Stack(children: [
          Padding(
              padding: const EdgeInsets.symmetric(vertical: 16),
              child: Column(children: [
                DefaultTabController(
                  length: 3,
                  // initialIndex: selectedIndex.value,
                  child: Column(
                    children: [
                      MyTabBar(),
                      SizedBox(
                        height: 600.h,
                        child: TabBarView(
                          children: [
                            feedTab(),
                            popularTab(),
                            latestTab(),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ]))
        ])
      ]),
      floatingActionButton: Container(
        height: 55.h,
        width: 55.w,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          boxShadow: [
            BoxShadow(
              color: Color(0x40000000), // Hex color with 40% opacity
              offset: Offset(0, 6),
              blurRadius: 8,
            ),
          ],
        ),
        child: FloatingActionButton(
          onPressed: () {
            Get.toNamed(RouteName.postscreen);
          },
          backgroundColor: Color(0xFFD90B2E),
          autofocus: true,
          shape: CircleBorder(),
          child: Image.asset(
            "assets/images/png/iconamoon_edit-thin.png",
            height: 30.h,
            width: 30.w,
          ),
        ),
      ),

      bottomNavigationBar: bottomnavigationbar(mainController),
    );
  }
}

Widget feedTab() {
  return SingleChildScrollView(
    child: Column(
      children: [
        normalcardtile(),
        sizedBoxHeight(20.h),
        tagCardTile(),
        sizedBoxHeight(20.h),
        normalcardtile(),
      ],
    ),
  );
}

Widget normalcardtile() {
  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 Column(
    children: [
      sizedBoxHeight(25.h),
      Padding(
        padding: EdgeInsets.symmetric(horizontal: 16.w),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            CircleAvatar(
              foregroundImage: AssetImage('assets/images/png/Ellipse 43.png'),
              radius: 25.r,
            ),
            sizedBoxWidth(12.w),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                text16w400_FCFCFC('Edward Hackket'),
                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: 4.w,
                height: 18.h,
              ),
            ),
            sizedBoxWidth(5.w)
          ],
        ),
      ),
      sizedBoxHeight(20.h),
      GestureDetector(
          onTap: () {
            Get.toNamed(RouteName.postdetailsScreen);
          },
          child: Image.asset('assets/images/png/Rectangle 22.png')),
      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: titles.length,
              itemBuilder: (context, index) {
                return Padding(
                  padding: EdgeInsets.only(right: 12.w),
                  child: GestureDetector(
                      onTap: () {
                        Get.toNamed(RouteName.cyclescreen);
                      },
                      child: containertile(text: titles[index])),
                );
              },
            ),
          ),
          sizedBoxHeight(20.h),
          text16w400_FCFCFC(
              "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s . . ."),
          Row(children: [
            Spacer(),
            commonGlassContainer(
              border: 0.9,
              width: 30.w,
              height: 30.h,
              borderradius: 100,
              customWidget: Center(
                child: ReactionButton<String>(
                  itemSize: Size.fromHeight(20),
                  onReactionChanged: (Reaction<String>? reaction) {
                    debugPrint('Selected value: ${reaction?.value}');
                  },
                  reactions: <Reaction<String>>[
                    Reaction<String>(
                      value: 'message',
                      icon: Image.asset(
                        'assets/images/png/Vector.png',
                        height: 13.h,
                        width: 13.w,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            sizedBoxWidth(12.w),
            text14w400_FCFCFC('20'),
            sizedBoxWidth(20.w),
            commonGlassContainer(
              border: 0.9,
              width: 30.w,
              height: 30.h,
              borderradius: 100,
              customWidget: Center(
                child: ReactionButton<String>(
                  itemSize: Size.fromHeight(20),
                  onReactionChanged: (Reaction<String>? reaction) {
                    debugPrint('Selected value: ${reaction?.value}');
                  },
                  reactions: <Reaction<String>>[
                    Reaction<String>(
                      value: 'message',
                      icon: Image.asset(
                        'assets/images/png/Vector (1).png',
                        height: 12.h,
                        width: 12.w,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            sizedBoxWidth(12.w),
            text14w400_FCFCFC('10'),
          ]),
          sizedBoxHeight(30.h),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Column(
                children: [
                  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'),
                                ),
                              ],
                              // placeholder: Reaction<String>(
                              //   value: 'like',
                              //   icon: _buildReactionsIcon(
                              //       'assets/images/png/f7_hand-thumbsup.png'),
                              // ),
                              selectedReaction: Reaction<String>(
                                value: 'like',
                                icon: _buildReactionsIcon(
                                    'assets/images/png/f7_hand-thumbsup.png'),
                              ),
                              boxColor: Colors.white,
                              boxElevation: 5,
                              boxRadius: 50,
                              itemsSpacing: 8,
                              itemScale: 0.3,
                              itemSize: Size(40.0, 40.0),
                              boxPadding: EdgeInsets.all(4),
                              boxAnimationDuration: Duration(milliseconds: 200),
                              itemAnimationDuration:
                                  Duration(milliseconds: 100),
                              hoverDuration: Duration(milliseconds: 400),
                              toggle: false,
                              direction: ReactionsBoxAlignment.ltr,
                              child: _buildReactionsIcon(mainImage.value),
                            );
                          })
                        ],
                      ),
                    ],
                  ),
                  sizedBoxHeight(8.h),
                  text11w400_FCFCFC('Like')
                ],
              ),
              Column(
                children: [
                  Image.asset(
                    'assets/images/png/Vector.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')
                ],
              )
            ],
          )
        ]),
      ),
    ],
  );

}

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 Image.asset(
    assetPath,
    height: 19.h,
    width: 19.w,
  );
}

Widget tagCardTile() {
  return commonGlassContainer(
      border: 0.9,
      width: double.infinity,
      height: 580.h,
      borderradius: 1,
      customWidget: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          sizedBoxHeight(16.h),
          Padding(
            padding: EdgeInsets.only(left: 16.w),
            child: text16w400_FCFCFC('#Announcement'),
          ),
          normalcardtile(),
        ],
      ));
}

Widget containertile({required String text}) {
  return commonGlassContainer(
      border: 0.9,
      width: 100.w,
      height: 30.h,
      borderradius: 30.r,
      customWidget: Padding(
        padding: EdgeInsets.symmetric(horizontal: 10.w),
        child: Center(child: text14w400_FCFCFC(text)),
      ));
}

Widget popularTab() {
  return SingleChildScrollView(
    child: Column(
      children: [
        Column(
          children: [
            normalcardtile(),
            sizedBoxHeight(20.h),
            normalcardtile(),
          ],
        ),
      ],
    ),
  );
}

Widget latestTab() {
  return Column(
    children: [],
  );
}

class MyTabBar extends StatelessWidget {
  // Set the desired height

  @override
  Widget build(BuildContext context) {
    return TabBar(
        dividerColor: Color(0xFFFFFFFF).withOpacity(0.07),
        labelStyle: TextStyle(
            fontSize: 14.sp,
            color: Color(0xFFFCFCFC),
            fontWeight: FontWeight.w400,
            fontFamily: 'Helvetica'),
        indicatorSize: TabBarIndicatorSize.tab,
        indicatorColor: const Color(0xFFD90B2E),
        // labelColor: Colors.white,
        indicatorWeight: 2.h,
        dividerHeight: 2.h,
        unselectedLabelColor: Color(0xFFFCFCFC),
        overlayColor: MaterialStateProperty.all(const Color(0xFFD90B2E)),
        tabs: const [
          Tab(
            text: 'Feed',
          ),
          Tab(
            text: 'Popular',
          ),
          Tab(
            text: 'Latest',
          ),
        ]);
  }
}