import 'package:discover_module/constants.dart';
import 'package:discover_module/ui_screen/interactionform/interactionprovider.dart';
import 'package:discover_module/ui_screen/interactionform/model/interaction_data.dart';
import 'package:discover_module/ui_screen/interactionform/model/save_interaction.dart';
import 'package:discover_module/ui_screen/interactionform/util.dart';
import 'package:discover_module/ui_screen/interactionform/widget/custombutton.dart';
import 'package:discover_module/ui_screen/interactionform/widget/responsive_ext.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

// ignore: must_be_immutable
class ViewInteractionScreen extends StatefulWidget {
  SaveInteraction saveInteraction;
  ViewInteractionScreen({super.key, required this.saveInteraction});

  @override
  State<ViewInteractionScreen> createState() => _ViewInteractionScreenState();
}

class _ViewInteractionScreenState extends State<ViewInteractionScreen> {
  List<dynamic> interactionReponseList = [];
  List<SectionList> sectionList = [];
  List<TextEditingController> textEditingControllerList = [];
  int textfieldIndex = 0;
  String dropdownvalue = 'Select value';
  String? fileName;
  final TextEditingController textEditingController = TextEditingController();
  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      init();
    });

    super.initState();
  }

  init() async {
    await Provider.of<InteractionProvider>(context, listen: false)
        .initSavedForm(widget.saveInteraction);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<InteractionProvider>(
        builder: (BuildContext context, provider, Widget? child) {
      print("build context");
      print("${provider.interactionReponseList}");
      return GestureDetector(
        onTap: () {
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: OrientationBuilder(builder: (context, orientation) {
          return SafeArea(
            child: Scaffold(
                //resizeToAvoidBottomInset: false,
                appBar: AppBar(
                  title: Text(
                    widget.saveInteraction.id,
                    style: TextStyle(
                        fontSize: isTablet ? 22 : 14, color: Colors.white),
                  ),
                  // backgroundColor: const Color(0xFF2b9af3),
                  automaticallyImplyLeading: false,
                  leading: InkWell(
                    onTap: () {
                      Navigator.pop(context);
                    },
                    child: const Icon(
                      Icons.arrow_back_ios,
                      color: Colors.white,
                    ),
                  ),
                ),
                body: Column(
                  children: [
                    Expanded(
                      child: ListView.builder(
                        itemCount: provider.interactionReponseList.length,
                        cacheExtent: double.parse(
                            provider.interactionReponseList.length.toString()),
                        itemBuilder: (context, index) {
                          var item = provider.interactionReponseList[index];
                          sectionList = item.sectionList;
                          return ExpansionTile(
                              initiallyExpanded: true,
                              title: Stack(
                                  alignment: AlignmentDirectional.center,
                                  children: [
                                    Container(
                                        // height: double.infinity,
                                        width: double.infinity,
                                        padding: const EdgeInsets.all(8.0),
                                        decoration: BoxDecoration(
                                          // color: Color(0xFF2b9af3),
                                          color: Constants.k2color,
                                        ),
                                        child: Text(
                                          item.sectionName,
                                          style: const TextStyle(
                                              color: Colors.white,
                                              fontWeight: FontWeight.bold,
                                              fontSize: 18.0),
                                        )),
                                  ]),
                              children: [
                                Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    children: [
                                      const SizedBox(
                                        height: 20,
                                      ),

                                      Padding(
                                        padding: isTablet
                                            ? const EdgeInsets.only(left: 18.0)
                                            : const EdgeInsets.only(
                                                left: 12.0, right: 12.0),
                                        child: GridView.count(
                                          physics:
                                              const NeverScrollableScrollPhysics(),
                                          // crossAxisCount: context.responsive<int>(
                                          //   1,
                                          //   sm: 1, // small
                                          //   md: 1, // medium
                                          //   lg: sectionList.length == 1
                                          //       ? 1
                                          //       : 4, // large
                                          //   xl: 3, // extra large screen
                                          // ),
                                          // mainAxisSpacing:
                                          //     sectionList.length == 1 || !isTablet
                                          //         ? 1
                                          //         : 3.5,
                                          // shrinkWrap: true,
                                          // padding: EdgeInsets.zero,
                                          // childAspectRatio:
                                          //     sectionList.length == 1 || !isTablet
                                          //         ? orientation ==
                                          //                 Orientation.landscape
                                          //             ? 10
                                          //             : 3.8
                                          //         : 2.8,

                                          crossAxisCount:
                                              context.responsive<int>(
                                            1,
                                            sm: 1, // small
                                            md: 2, // medium
                                            lg: sectionList.length == 1
                                                ? 1
                                                : 3, // large
                                            xl: 3, // extra large screen
                                          ),
                                          mainAxisSpacing:
                                              sectionList.length == 1 ||
                                                      !isTablet
                                                  ? 1
                                                  : 3.5,
                                          childAspectRatio:
                                              sectionList.length == 1
                                                  ? orientation ==
                                                          Orientation.landscape
                                                      ? 10
                                                      : 4.8
                                                  : isTablet
                                                      ? 2.8
                                                      : 3.0,
                                          // childAspectRatio:
                                          //     sectionList.length == 1
                                          //         ? orientation ==
                                          //                 Orientation.landscape
                                          //             ? 10
                                          //             : 4.8
                                          //         : isTablet
                                          //             ? 2.8
                                          //             : 3.0,
                                          shrinkWrap: true,
                                          padding: EdgeInsets.zero,
                                          children: List.generate(
                                            sectionList.length,
                                            (i) {
                                              print(sectionList);
                                              SectionList sectionItem =
                                                  sectionList[i];
                                              dropdownvalue = sectionItem
                                                          .widget ==
                                                      InteractionWidget.DROPDOWN
                                                  ? sectionItem.value ??
                                                      "Select"
                                                  : ' ';
                                              List<
                                                  InputClass> list = sectionItem
                                                              .widget ==
                                                          InteractionWidget
                                                              .DROPDOWN ||
                                                      sectionItem.widget ==
                                                          InteractionWidget
                                                              .AUTOCOMPLETE ||
                                                      sectionItem.widget ==
                                                          InteractionWidget
                                                              .MULTISELECT
                                                  ? provider
                                                      .getData2(sectionItem)
                                                  : [];
                                              provider.checkboxlist =
                                                  sectionItem.widget ==
                                                          InteractionWidget
                                                              .CHECKBOX
                                                      ? provider
                                                          .getData2(sectionItem)
                                                      : [];

                                              return Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                children: [
                                                  sectionItem.widget ==
                                                              InteractionWidget
                                                                  .BUTTON &&
                                                          sectionItem.param ==
                                                              'add'
                                                      ? const SizedBox.shrink()
                                                      : Text(
                                                          '${sectionItem.name}:*',
                                                          style: TextStyle(
                                                            color: Colors.orange
                                                                .shade800,
                                                            fontSize: isTablet
                                                                ? 18
                                                                : 12,
                                                          ),
                                                        ),
                                                  SizedBox(
                                                    height: isTablet ? 15 : 5,
                                                  ),
                                                  returnWidget(
                                                      sectionItem: sectionItem,
                                                      item: item,
                                                      provider: provider,
                                                      list: list,
                                                      gridIndex: i,
                                                      listIndex: index,
                                                      widgetData:
                                                          sectionItem.widget!),
                                                  SizedBox(
                                                    height: isTablet ? 15 : 5,
                                                  ),
                                                ],
                                              );
                                            },
                                          ),
                                        ),
                                      ),
                                      SizedBox(
                                        height: isTablet ? 15 : 5,
                                      ),
                                      item.multiple
                                          ? gridViewWidget(
                                              provider,
                                              item.sectionName,
                                              item.multipleList ?? [],
                                              orientation,
                                              item,
                                              index)
                                          : const SizedBox.shrink(),
                                      provider.interactionReponseList.length ==
                                              index - 1
                                          ? saveActions(provider)
                                          : const SizedBox.shrink()
                                      //const Spacer(),
                                    ],
                                  ),
                                ),
                              ]);
                        },
                      ),
                    ),
                    // const Spacer(),
                    // saveActions(provider),
                  ],
                )),
          );
        }),
      );
    });
  }

  Widget returnWidget({
    required SectionList sectionItem,
    required FormFieldData item,
    required InteractionProvider provider,
    required List<InputClass> list,
    required int gridIndex,
    required int listIndex,
    required InteractionWidget widgetData,
  }) {
    switch (widgetData) {
      case InteractionWidget.CHECKBOX:
        return (sectionItem.inputList!.length >= 5)
            ? Text(sectionItem.selectedValue.toString())
            : Text(provider.getDataValue(
                sectionItem.id, sectionItem.selectedValue!.last));

      case InteractionWidget.AUTOCOMPLETE:
        return Text(provider.getDataValue(
            sectionItem.id, sectionItem.selectedValue!.last));

      case InteractionWidget.MULTISELECT:
        return Text(sectionItem.selectedValue.toString());

      case InteractionWidget.RADIO:
        return (sectionItem.inputList!.length >= 5)
            ? Text(sectionItem.selectedValue!.isNotEmpty
                ? provider.getDataValue(
                    sectionItem.id, sectionItem.selectedValue!.last)
                : " ")
            : Text(provider.getDataValue(
                sectionItem.id, sectionItem.selectedValue!.last));

      case InteractionWidget.LABEL:
        return Text(sectionItem.input!);

      case InteractionWidget.RANGESLIDER:
        return Text(sectionItem.selectedValue!.isNotEmpty
            ? sectionItem.selectedValue!.last.toString()
            : " ");

      case InteractionWidget.TEXT:
        return Text(sectionItem.selectedValue!.isNotEmpty
            ? sectionItem.selectedValue!.last.toString()
            : " ");

      case InteractionWidget.BUTTON:
        return sectionItem.input == "chooseFile"
            ? sectionItem.selectedValue!.isNotEmpty
                ? const Text("File Uploaded")
                : const Text(" ")
            : const Text(" ");
      default:
        return Text(sectionItem.selectedValue!.isNotEmpty
            ? provider.getDataValue(
                sectionItem.id, sectionItem.selectedValue!.last)
            : " ");
    }
  }

  Widget saveActions(InteractionProvider provider) {
    return Align(
      alignment: Alignment.centerRight,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          CustomButton(
            backgroundColor: Colors.red.shade800,
            onPressed: () {
              //showDeleteProfileAlertDialog(context);
              for (var textcontrollers in provider.textEditingControllerList) {
                textcontrollers.text = '';
              }
            },
            textColor: Colors.white,
            title: "Reset",
            height: 40,
            width: isTablet ? 100 : 60,
            fontsize: isTablet ? 15 : 10.2,
          ),
          SizedBox(
            width: isTablet ? 20 : 4,
          ),
          CustomButton(
            backgroundColor: Colors.green.shade900,
            onPressed: () async {
              if (textFieldsValidation(provider).isEmpty) {
                //  await provider.saveJsonObject(context, widget.form);
                _displaySnackBar('Form Saved Sucessfully!');
              } else {
                _displaySnackBar(textFieldsValidation(provider));
              }
            },
            textColor: Colors.white,
            title: "Save",
            height: 40,
            width: isTablet ? 100 : 60,
            fontsize: isTablet ? 16 : 12,
          ),
          SizedBox(
            width: isTablet ? 20 : 2,
          ),
        ],
      ),
    );
  }

  // Widget gridViewWidget(
  //     InteractionProvider provider,
  //     String sectionName,
  //     List<SectionList> sectionList,
  //     Orientation orientation,
  //     FormFieldData item,
  //     int listIndex) {
  //   return Padding(
  //     padding: isTablet
  //         ? const EdgeInsets.only(left: 22.0)
  //         : const EdgeInsets.only(left: 12.0, right: 12.0),
  //     child: GridView.count(
  //       physics: const NeverScrollableScrollPhysics(),
  //       crossAxisCount: context.responsive<int>(
  //         1, // default
  //         sm: 1, // small
  //         md: 1, // medium
  //         lg: sectionList.length == 1 ? 1 : 4, // large
  //         xl: 5, // extra large screen
  //       ),
  //       mainAxisSpacing: sectionList.length == 1 || !isTablet ? 1 : 2,
  //       shrinkWrap: true,
  //       padding: EdgeInsets.zero,
  //       childAspectRatio: sectionList.length == 1 || !isTablet
  //           ? orientation == Orientation.landscape
  //               ? 10
  //               : 4.2
  //           : 1.8,
  //       children: List.generate(
  //         sectionList.length,
  //         (i) {
  //           print(sectionList);
  //           SectionList sectionItem = sectionList[i];
  //           dropdownvalue = sectionItem.widget == InteractionWidget.DROPDOWN
  //               ? sectionItem.value ?? "Select"
  //               : ' ';
  //           List<InputClass> list =
  //               sectionItem.widget == InteractionWidget.DROPDOWN ||
  //                       sectionItem.widget == InteractionWidget.AUTOCOMPLETE ||
  //                       sectionItem.widget == InteractionWidget.MULTISELECT
  //                   ? provider.getData2(sectionItem)
  //                   : [];
  //           provider.checkboxlist =
  //               sectionItem.widget == InteractionWidget.CHECKBOX
  //                   ? provider.getData2(sectionItem)
  //                   : [];

  //           return Wrap(children: [
  //             Column(
  //               crossAxisAlignment: CrossAxisAlignment.start,
  //               children: [
  //                 sectionItem.widget == InteractionWidget.BUTTON &&
  //                             sectionItem.param == 'add' ||
  //                         sectionItem.param == 'deletebtn'
  //                     ? const SizedBox.shrink()
  //                     : Text(
  //                         '${sectionItem.name}:*',
  //                         style: TextStyle(
  //                           color: Colors.orange.shade800,
  //                           fontSize: isTablet ? 18 : 14,
  //                         ),
  //                       ),
  //                 const SizedBox(
  //                   height: 15,
  //                 ),
  //                 returnWidget(
  //                     sectionItem: sectionItem,
  //                     item: item,
  //                     provider: provider,
  //                     list: list,
  //                     gridIndex: i,
  //                     listIndex: listIndex,
  //                     widgetData: sectionItem.widget!),
  //               ],
  //             ),
  //           ]);
  //         },
  //       ),
  //     ),
  //   );
  // }

  Widget gridViewWidget(
      InteractionProvider provider,
      String sectionName,
      List<SectionList> sectionList,
      Orientation orientation,
      FormFieldData item,
      int listIndex) {
    List<SectionList> pooja = sectionList;

    print("Pooja: $pooja");

    List<List<SectionList>> convertedArray = [];
    print("Provider Length: ${item.sectionList.length}");

    for (int i = 0; i < sectionList.length; i += item.sectionList.length + 1) {
      print("Section List11111: $sectionList");
      print("item.sectionList.length List11111: ${item.sectionList.length}");

      convertedArray
          .add(sectionList.sublist(i, i + item.sectionList.length + 1));
    }
    print("ConvertedArrayEdit.leangth: $convertedArray");
    print("ConvertedArray.leangth2323: ${convertedArray.length}");

    return DecoratedBox(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black),
        borderRadius: BorderRadius.circular(10),
      ),
      child: Padding(
        padding: isTablet
            ? const EdgeInsets.only(left: 14.0)
            : const EdgeInsets.only(left: 12.0, right: 12.0),
        child: Column(
          children: [
            for (var i = 0; i < convertedArray.length; i++)
              GridView.builder(
                physics: const NeverScrollableScrollPhysics(),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: context.responsive<int>(
                    1, // default
                    sm: 1, // small
                    md: 2, // medium
                    lg: sectionList.length == 1
                        ? 1
                        : (sectionList.length >= 1 ? 3 : 3),
                    // lg: sectionList.length == 1 ? 1 : 3, // large
                    xl: 3, // extra large screen
                  ),
                  childAspectRatio: sectionList.length == 1
                      ? orientation == Orientation.landscape
                          ? 10
                          : 4.8
                      : isTablet
                          ? 2.8
                          : 3.0,

                  mainAxisSpacing:
                      sectionList.length == 1 || !isTablet ? 1 : 3.5,
                  // mainAxisSpacing: sectionList.length == 1 || !isTablet ? 1 : 2,
                ),
                shrinkWrap: true,
                padding: EdgeInsets.zero,

                // childAspectRatio: sectionList.length == 1 || !isTablet
                //     ? orientation == Orientation.landscape
                //         ? 10
                //         : 4.2
                //     : 1.8,
                itemCount: convertedArray[i].length,
                itemBuilder: (context, index) {
                  // children: List.generate(
                  // sectionList.length,
                  // (i) {
                  //   print(sectionList);
                  //   SectionList sectionItem = sectionList[i];
                  //   dropdownvalue = sectionItem.widget == InteractionWidget.DROPDOWN
                  //       ? sectionItem.value ?? "Select"
                  //       : ' ';
                  //   List<InputClass> list =
                  //       sectionItem.widget == InteractionWidget.DROPDOWN ||
                  //               sectionItem.widget == InteractionWidget.AUTOCOMPLETE ||
                  //               sectionItem.widget == InteractionWidget.MULTISELECT
                  //           ? provider.getData2(sectionItem)
                  //           : [];
                  //   provider.checkboxlist =
                  //       sectionItem.widget == InteractionWidget.CHECKBOX
                  //           ? provider.getData2(sectionItem)
                  //           : [];
                  SectionList sectionItem = convertedArray[i][index];
                  dropdownvalue =
                      sectionItem.widget == InteractionWidget.DROPDOWN
                          ? sectionItem.value ?? "Select"
                          : ' ';
                  List<InputClass> list = sectionItem.widget ==
                              InteractionWidget.DROPDOWN ||
                          sectionItem.widget ==
                              InteractionWidget.AUTOCOMPLETE ||
                          sectionItem.widget == InteractionWidget.MULTISELECT
                      ? provider.getData2(sectionItem)
                      : [];
                  provider.checkboxlist =
                      sectionItem.widget == InteractionWidget.CHECKBOX
                          ? provider.getData2(sectionItem)
                          : [];

                  return SizedBox(
                    height: MediaQuery.of(context).size.height,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        sectionItem.widget == InteractionWidget.BUTTON &&
                                    sectionItem.param == 'add' ||
                                sectionItem.param == 'deletebtn'
                            ? const SizedBox.shrink()

                            // ? const SizedBox.shrink()
                            : Text(
                                '${sectionItem.name}:*',
                                style: TextStyle(
                                  color: Colors.orange.shade800,
                                  fontSize: isTablet ? 18 : 14,
                                ),
                              ),
                        const SizedBox(
                          height: 15,
                        ),
                        returnWidget(
                            sectionItem: sectionItem,
                            item: item,
                            provider: provider,
                            list: list,
                            gridIndex: i,
                            listIndex: listIndex,
                            widgetData: sectionItem.widget!),
                      ],
                    ),
                  );
                },
              ),
            //),
          ],
        ),
      ),
    );
  }

  String textFieldsValidation(InteractionProvider provider) {
    if (provider.sectionList
        .any((element) => element.controller!.text.isEmpty)) {
      return 'Fields cannot be empty';
    }

    return '';
  }

  _displaySnackBar(String msg) {
    final snackBar = SnackBar(
        content: Text(
      msg,
      style: const TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
    ));
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
    //scaffoldKeyLogin.currentState!.showSnackBar(snackBar);
  }
}