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/CommonWidget.dart';
import 'package:regroup/Utils/Common/CommonAppbar.dart';
import 'package:regroup/Utils/Common/CustomTextformfield.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 PostDetailsScreen extends StatefulWidget {
  const PostDetailsScreen({super.key});

  @override
  State<PostDetailsScreen> createState() => _PostDetailsScreenState();
}

class _PostDetailsScreenState extends State<PostDetailsScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xFF222935),
        extendBody: true,
        appBar: CommonAppbar(
          titleTxt: "Post",
        ),
        body: Stack(children: [
          const CommonBlurLeftRed(),
          const CommonBlurRightRed(),
          const CommonBlurLeft(),
          const CommonBlurRight(),
          Positioned.fill(
              child: SingleChildScrollView(
                  child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                postCards(
                    profileImg: 'assets/images/png/Ellipse 52.png',
                    title: 'Ryan Dorwat',
                    mainImg: 'assets/images/png/Rectangle 25.png',
                    containerTitle: [
                      'Football',
                      'Marathon',
                      'Events',
                      'Marathon',
                      'Events'
                    ]),
                sizedBoxHeight(35.h),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16.w),
                  child: Column(
                    children: [
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          CircleAvatar(
                            radius: 20.r,
                            foregroundImage: AssetImage(
                              "assets/images/png/Ellipse 48.png",
                            ),
                          ),
                          sizedBoxWidth(15.w),
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                text12w400_FCFCFC_blur("Roger Saris"),
                                text14w400_FCFCFC(
                                    "Lorem Ipsum has been the industry's standard dummy text 😍"),
                                text10w400_FCFCFC_blur("Reply. . . ")
                              ],
                            ),
                          ),
                        ],
                      ),
                      sizedBoxHeight(50.h),
                      CustomTextFormField(
                        hintText: "Add comment",
                        suffixIcon: Container(
                          height: 20.h,
                          width: 25.w,
                          child: Center(
                            child: Image.asset(
                              "assets/images/png/iconoir_send.png",
                              height: 20.h,
                              width: 25.w,
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                sizedBoxHeight(85.h)
              ])))
        ]));
  }

  Widget postCards({
    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: 0,
        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),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            text16w400_FCFCFC(title),
                            Spacer(),
                            commonGlassContainer(
                                width: 72.w,
                                height: 26.h,
                                borderradius: 5.r,
                                borderColor: Color(0xFFD90B2E),
                                customWidget:
                                    Center(child: text14400white("Follow")),
                                border: 1),
                            sizedBoxWidth(6.w),
                            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,
                              ),
                            ),
                          ],
                        ),
                        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'),
                          ],
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
            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: [
                  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.9,
                    width: 30.w,
                    height: 30.h,
                    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.9,
                    width: 30.w,
                    height: 30.h,
                    borderradius: 100,
                    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: [
                    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),
                              );
                            })
                          ],
                        ),
                      ],
                    ),
                    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 containertile({required String text}) {
    return commonGlassContainer(
        border: 0.9,
        width: 100.w,
        height: 30.h,
        borderradius: 30.r,
        borderColor: Color(0xFFD90B2E),
        customWidget: Padding(
          padding: EdgeInsets.symmetric(horizontal: 10.w),
          child: Center(child: text14w400_FCFCFC(text)),
        ));
  }

  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')
      ],
    );
  }
}