import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/string_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/helper/utils.dart';
import 'package:test_sa/models/lookup.dart';
import 'package:test_sa/modules/cm_module/views/components/action_button/footer_action_button.dart';
import 'package:test_sa/modules/demo_module/provider/demo_provider.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';
import 'package:test_sa/new_views/common_widgets/app_filled_button.dart';
import 'package:test_sa/new_views/common_widgets/app_text_form_field.dart';
import 'package:test_sa/new_views/common_widgets/default_app_bar.dart';
import 'package:test_sa/new_views/common_widgets/single_item_drop_down_menu.dart';
import 'package:test_sa/providers/loading_list_notifier.dart';

class EvaluationFormPage extends StatefulWidget {
  final int id;

  const EvaluationFormPage({Key? key, required this.id}) : super(key: key);

  @override
  _EvaluationFormPageState createState() {
    return _EvaluationFormPageState();
  }
}

class _EvaluationFormPageState extends State<EvaluationFormPage> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  bool isAcknowledged = false;

  static List<Lookup> rating = [
    Lookup(name: "1", id: 1, value: 1),
    Lookup(name: "2", id: 2, value: 2),
    Lookup(name: "3", id: 3, value: 3),
    Lookup(name: "4", id: 4, value: 4),
    Lookup(name: "5", id: 5, value: 5)
  ];
  Map<String, dynamic> formData = {};

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: DefaultAppBar(title: 'Evaluation'.addTranslation),
      body: Form(
        key: _formKey,
        child: Column(
          children: [
            SingleChildScrollView(
              padding: const EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  questionnaire(),
                  16.height,
                  ratingQuestions(),
                  16.height,
                  optionQuestions(),
                ],
              ),
            ).expanded,
            FooterActionButton.footerContainer(
              context: context,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Checkbox(
                          value: isAcknowledged,
                          visualDensity: const VisualDensity(horizontal: -4, vertical: -4),
                          activeColor: AppColor.blueStatus(context),
                          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                          onChanged: (value) {
                            setState(() {
                              isAcknowledged = value!;
                            });
                          }),
                      8.width,
                      "I Acknowledge that the above information is correct and reflects my experience with the medical equipment."
                          .bodyText(context)
                          .custom(color: context.isDark ? AppColor.primary50 : AppColor.neutral120)
                          .expanded,
                    ],
                  ),
                  16.height,
                  AppFilledButton(
                    buttonColor: AppColor.primary10,
                    label: context.translation.submitRequest,
                    disableButton: !isAcknowledged,
                    onPressed: _submit,
                    // buttonColor: AppColor.primary10,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget questionnaire() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        'Clinical practice after using the new technology'.addTranslation.bodyText(context).custom(color: AppColor.black10),
        16.height,
        AppTextFormField(
          initialValue: "",
          hintText: "Some Comments",
          labelText: "Advantages",
          validator: (value) {
            if ((value ?? "").isEmpty) return "Mandatory";
            return null;
          },
          style: TextStyle(fontWeight: FontWeight.w500, fontSize: context.isTablet() ? 16 : 12, color: context.isDark ? Colors.white : const Color(0xff3B3D4A)),
          labelStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: context.isTablet() ? 16 : 12, color: context.isDark ? Colors.white : const Color(0xff767676)),
          floatingLabelStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: context.isTablet() ? 16 : 12, color: context.isDark ? Colors.white : const Color(0xff3B3D4A)),
          backgroundColor: AppColor.fieldBgColor(context),
          showShadow: false,
          textInputType: TextInputType.multiline,
          makeMultiLinesNull: false,
          onChange: (value) {
            formData['advantages'] = value;
          },
        ),
        8.height,
        AppTextFormField(
          initialValue: "",
          hintText: "Some Comments",
          labelText: "Disadvantages",
          validator: (value) {
            if ((value ?? "").isEmpty) return "Mandatory";
            return null;
          },
          style: TextStyle(fontWeight: FontWeight.w500, fontSize: context.isTablet() ? 16 : 12, color: context.isDark ? Colors.white : const Color(0xff3B3D4A)),
          labelStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: context.isTablet() ? 16 : 12, color: context.isDark ? Colors.white : const Color(0xff767676)),
          floatingLabelStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: context.isTablet() ? 16 : 12, color: context.isDark ? Colors.white : const Color(0xff3B3D4A)),
          backgroundColor: AppColor.fieldBgColor(context),
          showShadow: false,
          textInputType: TextInputType.multiline,
          makeMultiLinesNull: false,
          onChange: (value) {
            formData['disadvantages'] = value;
          },
        ),
        8.height,
        AppTextFormField(
          initialValue: "",
          hintText: "Some Comments",
          labelText: "How did the new technology improve the practice compared with current technology",
          validator: (value) {
            if ((value ?? "").isEmpty) return "Mandatory";
            return null;
          },
          style: TextStyle(fontWeight: FontWeight.w500, fontSize: context.isTablet() ? 16 : 12, color: context.isDark ? Colors.white : const Color(0xff3B3D4A)),
          labelStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: context.isTablet() ? 16 : 12, color: context.isDark ? Colors.white : const Color(0xff767676)),
          floatingLabelStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: context.isTablet() ? 16 : 12, color: context.isDark ? Colors.white : const Color(0xff3B3D4A)),
          backgroundColor: AppColor.fieldBgColor(context),
          showShadow: false,
          textInputType: TextInputType.multiline,
          makeMultiLinesNull: false,
          onChange: (value) {
            formData['practiceImprovementDescription'] = value;
          },
        ),
        8.height,
        AppTextFormField(
          initialValue: "",
          hintText: "Some Comments",
          labelText: "Does it suit the clinical needs?",
          validator: (value) {
            if ((value ?? "").isEmpty) return "Mandatory";
            return null;
          },
          style: TextStyle(fontWeight: FontWeight.w500, fontSize: context.isTablet() ? 16 : 12, color: context.isDark ? Colors.white : const Color(0xff3B3D4A)),
          labelStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: context.isTablet() ? 16 : 12, color: context.isDark ? Colors.white : const Color(0xff767676)),
          floatingLabelStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: context.isTablet() ? 16 : 12, color: context.isDark ? Colors.white : const Color(0xff3B3D4A)),
          backgroundColor: AppColor.fieldBgColor(context),
          showShadow: false,
          textInputType: TextInputType.multiline,
          makeMultiLinesNull: false,
          onChange: (value) {
            formData['suitsClinicalNeeds'] = value;
          },
        ),
        8.height,
        AppTextFormField(
          initialValue: "",
          labelText: "Did the technology save time?",
          hintText: "Some Comments",
          validator: (value) {
            if ((value ?? "").isEmpty) return "Mandatory";
            return null;
          },
          style: TextStyle(fontWeight: FontWeight.w500, fontSize: context.isTablet() ? 16 : 12, color: context.isDark ? Colors.white : const Color(0xff3B3D4A)),
          labelStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: context.isTablet() ? 16 : 12, color: context.isDark ? Colors.white : const Color(0xff767676)),
          floatingLabelStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: context.isTablet() ? 16 : 12, color: context.isDark ? Colors.white : const Color(0xff3B3D4A)),
          backgroundColor: AppColor.fieldBgColor(context),
          showShadow: false,
          textInputType: TextInputType.multiline,
          makeMultiLinesNull: false,
          onChange: (value) {
            formData['technologySavedTime'] = value;
          },
        ),
      ],
    ).toShadowContainer(context, borderRadius: 20);
  }

  Widget ratingQuestions() {
    return Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [
      'Rating the following.'.addTranslation.bodyText(context).custom(color: AppColor.black10),
      16.height,
      SingleItemDropDownMenu<Lookup, NullableLoadingProvider>(
        context: context,
        title: "Ease of Use",
        backgroundColor: AppColor.fieldBgColor(context),
        showShadow: false,
        showAsBottomSheet: true,
        initialValue: rating.where((obj) => obj.value == formData['easeOfUse']).firstOrNull,
        staticData: rating,
        validator: (value) {
          if (value == null) return "Mandatory";
          return null;
        },
        onSelect: (value) {
          formData['easeOfUse'] = value!.value;
        },
      ),
      8.height,
      SingleItemDropDownMenu<Lookup, NullableLoadingProvider>(
        context: context,
        title: "Ease of Application",
        backgroundColor: AppColor.fieldBgColor(context),
        showShadow: false,
        showAsBottomSheet: true,
        initialValue: rating.where((obj) => obj.value == formData['easeOfApplication']).firstOrNull,
        staticData: rating,
        validator: (value) {
          if (value == null) return "Mandatory";
          return null;
        },
        onSelect: (value) {
          formData['easeOfApplication'] = value!.value;
        },
      ),
      8.height,
      SingleItemDropDownMenu<Lookup, NullableLoadingProvider>(
        context: context,
        title: "Ease to apply on patient & switch between patients",
        backgroundColor: AppColor.fieldBgColor(context),
        showShadow: false,
        showAsBottomSheet: true,
        initialValue: rating.where((obj) => obj.value == formData['easeOfPatientSwitch']).firstOrNull,
        staticData: rating,
        validator: (value) {
          if (value == null) return "Mandatory";
          return null;
        },
        onSelect: (value) {
          formData['easeOfPatientSwitch'] = value!.value;
        },
      ),
      8.height,
      SingleItemDropDownMenu<Lookup, NullableLoadingProvider>(
        context: context,
        title: "Patient Comfort",
        backgroundColor: AppColor.fieldBgColor(context),
        showShadow: false,
        showAsBottomSheet: true,
        initialValue: rating.where((obj) => obj.value == formData['patientComfort']).firstOrNull,
        staticData: rating,
        validator: (value) {
          if (value == null) return "Mandatory";
          return null;
        },
        onSelect: (value) {
          formData['patientComfort'] = value!.value;
        },
      ),
      // 8.height,
      // SingleItemDropDownMenu<Lookup, NullableLoadingProvider>(
      //   context: context,
      //   title: "Patient Comfort",
      //   backgroundColor: AppColor.fieldBgColor(context),
      //   showShadow: false,
      //   showAsBottomSheet: true,
      //   initialValue: formData['patientComfort'],
      //   staticData: rating,
      //   validator: (value) {
      //     if (value == null) return "Mandatory";
      //     return null;
      //   },
      //   onSelect: (value) {
      //     formData['patientComfort'] = value;
      //   },
      // ),
      // 8.height,
      // SingleItemDropDownMenu<Lookup, NullableLoadingProvider>(
      //   context: context,
      //   title: "Overall Rating",
      //   backgroundColor: AppColor.fieldBgColor(context),
      //   showShadow: false,
      //   showAsBottomSheet: true,
      //   initialValue: formData['patientComfort'],
      //   staticData: rating,
      //   validator: (value) {
      //     if (value == null) return "Mandatory";
      //     return null;
      //   },
      //   onSelect: (value) {
      //     formData['patientComfort'] = value;
      //   },
      // ),
      // 8.height,
      // SingleItemDropDownMenu<Lookup, NullableLoadingProvider>(
      //   context: context,
      //   title: "Equipment Overall Rate",
      //   backgroundColor: AppColor.fieldBgColor(context),
      //   showShadow: false,
      //   showAsBottomSheet: true,
      //   initialValue: formData['patientComfort'],
      //   staticData: rating,
      //   validator: (value) {
      //     if (value == null) return "Mandatory";
      //     return null;
      //   },
      //   onSelect: (value) {
      //     formData['patientComfort'] = value;
      //   },
      // ),
    ]).toShadowContainer(context, borderRadius: 20);
  }

  Widget optionQuestions() {
    return Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [
      'Addition Information & Comments'.addTranslation.bodyText(context).custom(color: AppColor.black10),
      16.height,
      AppTextFormField(
        initialValue: "",
        labelText: "Some Comments",
        style: TextStyle(fontWeight: FontWeight.w500, fontSize: context.isTablet() ? 16 : 12, color: context.isDark ? Colors.white : const Color(0xff3B3D4A)),
        labelStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: context.isTablet() ? 16 : 12, color: context.isDark ? Colors.white : const Color(0xff767676)),
        floatingLabelStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: context.isTablet() ? 16 : 12, color: context.isDark ? Colors.white : const Color(0xff3B3D4A)),
        backgroundColor: AppColor.fieldBgColor(context),
        showShadow: false,
        textInputType: TextInputType.multiline,
        makeMultiLinesNull: false,
        onChange: (value) {
          formData['additionalComments'] = value;
        },
      ),
    ]).toShadowContainer(context, borderRadius: 20);
  }

  Future<void> _submit() async {
    FocusScope.of(context).unfocus();
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();

      Utils.showLoading(context);
      DemoProvider demoProvider = Provider.of<DemoProvider>(context, listen: false);
      formData["id"] = 0;
      formData["demoRequestId"] = widget.id;
      formData["isAcknowledged"] = isAcknowledged;
      bool isSuccess = await demoProvider.addDemoTrialOutcome(formData);
      Utils.hideLoading(context);
      if (isSuccess) {
        Navigator.pop(context, true);
      }
    }
  }
}
