import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:regroup/Common/CommonButton.dart';
import 'package:regroup/Common/base_manager.dart';
import 'package:regroup/Utils/Common/CustomNextButton.dart';
import 'package:regroup/Utils/Common/CustomTextformfield.dart';
import 'package:regroup/Utils/Common/sized_box.dart';
import 'package:regroup/Utils/dialogs.dart';
import 'package:regroup/Utils/texts.dart';
import 'package:regroup/onboarding/Signup/view_model/getmethod.dart';
import 'package:regroup/onboarding/Signup/view_model/postmethod.dart';
import 'package:regroup/resources/routes/route_name.dart';
import 'package:remove_emoji_input_formatter/remove_emoji_input_formatter.dart';

class ActivityController extends GetxController {
  var selectedIndices = <int>[].obs;
  var firstSelectedIndex = Rxn<int>();
  var isFirstSelectionActive = false.obs;

  void onContainerTap(int index) {
    if (selectedIndices.contains(index)) {
      selectedIndices.remove(index);
      if (firstSelectedIndex.value == index) {
        // If the first selected container is unselected, reset the active state
        firstSelectedIndex.value = null;
        isFirstSelectionActive.value = false;
        selectedIndices.clear();
      }
    } else {
      if (firstSelectedIndex.value == null) {
        // The first item is being selected
        firstSelectedIndex.value = index;
        isFirstSelectionActive.value = true;
      }
      selectedIndices.add(index);
    }
  }

  Color getGradientColor(int index) {
    if (selectedIndices.isEmpty) {
      return Colors.transparent;
    } else if (firstSelectedIndex.value == index &&
        isFirstSelectionActive.value) {
      return Color(0XFFD90B2E);
    } else if (selectedIndices.contains(index)) {
      return Color(0xFF009DAB);
    }
    return Colors.transparent;
  }
}

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

  @override
  State<SelectIndividualActivity> createState() =>
      _SelectIndividualActivityState();
}

class _SelectIndividualActivityState extends State<SelectIndividualActivity> {
  TextEditingController otheractivitycontroller = TextEditingController();
  final ActivityController controller = Get.put(ActivityController());

// to select only two containers
  // void _onContainerTap(int index) {
  //   setState(() {
  //     if (_selectedIndices.contains(index)) {
  //       _selectedIndices.remove(index);
  //     } else {
  //       if (_selectedIndices.length < 2) {
  //         _selectedIndices.add(index);
  //       } else {
  //         _selectedIndices[1] = index;
  //       }
  //     }
  //   });
  // }

  // void _onContainerTap(int id) {
  //   setState(() {
  //     if (_selectedIndices.contains(id)) {
  //       _selectedIndices.remove(id);
  //     } else {
  //       _selectedIndices.add(id);
  //     }
  //   });
  // }

// to give two different colors for selectedd two containers
  // Color _getGradientColor(int index) {
  //   if (_selectedIndices.isEmpty) {
  //     return Colors.transparent;
  //   } else if (_selectedIndices.length == 1 &&
  //       _selectedIndices.contains(index)) {
  //     return Color(0XFFD90B2E);
  //   } else if (_selectedIndices.length == 2) {
  //     if (_selectedIndices[0] == index) {
  //       return Color(0XFFD90B2E);
  //     } else if (_selectedIndices[1] == index) {
  //       return Color(0xFF009DAB);
  //     }
  //   }
  //   return Colors.transparent;
  // }

  // Color _getGradientColor(int id) {
  //   if (_selectedIndices.contains(id)) {
  //     return const Color(0XFFD90B2E); // Selected color
  //   }
  //   return Colors.transparent; // Default color
  // }

  Uploadata() async {
    utils.loader();
    String selectedIndicesString = '[${controller.selectedIndices.join(',')}]';
    Map<String, dynamic> updata = {
      "manage_interest_xid": selectedIndicesString,
      "other_interest": otheractivitycontroller.text,
    };

    final data = await Onboard().PostIndividualActivity(updata);
    if (data.status == ResponseStatus.SUCCESS) {
      Get.back();
      print("Activities selected");
      // Get.toNamed(RouteName.individualgroupstep3);
      Get.toNamed(RouteName.findcommunitypage);

      return utils.showToast(data.message);
    } else {
      Get.back();
      return utils.showToast(data.message);
    }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
        child: Scaffold(
          backgroundColor: const Color.fromARGB(255, 18, 32, 47),
          bottomNavigationBar: Padding(
            padding: const EdgeInsets.only(bottom: 10, left: 16, right: 16),
            child: CustomButton(
                text: "Continue",
                onPressed: () {
                  if (controller.selectedIndices.isEmpty &&
                      otheractivitycontroller.text.isEmpty) {
                    utils.showToast('Please select activity');
                  } else {
                    print(controller.selectedIndices.toString());
                    // String selectedIndicesString =
                    //     _selectedIndices.join(',');
                    // print(
                    //     'Selected Indices: [$selectedIndicesString]');
                    Uploadata();
                  }
                  // Get.toNamed(
                  //     RouteName.individualgroupstep3);
                }),
          ),
          body: SafeArea(
            child: FutureBuilder(
              future: Getonboard().getIndividualactivity(),
              builder: (ctx, snapshot) {
                if (snapshot.data == null) {
                  return const Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [Center(child: CircularProgressIndicator())],
                  );
                }
                if (snapshot.connectionState == ConnectionState.done) {
                  if (snapshot.hasError) {
                    return Center(
                      child: Text(
                        '${snapshot.error} occured',
                        style: TextStyle(fontSize: 18.spMin),
                      ),
                    );
                  }
                }

                return Stack(
                  children: [
                    Container(
                      decoration: const BoxDecoration(
                          image: DecorationImage(
                              image: AssetImage(
                                  "assets/images/png/Ellipse 1496.png"),
                              fit: BoxFit.fill)),
                    ),
                    Padding(
                      padding:
                          EdgeInsets.symmetric(horizontal: 16.w, vertical: 0.h),
                      child: SingleChildScrollView(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Align(
                              alignment: Alignment.topRight,
                              child: GestureDetector(
                                onTap: () {
                                  Get.toNamed(RouteName.communitycommitscreen);
                                },
                                child: Text(
                                  'Skip',
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 16.sp,
                                      fontFamily: 'Helvetica',
                                      fontWeight: FontWeight.w400,
                                      decoration: TextDecoration.underline,
                                      decorationColor: Colors.white),
                                ),
                              ),
                            ),
                            sizedBoxHeight(30.h),
                            Align(
                                alignment: Alignment.center,
                                child: text16400white('Step 1 of 3')),
                            sizedBoxHeight(20.h),
                            Container(
                              width: double.infinity,
                              height: 25.h,
                              decoration: ShapeDecoration(
                                shape: RoundedRectangleBorder(
                                  side: const BorderSide(
                                      width: 1, color: Color(0xFF434A53)),
                                  borderRadius: BorderRadius.circular(30),
                                ),
                              ),
                              child: Padding(
                                padding: EdgeInsets.symmetric(
                                    horizontal: 8.w, vertical: 2.h),
                                child: Row(
                                  children: [
                                    Container(
                                        width: 100.w,
                                        height: 15.h,
                                        decoration: ShapeDecoration(
                                          gradient: const LinearGradient(
                                            begin: Alignment(0.98, -0.21),
                                            end: Alignment(-0.98, 0.21),
                                            colors: [
                                              Color(0xA5D90B2E),
                                              Color(0x42D90B2E)
                                            ],
                                          ),
                                          shape: RoundedRectangleBorder(
                                            borderRadius:
                                                BorderRadius.circular(30),
                                          ),
                                        ),
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.end,
                                          children: [
                                            Container(
                                              width: 15,
                                              height: 15,
                                              decoration: ShapeDecoration(
                                                gradient: const LinearGradient(
                                                  begin: Alignment(0.98, -0.21),
                                                  end: Alignment(-0.98, 0.21),
                                                  colors: [
                                                    Color(0xFFD90B2E),
                                                    Color(0x60D90B2E)
                                                  ],
                                                ),
                                                shape: RoundedRectangleBorder(
                                                  borderRadius:
                                                      BorderRadius.circular(30),
                                                ),
                                              ),
                                            )
                                          ],
                                        ))
                                  ],
                                ),
                              ),
                            ),
                            sizedBoxHeight(40.h),
                            indiactivityobj!.data == null ||
                                    indiactivityobj!.data!.isEmpty
                                ? _buildNoDataBody(context)
                                : Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    children: [
                                      text20400white(
                                          'What are your interests?'),
                                      // sizedBoxHeight(5.w),
                                      controller.isFirstSelectionActive.value
                                          ? text13400A7A7A7(
                                              'Select your secondary interests')
                                          : text13400A7A7A7(
                                              'Select your primary interest'),

                                      // Container(
                                      //   width: 154.w,
                                      //   decoration: const ShapeDecoration(
                                      //     shape: RoundedRectangleBorder(
                                      //       side: BorderSide(
                                      //         width: 1,
                                      //         strokeAlign:
                                      //             BorderSide.strokeAlignCenter,
                                      //         color: Color(0xFF858585),
                                      //       ),
                                      //     ),
                                      //   ),
                                      // ),
                                      sizedBoxHeight(30.h),
                                      GridView.builder(
                                        physics: const ScrollPhysics(),
                                        shrinkWrap: true,
                                        gridDelegate:
                                            SliverGridDelegateWithFixedCrossAxisCount(
                                          crossAxisCount:
                                              3, // Number of items in each row
                                          crossAxisSpacing: 12
                                              .w, // Horizontal spacing between items
                                          mainAxisSpacing: 12
                                              .h, // Vertical spacing between items
                                        ),
                                        itemCount:
                                            indiactivityobj!.data!.length,
                                        itemBuilder: (context, index) {
                                          return ActivityContainer(
                                            index: indiactivityobj!
                                                .data![index].id!,
                                            titleString: indiactivityobj!
                                                .data![index].name!,
                                            image: indiactivityobj!
                                                .data![index].image,
                                            // 'assets/images/svg/individualact7.svg',
                                            controller: controller,
                                          );
                                        },
                                      ),

                                      sizedBoxHeight(30.h),
                                      // text20400FCFCFC("Add other activity"),
                                      // sizedBoxHeight(25.h),
                                      // CustomTextFormField(
                                      //   textEditingController:
                                      //       otheractivitycontroller,
                                      //   texttype: TextInputType.text,
                                      //   hintText: "Enter other activity",
                                      //   // leadingIcon:
                                      //   //     // const Icon(Icons.mail_outline),
                                      //   //     Image.asset(
                                      //   //   width: 22.w,
                                      //   //   height: 17.h,
                                      //   //   'assets/images/png/user.png',
                                      //   // ),
                                      //   // validatorText: "Enter your full name",
                                      //   validator: (value) {
                                      //     if (value!.isEmpty) {
                                      //       return 'Enter your full name ';
                                      //     }
                                      //     return null;
                                      //   },
                                      //   inputFormatters: [
                                      //     // LengthLimitingTextInputFormatter(20),
                                      //     RemoveEmojiInputFormatter(),
                                      //     FilteringTextInputFormatter.allow(
                                      //         RegExp('[a-zA-Z ]'))
                                      //   ],
                                      // ),

                                      sizedBoxHeight(35.h),
                                    ],
                                  )
                          ],
                        ),
                      ),
                    ),
                  ],
                );
              },
            ),
          ),
          floatingActionButton: Stack(
            alignment: Alignment.center,
            clipBehavior: Clip.none, // Ensure the Positioned widget is visible
            children: [
              FloatingActionButton(
                onPressed: () {
                  interestdialogwidget();
                },
                backgroundColor: const Color(0xFFD90B2E),
                autofocus: true,
                shape: const CircleBorder(),
                child: Icon(
                  Icons.add,
                  color: Colors.white,
                  size: 27.sp,
                ),
              ),
              Positioned(
                right: 60.w,
                child: Container(
                    width: 212.w,
                    height: 35.h,
                    decoration: BoxDecoration(
                        color: Color(0xFF363636),
                        borderRadius: BorderRadius.circular(20),
                        border:
                            Border.all(color: Color(0xFFD90B2E), width: 1.w)),
                    child: Center(
                        child: text16400white("Can’t find your interest"))),
              )
            ],
          ),
        ));
  }

  Widget _buildNoDataBody(context) {
    return const Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [Text("No Data Found")],
    );
  }

  interestdialogwidget() {
    Get.dialog(Dialog(
      // backgroundColor: Colors.transparent,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.r),
                color: const Color(0xFF222935)),
            child: Padding(
              padding: EdgeInsets.only(
                  right: 16.w, left: 16.w, top: 20.h, bottom: 40.h),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Spacer(),
                      InkWell(
                        onTap: () {
                          Get.back();
                        },
                        child: Image.asset(
                          "assets/images/png/x-circle.png",
                          height: 28.h,
                          width: 28.w,
                        ),
                      )
                    ],
                  ),
                  text16w700_FCFCFC("Suggest interest"),
                  sizedBoxHeight(16.h),
                  Center(
                      child: CustomTextFormField(
                    textEditingController: otheractivitycontroller,
                    hintText: "Please type your interest",
                    texttype: TextInputType.text,
                    validator: (value) {
                      if (value!.isEmpty) {
                        return 'Enter your interest';
                      }
                      return null;
                    },
                    inputFormatters: [
                      // LengthLimitingTextInputFormatter(20),
                      RemoveEmojiInputFormatter(),
                      FilteringTextInputFormatter.allow(RegExp('[a-zA-Z ]'))
                    ],
                  )),
                  sizedBoxHeight(10.h),
                  text10w400_FCFCFC_blur("We will surely make this happen"),
                  sizedBoxHeight(20.h),
                  Align(
                    alignment: Alignment.center,
                    child: SizedBox(
                        width: 177.w,
                        child: CommonBtn(
                            text: "Suggest",
                            onTap: () {
                              Get.back();
                              thankdialogwidget();
                            })),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    ));
  }

  thankdialogwidget() {
    Get.dialog(Dialog(
      // backgroundColor: Colors.transparent,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.r),
                color: const Color(0xFF222935)),
            child: Padding(
              padding: EdgeInsets.only(
                  right: 16.w, left: 16.w, top: 20.h, bottom: 40.h),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Row(
                    children: [
                      Spacer(),
                      Image.asset(
                        "assets/images/png/x-circle.png",
                        height: 28.h,
                        width: 28.w,
                      )
                    ],
                  ),
                  Image.asset(
                    "assets/images/png/correct 1.png",
                    height: 72.h,
                    width: 72.w,
                  ),
                  sizedBoxHeight(20.h),
                  text16w700_FCFCFC(
                      "Thank You! \n for adding one more to the club",
                      textAlign: TextAlign.center),
                  sizedBoxHeight(16.h),
                ],
              ),
            ),
          ),
        ],
      ),
    ));
  }
}

class ActivityContainer extends StatelessWidget {
  final int index;
  final String titleString;
  final String? image;
  final ActivityController controller;

  ActivityContainer({
    required this.index,
    required this.titleString,
    required this.image,
    required this.controller,
  });

  @override
  Widget build(BuildContext context) {
    return Obx(
      () {
        bool isSelected = controller.selectedIndices.contains(index);
        Color gradientColor = controller.getGradientColor(index);

        return GestureDetector(
          onTap: () => controller.onContainerTap(index),
          child: Container(
            decoration: ShapeDecoration(
              gradient: LinearGradient(
                begin: const Alignment(0.98, 0.10),
                end: const Alignment(-0.40, -0.70),
                colors: isSelected
                    ? controller.firstSelectedIndex.value == index &&
                            controller.isFirstSelectionActive.value
                        ? [
                            Color(0xFF009DAB).withOpacity(0.80),
                            Color(0xFF009DAB).withOpacity(0.77),
                            gradientColor.withOpacity(0.70),
                            gradientColor.withOpacity(0.50),
                          ]
                        : [
                            Colors.white.withOpacity(0.06),
                            Colors.white.withOpacity(0.08),
                          ]
                    : [
                        Colors.white.withOpacity(0.06),
                        Colors.white.withOpacity(0.08),
                      ],
              ),
              shape: RoundedRectangleBorder(
                side: isSelected
                    ? controller.firstSelectedIndex.value == index &&
                            controller.isFirstSelectionActive.value
                        ? BorderSide(width: 0.4.w, color: Colors.transparent)
                        : BorderSide(width: 3.w, color: gradientColor)
                    : BorderSide(width: 2.w, color: Color(0xFF434A53)),
                borderRadius: BorderRadius.circular(10),
              ),
            ),
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 0.w, vertical: 10.h),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  image == null || image!.isEmpty
                      ? Image.asset(
                          'assets/images/png/redregroup.png',
                          color: Colors.white,
                          width: 50.w,
                          height: 50.h,
                        )
                      : Image.network(
                          image!,
                          width: 50.w,
                          height: 50.h,
                        ),
                  const Spacer(flex: 3),
                  SizedBox(
                    child: Text(
                      titleString,
                      style: TextStyle(
                        fontSize: 14.sp,
                        color: Colors.white,
                        fontWeight: FontWeight.w400,
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}