import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:glassmorphism/glassmorphism.dart';
import 'package:regroup/Common/CommonDropDown.dart';
import 'package:regroup/Common/base_manager.dart';
import 'package:regroup/Utils/Common/CommonDropdown.dart';
import 'package:regroup/Utils/Common/CustomNextButton.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/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 SelectIndividualActivity extends StatefulWidget {
  const SelectIndividualActivity({super.key});

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

class _SelectIndividualActivityState extends State<SelectIndividualActivity> {
  final List<int> _selectedIndices = [];
  TextEditingController otheractivitycontroller = TextEditingController();

// 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 = '[${_selectedIndices.join(',')}]';
    print('Selected Indices: $selectedIndicesString');
    Map<String, dynamic> updata = {
      "manage_interest_xid": selectedIndicesString,
      "other_interest": otheractivitycontroller.text,
    };
    print('Payload: $updata');

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

      return utils.showToast(data.message);
    } else {
      Get.back();
      print("Not done");
      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 (_selectedIndices.isEmpty &&
                    otheractivitycontroller.text.isEmpty) {
                  utils.showToast('Please select activity');
                } else {
                  print(_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: 120.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.start,
                                  children: [
                                    Center(
                                        child: _selectedIndices.isEmpty
                                            ? text20400white(
                                                'What is your main activity ?')
                                            : text20400white(
                                                'What else do you do?')),
                                    sizedBoxHeight(10.w),
                                    Center(
                                      child: 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',
                                          isSelected: _selectedIndices.contains(
                                              indiactivityobj!
                                                  .data![index].id!),
                                          gradientColor: _getGradientColor(
                                              indiactivityobj!
                                                  .data![index].id!),
                                          onTap: _onContainerTap,
                                        );
                                      },
                                    ),

                                    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 ]'))
                                      ],
                                    ),
                                    // CustomDropDownRadio(
                                    //     header: "",
                                    //     title: "",
                                    //     listData: [
                                    //       "American football",
                                    //       "Archery",
                                    //       "Athletics",
                                    //       "Baseball",
                                    //       "Basketball",
                                    //       "Boxing",
                                    //       "Canoeing",
                                    //       "Clay pigeon shooting",
                                    //       "Climbing",
                                    //       "Combat sports",
                                    //       "Cricket",
                                    //       "Dodgeball",
                                    //       "Equestrian",
                                    //       "Fencing",
                                    //       "Gaelic football",
                                    //       "Golf",
                                    //       "Gymnastics",
                                    //       "Handball",
                                    //       "Hockey",
                                    //       "Lacrosse",
                                    //       "Modern biathlon and pentathlon",
                                    //       "Netball",
                                    //       "Orienteering",
                                    //       "Pool and snooker",
                                    //       "Powerlifting",
                                    //       "Rifle",
                                    //       "Rugby league",
                                    //       "Rugby union",
                                    //       "Sailing",
                                    //       "Snowsports",
                                    //       "Squash",
                                    //       "Surfing",
                                    //       "Swimming",
                                    //       "Softball",
                                    //       "Table tennis",
                                    //       "Tennis",
                                    //       "Touch rugby",
                                    //       "Trampoline",
                                    //       "Triathlon",
                                    //       "Ultimate frisbee",
                                    //       "Volleyball",
                                    //       "Water polo",
                                    //       "Windsurfing"
                                    //     ],
                                    //     onItemSelected: (p0) {},
                                    //     leadingImage: SizedBox()),
                                    // // Spacer(flex: 1),

                                    sizedBoxHeight(35.h),
                                  ],
                                )
                        ],
                      ),
                    ),
                  ),
                ],
              );
            },
          ),
        ),

        //
      ),
    );
  }

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

class ActivityContainer extends StatelessWidget {
  final int index;
  final String titleString;
  final String? image;
  final bool isSelected;
  final Color gradientColor;
  final Function(int) onTap;

  ActivityContainer({
    required this.index,
    required this.titleString,
    required this.image,
    required this.isSelected,
    required this.gradientColor,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => onTap(index),
      child: Container(
        //  width: 110.w,
        // height: 120.h,
        decoration: ShapeDecoration(
          gradient: LinearGradient(
            begin: const Alignment(0.98, -0.21),
            end: const Alignment(-0.98, 0.21),
            colors: isSelected
                ? [
                    gradientColor.withOpacity(0.80),
                    gradientColor.withOpacity(0.77),
                    gradientColor.withOpacity(0.66),
                    gradientColor.withOpacity(0.18),
                  ]
                : [
                    Colors.white.withOpacity(0.06),
                    Colors.white.withOpacity(0.08),
                  ],
          ),
          shape: RoundedRectangleBorder(
            side: const BorderSide(width: 1, 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.isEmpty
              //     ? SvgPicture.asset(
              //         "assets/images/svg/individualact7.svg",
              //         width: 50.w,
              //         height: 50.h,
              //       )
              //     : Image.network(image),
              image == null || image!.isEmpty
                  ? Image.asset(
                      'assets/images/png/redregroup.png',
                      color: Colors.white,
                      width: 50.w,
                      height: 50.h,
                    )
                  //  SvgPicture.asset(
                  //     "assets/images/svg/individualact7.svg",
                  //     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,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}