import 'package:flutter_svg/svg.dart';
import 'package:hmg_patient_app/core/viewModels/project_view_model.dart';
import 'package:hmg_patient_app/pages/AlHabibMedicalService/health_calculator/calorie_calculator/calorie_calculator.dart';
import 'package:hmg_patient_app/theme/colors.dart';
import 'package:hmg_patient_app/uitl/translations_delegate_base.dart';
import 'package:hmg_patient_app/uitl/utils.dart';
import 'package:hmg_patient_app/uitl/font_utils.dart';
import 'package:hmg_patient_app/widgets/buttons/secondary_button.dart';
import 'package:hmg_patient_app/widgets/others/app_scaffold_widget.dart';
import 'package:hmg_patient_app/widgets/transitions/fade_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
import 'package:hijri_gregorian_calendar/hijri_gregorian_calendar.dart';

import 'carbs_result_page.dart';

class Carbs extends StatefulWidget {
  @override
  _CarbsState createState() => _CarbsState();
}

class _CarbsState extends State<Carbs> {
  TextEditingController textController = new TextEditingController();
  final GlobalKey clinicDropdownKey = GlobalKey();
  int? calories;
  late String dropdownValue;
  bool _visible = false;
  int? meals;
  int? protein;
  int? carbs;

  int? fat;
  double? pCal;
  double? cCal;
  double? fCal;
  double? pCalGram;
  double? cCalGram;
  double? fCalGram;
  double? pCalMeal;
  double? cCalMeal;
  double? fCalMeal;

  void calculateDietRatios() {
    if (dropdownValue == TranslationBase.of(context).dietVeryLow) {
      meals = 3;
      protein = 45;
      carbs = 10;
      fat = 45;
    } else if (dropdownValue == TranslationBase.of(context).dietLow) {
      meals = 3;
      protein = 40;
      carbs = 30;
      fat = 30;
    } else if (dropdownValue == TranslationBase.of(context).dietModerate) {
      meals = 3;
      protein = 25;
      carbs = 50;
      fat = 25;
    } else if (dropdownValue == TranslationBase.of(context).dietUSDA) {
      meals = 3;
      protein = 15;
      carbs = 55;
      fat = 30;
    } else if (dropdownValue == TranslationBase.of(context).dietZone) {
      meals = 3;
      protein = 30;
      carbs = 40;
      fat = 30;
    }
  }

  void calculate() {
    pCal = (protein! / 100.0) * int.parse(textController.text).ceil();
    cCal = (carbs! / 100.0) * int.parse(textController.text);

    fCal = (fat! / 100) * int.parse(textController.text);

    pCalGram = pCal! / 4.0;
    cCalGram = cCal! / 4.0;
    fCalGram = fCal! / 9.0;
    pCalMeal = pCalGram! / meals!.ceil();
    cCalMeal = cCalGram! / meals!.ceil();
    fCalMeal = fCalGram! / meals!.ceil();
  }

  @override
  Widget build(BuildContext context) {
    ProjectViewModel projectViewModel = Provider.of(context);

    dropdownValue = TranslationBase.of(context).dietVeryLow;
    return AppScaffold(
      isShowAppBar: true,
      isShowDecPage: false,
      showNewAppBarTitle: true,
      showNewAppBar: true,
      appBarTitle: TranslationBase.of(context).carbohydrate,
      appBarIcons: [
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 7.0),
          child: Icon(
            Icons.info_outline,
            color: Colors.white,
          ),
        )
      ],
      body: Column(
        children: [
          Expanded(
            child: SingleChildScrollView(
              child: Container(
                padding: EdgeInsets.all(21),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      TranslationBase.of(context).carbProteinDesc,
                      style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.w600,
                        letterSpacing: -0.56,
                        color: CustomColors.textColor,
                      ),
                    ),
                    SizedBox(
                      height: 15.0,
                    ),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        inputWidget(TranslationBase.of(context).calDay, "0", textController),
                        InkWell(
                          onTap: () {
                            Navigator.push(
                              context,
                              FadePage(page: CalorieCalculator()),
                            );
                          },
                          child: Padding(
                            padding: const EdgeInsets.all(12.0),
                            child: Text(
                              TranslationBase.of(context).notSure,
                              style: TextStyle(fontSize: 12, fontWeight: FontWeight.w600, letterSpacing: -0.56, color: CustomColors.accentColor, decoration: TextDecoration.underline),
                            ),
                          ),
                        )
                      ],
                    ),
                    SizedBox(
                      height: 12.0,
                    ),
                    InkWell(
                      onTap: () {
                        // dropdownKey.currentState;
                        openDropdown(clinicDropdownKey);
                      },
                      child: Container(
                        // width: double.infinity,
                        // decoration: containerRadius(Colors.white, 12),
                        // padding: EdgeInsets.only(left: 10, right: 10, top: 12, bottom: 12),
                        child: Row(
                          children: [
                            Flexible(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    TranslationBase.of(context).selectDiet,
                                    style: TextStyle(
                                      fontSize: 11,
                                      letterSpacing: -0.44,
                                      fontWeight: FontWeight.w600,
                                    ),
                                  ),
                                  Container(
                                    height: 18,
                                    child: DropdownButtonHideUnderline(
                                      child: DropdownButton<String>(
                                        value: dropdownValue,
                                        key: clinicDropdownKey,
                                        icon: Icon(Icons.arrow_downward),
                                        iconSize: 0,
                                        elevation: 16,
                                        isExpanded: true,
                                        style: TextStyle(color: Colors.black87),
                                        underline: Container(
                                          height: 2,
                                          color: Colors.black54,
                                        ),
                                        onChanged: (String? newValue) {
                                          setState(() {
                                            dropdownValue = newValue!;
                                            calculateDietRatios();
                                          });
                                        },
                                        items: <String>[
                                          TranslationBase.of(context).dietVeryLow,
                                          TranslationBase.of(context).dietLow,
                                          TranslationBase.of(context).dietModerate,
                                          TranslationBase.of(context).dietUSDA,
                                          TranslationBase.of(context).dietZone
                                        ].map<DropdownMenuItem<String>>((String value) {
                                          return DropdownMenuItem<String>(
                                            value: value,
                                            child: Text(value,
                                                style: TextStyle(fontFamily: projectViewModel.isArabic ? 'Cairo' : 'Poppins', fontSize: 11, letterSpacing: -0.44, fontWeight: FontWeight.w600)),
                                          );
                                        }).toList(),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            Icon(Icons.keyboard_arrow_down),
                          ],
                        ),
                      ).withBorderedContainer,
                    ),
                    SizedBox(
                      height: 25.0,
                    ),
                    SizedBox(
                      height: 55.0,
                    ),
                  ],
                ),
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
            color: Colors.white,
            child: SecondaryButton(
              label: TranslationBase.of(context).calculate,
              color: CustomColors.accentColor,
              onTap: () {
                setState(() {
                  {
                    calculate();
                    Navigator.push(
                      context,
                      FadePage(
                          page: CarbsResult(
                        cCal: cCal!,
                        pCal: pCal!,
                        fCal: fCal!,
                        pCalGram: pCalGram!,
                        pCalMeal: pCalMeal!,
                        fCalGram: fCalGram!,
                        fCalMeal: fCalMeal!,
                        cCalGram: cCalGram!,
                        cCalMeal: cCalMeal!,
                      )),
                    );
                  }
                });
              },
            ),
          ),
        ],
      ),
    );
  }

  void openDropdown(GlobalKey key) {
    GestureDetector? detector;

    void searchForGestureDetector(BuildContext element) {
      element.visitChildElements((element) {
        if (element.widget != null && element.widget is GestureDetector) {
          detector = element.widget as GestureDetector?;
          //return false;
        } else {
          searchForGestureDetector(element);
        }

        //return true;
      });
    }

    searchForGestureDetector(key.currentContext!);
    assert(detector != null);

    detector!.onTap!();
  }

// void openDropdown(GlobalKey key) {
//   GestureDetector detector;
//   void searchForGestureDetector(BuildContext element) {
//     element.visitChildElements((element) {
//       if (element.widget != null && element.widget is GestureDetector) {
//         detector = element.widget;
//         return false;
//       } else {
//         searchForGestureDetector(element);
//       }
//
//       return true;
//     });
//   }
//
//   searchForGestureDetector(key.currentContext);
//   assert(detector != null);
//
//   detector.onTap();
// }
}

Widget inputWidget(
  String _labelText,
  String _hintText,
  TextEditingController? _controller, {
  Function(String?)? onChange,
  String? prefix,
  bool isEnable = true,
  bool hasSelection = false,
  bool hasSelectionCustomIcon = false,
  String? selectionCustomIcon,
  bool isBorderAllowed = true,
  bool isAllowLeadingIcon = false,
  bool isLeadingCountry = false,
  String? leadingIcon,
  bool removePadding = false,
  bool isAllowRadius = true,
  bool isReadOnly = false,
  TextInputType keyboardType = TextInputType.number,
  List<String>? dropdownItems,
  String? selectedValue,
  SelectionType? selectionType,
  Function(bool)? onCalendarTypeChanged,
  EdgeInsetsGeometry? padding,
  String lang = 'en',
}) {
  return Builder(
    builder: (context) {
      final isRtl = Directionality.of(context) == TextDirection.rtl;

      return Directionality(
        textDirection: Directionality.of(context),
        child: Container(
          padding: padding != null
              ? padding
              : removePadding
                  ? const EdgeInsets.only(top: 16, bottom: 16)
                  : const EdgeInsets.symmetric(horizontal: 16, vertical: 15),
          alignment: Alignment.center,
          decoration: BoxDecoration(
            borderRadius: isAllowRadius ? BorderRadius.circular(15) : null,
            color: Colors.white,
            border: isBorderAllowed ? Border.all(color: const Color(0xffefefef), width: 1) : null,
          ),
          child: Row(
            textDirection: Directionality.of(context),
            children: [
              if (isAllowLeadingIcon && leadingIcon != null)
                Container(
                  height: 40,
                  width: 40,
                  margin: isRtl ? const EdgeInsets.only(left: 10) : const EdgeInsets.only(right: 10),
                  padding: isLeadingCountry ? null : const EdgeInsets.all(5),
                  decoration: const BoxDecoration(
                    color: Color(0xFFEFEFF0),
                    borderRadius: BorderRadius.all(Radius.circular(10)),
                  ),
                  child: SvgPicture.asset(leadingIcon, width: 24, height: 24),
                ),
              Expanded(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Directionality(
                      textDirection: Directionality.of(context),
                      child: Text(_labelText,
                          textAlign: isRtl ? TextAlign.right : TextAlign.left,
                          style: context.dynamicTextStyle(
                            fontSize: 12,
                            fontWeight: FontWeight.w500,
                            color: const Color(0xff898A8D),
                            letterSpacing: -0.2,
                            height: 18 / 12,
                          )
                          // style: TextStyle(
                          //   fontSize: 12,
                          //   fontWeight: FontWeight.w500,
                          //   color: const Color(0xff898A8D),
                          //   // fontFamily: FontUtils.getFontFamily(context),
                          //   letterSpacing: -0.2,
                          //   height: 18 / 12,
                          // ),
                          ),
                    ),
                    hasSelection
                        ? GestureDetector(
                            onTap: isEnable && !isReadOnly
                                ? () async {
                                    if (selectionType == SelectionType.dropdown) {
                                      final renderBox = context.findRenderObject() as RenderBox;
                                      final offset = renderBox.localToGlobal(Offset.zero);
                                      final selected = await showMenu<String>(
                                        context: context,
                                        position: RelativeRect.fromLTRB(
                                          offset.dx,
                                          offset.dy + renderBox.size.height,
                                          offset.dx + renderBox.size.width,
                                          0,
                                        ),
                                        items: dropdownItems
                                                ?.map(
                                                  (e) => PopupMenuItem<String>(
                                                    value: e,
                                                    child: Text(e),
                                                  ),
                                                )
                                                .toList() ??
                                            [],
                                        shape: RoundedRectangleBorder(
                                          borderRadius: BorderRadius.circular(12),
                                        ),
                                      );

                                      if (selected != null && onChange != null) {
                                        onChange(selected);
                                      }
                                    } else if (selectionType == SelectionType.calendar) {
                                      bool isGregorian = true;
                                      // final picked = await showDatePicker(context: context, initialDate: DateTime.now(), firstDate: DateTime(1900), lastDate: DateTime(2100));
                                      final picked = await showHijriGregBottomSheet(
                                        context,
                                        switcherIcon: SvgPicture.asset("assets/images/svg/language.svg", width: 24),
                                        // fontFamily: FontUtils.getFontFamily(context),
                                        language: lang,
                                        initialDate: DateTime.now(),
                                        okWidget: Padding(
                                          padding: const EdgeInsets.only(right: 8.0),
                                          child: SvgPicture.asset(
                                            "assets/images/svg/confirm.svg",
                                            width: 24,
                                            height: 24,
                                          ),
                                        ),
                                        cancelWidget: Padding(
                                          padding: const EdgeInsets.only(right: 8.0),
                                          child: SvgPicture.asset(
                                            "assets/images/svg/cancel.svg",
                                            colorFilter: ColorFilter.mode(
                                              Colors.white,
                                              BlendMode.srcIn,
                                            ),
                                            width: 24,
                                            height: 24,
                                          ),
                                        ),
                                        onCalendarTypeChanged: (bool value) {
                                          isGregorian = value;
                                        },
                                      );
                                      if (picked != null && onChange != null) {
                                        if (onCalendarTypeChanged != null) {
                                          onCalendarTypeChanged.call(isGregorian);
                                        }
                                        onChange(picked.toIso8601String());
                                      }
                                    }
                                  }
                                : null,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Expanded(
                                  child: Text((selectedValue == null || selectedValue.isEmpty) ? _hintText : selectedValue,
                                      textAlign: isRtl ? TextAlign.right : TextAlign.left,
                                      textDirection: isRtl ? TextDirection.rtl : TextDirection.ltr,
                                      style: context.dynamicTextStyle(
                                        fontSize: 14,
                                        height: 21 / 14,
                                        fontWeight: FontWeight.w500,
                                        // fontFamily: FontUtils.getFontFamily(context),
                                        color: (selectedValue != null && selectedValue.isNotEmpty) ? const Color(0xff2E3039) : const Color(0xffB0B0B0),
                                        letterSpacing: -0.2,
                                      )
                                      // style: TextStyle(
                                      //   fontSize: 14,
                                      //   height: 21 / 14,
                                      //   fontWeight: FontWeight.w500,
                                      //   // fontFamily: FontUtils.getFontFamily(context),
                                      //   color: (selectedValue != null && selectedValue.isNotEmpty) ? const Color(0xff2E3039) : const Color(0xffB0B0B0),
                                      //   letterSpacing: -0.2,
                                      // ),
                                      ),
                                ),
                                if (hasSelectionCustomIcon && selectionCustomIcon != null)
                                  SvgPicture.asset(selectionCustomIcon, width: 24, height: 24)
                                else
                                  const Icon(Icons.keyboard_arrow_down_outlined),
                              ],
                            ),
                          )
                        : TextField(
                            enabled: isEnable,
                            scrollPadding: EdgeInsets.zero,
                            keyboardType: keyboardType,
                            controller: _controller,
                            readOnly: isReadOnly,
                            textAlignVertical: TextAlignVertical.top,
                            textAlign: isRtl ? TextAlign.right : TextAlign.left,
                            textDirection: isRtl ? TextDirection.rtl : TextDirection.ltr,
                            onChanged: onChange,
                            style: context.dynamicTextStyle(
                              fontSize: 14,
                              height: 21 / 14,
                              fontWeight: FontWeight.w500,
                              color: const Color(0xff2E3039),
                              letterSpacing: -0.2,
                            ),
                            // TextStyle(
                            //   fontSize: 14,
                            //   height: 21 / 14,
                            //   // fontFamily: FontUtils.getFontFamily(context),
                            //
                            //   fontWeight: FontWeight.w500,
                            //   color: const Color(0xff2E3039),
                            //   letterSpacing: -0.2,
                            // ),
                            decoration: InputDecoration(
                              isDense: true,
                              hintText: _hintText,
                              hintStyle: context.dynamicTextStyle(
                                fontSize: 14,
                                height: 21 / 16,
                                fontWeight: FontWeight.w500,
                                color: const Color(0xff898A8D),
                                letterSpacing: -0.2,
                              ),
                              prefixIconConstraints: const BoxConstraints(minWidth: 45),
                              prefixIcon: prefix == null
                                  ? null
                                  : Text("+" + prefix,
                                      style: context.dynamicTextStyle(
                                        fontSize: 14,
                                        height: 21 / 14,
                                        fontWeight: FontWeight.w500,
                                        color: const Color(0xff2E303A),
                                        letterSpacing: -0.2,
                                      )),
                              contentPadding: EdgeInsets.zero,
                              border: InputBorder.none,
                              focusedBorder: InputBorder.none,
                              enabledBorder: InputBorder.none,
                            ),
                          ),
                  ],
                ),
              ),
            ],
          ),
        ),
      );
    },
  );
}

Widget newInputWidget(
  String _labelText,
  String _hintText,
  TextEditingController? _controller, {
  Function(String?)? onChange,
  String? prefix,
  bool isEnable = true,
  bool hasSelection = false,
  bool hasSelectionCustomIcon = false,
  String? selectionCustomIcon,
  bool isBorderAllowed = true,
  bool isAllowLeadingIcon = false,
  bool isLeadingCountry = false,
  String? leadingIcon,
  bool removePadding = false,
  bool isAllowRadius = true,
  bool isReadOnly = false,
  TextInputType keyboardType = TextInputType.number,
  List<String>? dropdownItems,
  String? selectedValue,
  SelectionType? selectionType,
  Function(bool)? onCalendarTypeChanged,
  EdgeInsetsGeometry? padding,
  String lang = 'en',
  bool isCountryDropDown = false,
  List<Country> countryList = const [],
  FocusNode? focusNode,
  bool autoFocus = false,
  Function(Country)? onCountryChange,
  Key? key,
}) {
  return Builder(
    builder: (context) {
      // final isRtl = Directionality.of(context) == TextDirection.ltr;
      return Container(
        padding: padding,
        alignment: Alignment.center,
        // decoration: BoxDecoration(
        //   borderRadius: isAllowRadius ? BorderRadius.circular(15) : null,
        //   color: Colors.white,
        //   border: isBorderAllowed ? Border.all(color: const Color(0xffefefef), width: 1) : null,
        // ),
        decoration: RoundedRectangleBorder()
            .toSmoothCornerDecoration(color: Colors.white, borderRadius: isAllowRadius ? 15 : null, side: isBorderAllowed ? BorderSide(color: const Color(0xffefefef), width: 1) : null),
        child: Row(
          textDirection: Directionality.of(context),
          children: [
            if (isAllowLeadingIcon && leadingIcon != null)
              isCountryDropDown
                  ? _CustomCountryDropdown(
                      logo: SvgPicture.asset(
                        prefix == "966" ? "assets/images/svg/ksa.svg" : "assets/images/svg/uae.svg",
                        width: 40,
                        height: 40,
                        fit: BoxFit.cover,
                      ),
                      countryList: countryList,
                      onCountryChange: onCountryChange,
                      isRtl: Directionality.of(context) == TextDirection.rtl,
                    )
                  : Container(
                      height: 40,
                      width: 40,
                      margin: const EdgeInsets.only(right: 10),
                      padding: isLeadingCountry ? null : const EdgeInsets.all(8),
                      decoration: const BoxDecoration(
                        color: Color(0xFFEFEFF0),
                        borderRadius: BorderRadius.all(Radius.circular(10)),
                      ),
                      child: SvgPicture.asset(
                        leadingIcon,
                        width: 24,
                        height: 24,
                        fit: BoxFit.cover,
                      ),
                    ),
            Expanded(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    _labelText,
                    style: context.dynamicTextStyle(
                      fontSize: 12,
                      fontWeight: FontWeight.w500,
                      color: const Color(0xff898A8D),
                      letterSpacing: -0.2,
                      height: 18 / 12,
                    ),
                  ),
                  hasSelection
                      ? GestureDetector(
                          onTap: isEnable && !isReadOnly
                              ? () async {
                                  if (selectionType == SelectionType.dropdown) {
                                    final renderBox = context.findRenderObject() as RenderBox;
                                    final offset = renderBox.localToGlobal(Offset.zero);
                                    final selected = await showMenu<String>(
                                      context: context,
                                      position: RelativeRect.fromLTRB(
                                        offset.dx,
                                        offset.dy + renderBox.size.height,
                                        offset.dx + renderBox.size.width,
                                        0,
                                      ),
                                      items: dropdownItems
                                              ?.map(
                                                (e) => PopupMenuItem<String>(
                                                  value: e,
                                                  child: Text(e),
                                                ),
                                              )
                                              .toList() ??
                                          [],
                                      shape: RoundedRectangleBorder(
                                        borderRadius: BorderRadius.circular(12),
                                      ),
                                    );

                                    if (selected != null && onChange != null) {
                                      onChange(selected);
                                    }
                                  } else if (selectionType == SelectionType.calendar) {
                                    bool isGregorian = true;
                                    // final picked = await showDatePicker(context: context, initialDate: DateTime.now(), firstDate: DateTime(1900), lastDate: DateTime(2100));
                                    final picked = await showHijriGregBottomSheet(
                                      context,
                                      switcherIcon: SvgPicture.asset("assets/images/svg/language.svg", width: 24),
                                      // fontFamily: FontUtils.getFontFamily(context),
                                      language: lang,
                                      fontFamily: FontUtils.getFontFamilyForLanguage(context.selectedLanguage == "ar" ? true : false),
                                      initialShowGregorian: true,
                                      initialDate: DateTime.now(),
                                      okWidget: Padding(
                                        padding: const EdgeInsets.only(right: 8.0),
                                        child: SvgPicture.asset(
                                          "assets/images/svg/confirm.svg",
                                          width: 24,
                                          height: 24,
                                        ),
                                      ),
                                      cancelWidget: Padding(
                                        padding: const EdgeInsets.only(right: 8.0),
                                        child: SvgPicture.asset(
                                          "assets/images/svg/cancel.svg",
                                          colorFilter: ColorFilter.mode(
                                            Colors.white,
                                            BlendMode.srcIn,
                                          ),
                                          width: 24,
                                          height: 24,
                                        ),
                                      ),
                                      onCalendarTypeChanged: (bool value) {
                                        isGregorian = value;
                                      },
                                    );
                                    if (picked != null && onChange != null) {
                                      print(picked.toIso8601String());
                                      if (onCalendarTypeChanged != null) {
                                        print(isGregorian.toString());
                                        onCalendarTypeChanged.call(isGregorian);
                                      }
                                      onChange(picked.toIso8601String());
                                    }
                                  }
                                }
                              : null,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Expanded(
                                child: Text((selectedValue == null || selectedValue.isEmpty) ? _hintText : selectedValue,
                                    textAlign: TextAlign.left,
                                    textDirection: TextDirection.ltr,
                                    style: context.dynamicTextStyle(
                                      fontSize: 14,
                                      height: 21 / 14,
                                      fontWeight: FontWeight.w500,
                                      color: (selectedValue != null && selectedValue.isNotEmpty) ? const Color(0xff2E3039) : const Color(0xffB0B0B0),
                                      letterSpacing: -0.2,
                                    )),
                              ),
                              if (hasSelectionCustomIcon && selectionCustomIcon != null)
                                SvgPicture.asset(selectionCustomIcon, width: 24, height: 24)
                              else
                                const Icon(Icons.keyboard_arrow_down_outlined),
                            ],
                          ),
                        )
                      : TextField(
                          enabled: isEnable,
                          key: key,
                          scrollPadding: EdgeInsets.zero,
                          keyboardType: keyboardType,
                          controller: _controller,
                          readOnly: isReadOnly,
                          textAlignVertical: TextAlignVertical.top,
                          textAlign: TextAlign.left,
                          textDirection: TextDirection.ltr,
                          onChanged: onChange,
                          focusNode: focusNode,
                          autofocus: autoFocus,
                          style: context.dynamicTextStyle(
                            fontSize: 14,
                            height: 21 / 14,
                            fontWeight: FontWeight.w500,
                            color: const Color(0xff2E3039),
                            letterSpacing: -0.2,
                          ),
                          decoration: InputDecoration(
                            isDense: true,
                            hintText: _hintText,
                            hintStyle: context.dynamicTextStyle(
                              fontSize: 14,
                              height: 21 / 16,
                              fontWeight: FontWeight.w500,
                              color: const Color(0xff898A8D),
                              letterSpacing: -0.2,
                            ),
                            prefixIconConstraints: const BoxConstraints(minWidth: 45),
                            prefixIcon: prefix == null
                                ? null
                                : Text(
                                    "+" + prefix,
                                    style: context.dynamicTextStyle(
                                      fontSize: 14,
                                      height: 21 / 14,
                                      fontWeight: FontWeight.w500,
                                      color: const Color(0xff2E303A),
                                      letterSpacing: -0.2,
                                    ),
                                  ),
                            contentPadding: EdgeInsets.zero,
                            border: InputBorder.none,
                            focusedBorder: InputBorder.none,
                            enabledBorder: InputBorder.none,
                          ),
                        ),
                ],
              ),
            ),
          ],
        ),
      );
    },
  );
}

// Widget newInputWidget(String _labelText,
//     String _hintText,
//     TextEditingController? _controller, {
//       Function(String?)? onChange,
//       String? prefix,
//       bool isEnable = true,
//       bool hasSelection = false,
//       bool hasSelectionCustomIcon = false,
//       String? selectionCustomIcon,
//       bool isBorderAllowed = true,
//       bool isAllowLeadingIcon = false,
//       bool isLeadingCountry = false,
//       String? leadingIcon,
//       bool removePadding = false,
//       bool isAllowRadius = true,
//       bool isReadOnly = false,
//       TextInputType keyboardType = TextInputType.number,
//       List<String>? dropdownItems,
//       String? selectedValue,
//       SelectionType? selectionType,
//       Function(bool)? onCalendarTypeChanged,
//       EdgeInsetsGeometry? padding,
//       String lang = 'en',
//       bool isCountryDropDown = false,
//       List<Country> countryList = const [],
//       FocusNode? focusNode,
//       bool autoFocus = false,
//       Function(Country)? onCountryChange,
//       Key? key,
//     }) {
//   return Builder(
//     builder: (context) {
//       // final isRtl = Directionality.of(context) == TextDirection.ltr;
//       return Container(
//         padding: padding,
//         // padding: removePadding && isAllowLeadingIcon && prefix == null
//         //     ? const EdgeInsets.only(top: 8, bottom: 8, left: 8, right: 8)
//         //     : removePadding && !hasSelection
//         //         ? const EdgeInsets.only(top: 8, bottom: 8, left: 0, right: 0)
//         //         : removePadding && hasSelection
//         //             ? null
//         //             : const EdgeInsets.symmetric(horizontal: 16, vertical: 15),
//         alignment: Alignment.center,
//         decoration: BoxDecoration(
//           borderRadius: isAllowRadius ? BorderRadius.circular(15) : null,
//           color: Colors.white,
//           border: isBorderAllowed ? Border.all(color: const Color(0xffefefef), width: 1) : null,
//         ),
//         child: Row(
//           textDirection: Directionality.of(context),
//           children: [
//             if (isAllowLeadingIcon && leadingIcon != null)
//               isCountryDropDown
//                   ? _CustomCountryDropdown(
//                 logo: SvgPicture.asset(
//                   prefix == "966" ? "assets/images/svg/ksa.svg" : "assets/images/svg/uae.svg",
//                   width: 40,
//                   height: 40,
//                   fit: BoxFit.cover,
//                 ),
//                 countryList: countryList,
//                 onCountryChange: onCountryChange,
//                 isRtl: Directionality.of(context) == TextDirection.rtl,
//               )
//                   : Container(
//                 height: 40,
//                 width: 40,
//                 margin: const EdgeInsets.only(right: 10),
//                 padding: isLeadingCountry ? null : const EdgeInsets.all(8),
//                 decoration: const BoxDecoration(
//                   color: Color(0xFFEFEFF0),
//                   borderRadius: BorderRadius.all(Radius.circular(10)),
//                 ),
//                 child: SvgPicture.asset(
//                   leadingIcon,
//                   width: 24,
//                   height: 24,
//                   fit: BoxFit.cover,
//                 ),
//               ),
//             Expanded(
//               child: Column(
//                 mainAxisSize: MainAxisSize.min,
//                 crossAxisAlignment: CrossAxisAlignment.start,
//                 children: [
//                   Text(
//                     _labelText,
//                     style: context.dynamicTextStyle(
//                       fontSize: 12,
//                       fontWeight: FontWeight.w500,
//                       color: const Color(0xff898A8D),
//                       letterSpacing: -0.2,
//                       height: 18 / 12,
//                     ),
//                   ),
//                   hasSelection
//                       ? GestureDetector(
//                     onTap: isEnable && !isReadOnly
//                         ? () async {
//                       if (selectionType == SelectionType.dropdown) {
//                         final renderBox = context.findRenderObject() as RenderBox;
//                         final offset = renderBox.localToGlobal(Offset.zero);
//                         final selected = await showMenu<String>(
//                           context: context,
//                           position: RelativeRect.fromLTRB(
//                             offset.dx,
//                             offset.dy + renderBox.size.height,
//                             offset.dx + renderBox.size.width,
//                             0,
//                           ),
//                           items: dropdownItems
//                               ?.map(
//                                 (e) =>
//                                 PopupMenuItem<String>(
//                                   value: e,
//                                   child: Text(e),
//                                 ),
//                           )
//                               .toList() ??
//                               [],
//                           shape: RoundedRectangleBorder(
//                             borderRadius: BorderRadius.circular(12),
//                           ),
//                         );
//
//                         if (selected != null) {
//                           _handleOnChange(selected);
//                         }
//                       } else if (widget.selectionType == SelectionType.calendar) {
//                         bool isGregorian = true;
//                         final picked = await showHijriGregBottomSheet(
//                           context,
//                           switcherIcon: SvgPicture.asset("assets/images/svg/language.svg", width: 24),
//                           language: widget.lang,
//                           fontFamily: FontUtils.getFontFamilyForLanguage(context.selectedLanguage == "ar" ? true : false),
//                           initialShowGregorian: true,
//                           initialDate: DateTime.now(),
//                           okWidget: Padding(
//                             padding: const EdgeInsets.only(right: 8.0),
//                             child: SvgPicture.asset(
//                               "assets/images/svg/confirm.svg",
//                               width: 24,
//                               height: 24,
//                             ),
//                           ),
//                           cancelWidget: Padding(
//                             padding: const EdgeInsets.only(right: 8.0),
//                             child: SvgPicture.asset(
//                               "assets/images/svg/cancel.svg",
//                               colorFilter: ColorFilter.mode(
//                                 Colors.white,
//                                 BlendMode.srcIn,
//                               ),
//                               width: 24,
//                               height: 24,
//                             ),
//                           ),
//                           onCalendarTypeChanged: (bool value) {
//                             isGregorian = value;
//                           },
//                         );
//                         if (picked != null) {
//                           if (widget.onCalendarTypeChanged != null) {
//                             widget.onCalendarTypeChanged!.call(isGregorian);
//                           }
//                           _handleOnChange(picked.toIso8601String());
//                         }
//                       }
//                     }
//                         : null,
//                     child: Row(
//                       mainAxisAlignment: MainAxisAlignment.spaceBetween,
//                       children: [
//                         Expanded(
//                           child: Text((selectedValue == null || selectedValue.isEmpty) ? _hintText : selectedValue,
//                               textAlign: TextAlign.left,
//                               textDirection: TextDirection.ltr,
//                               style: context.dynamicTextStyle(
//                                 fontSize: 14,
//                                 height: 21 / 14,
//                                 fontWeight: FontWeight.w500,
//                                 color: (selectedValue != null && selectedValue.isNotEmpty) ? const Color(0xff2E3039) : const Color(0xffB0B0B0),
//                                 letterSpacing: -0.2,
//                               )),
//                         ),
//                         if (hasSelectionCustomIcon && selectionCustomIcon != null)
//                           SvgPicture.asset(selectionCustomIcon, width: 24, height: 24)
//                         else
//                           const Icon(Icons.keyboard_arrow_down_outlined),
//                       ],
//                     ),
//                   )
//                       : TextField(
//                     enabled: isEnable,
//                     key: key,
//                     scrollPadding: EdgeInsets.zero,
//                     keyboardType: keyboardType,
//                     controller: _controller,
//                     readOnly: isReadOnly,
//                     textAlignVertical: TextAlignVertical.top,
//                     textAlign: TextAlign.left,
//                     textDirection: TextDirection.ltr,
//                     onChanged: onChange,
//                     focusNode: focusNode,
//                     autofocus: autoFocus,
//                     style: context.dynamicTextStyle(
//                       fontSize: 14,
//                       height: 21 / 14,
//                       fontWeight: FontWeight.w500,
//                       color: const Color(0xff2E3039),
//                       letterSpacing: -0.2,
//                     ),
//                     decoration: InputDecoration(
//                       isDense: true,
//                       hintText: _hintText,
//                       hintStyle: context.dynamicTextStyle(
//                         fontSize: 14,
//                         height: 21 / 16,
//                         fontWeight: FontWeight.w500,
//                         color: const Color(0xff898A8D),
//                         letterSpacing: -0.2,
//                       ),
//                       prefixIconConstraints: const BoxConstraints(minWidth: 45),
//                       prefixIcon: prefix == null
//                           ? null
//                           : Text(
//                         "+" + prefix,
//                         style: context.dynamicTextStyle(
//                           fontSize: 14,
//                           height: 21 / 14,
//                           fontWeight: FontWeight.w500,
//                           color: const Color(0xff2E303A),
//                           letterSpacing: -0.2,
//                         ),
//                       ),
//                       contentPadding: EdgeInsets.zero,
//                       border: InputBorder.none,
//                       focusedBorder: InputBorder.none,
//                       enabledBorder: InputBorder.none,
//                     ),
//                   ),
//                 ],
//               ),
//             ),
//           ],
//         ),
//       );
//     },
//   );
// }

extension BorderedContainer on Widget {
  Widget get withBorderedContainer => Container(
        padding: EdgeInsets.only(left: 16, right: 16, bottom: 15, top: 15),
        alignment: Alignment.center,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15),
          color: Colors.white,
          border: Border.all(
            color: Color(0xffefefef),
            width: 1,
          ),
        ),
        child: this,
      );
}

class _CustomCountryDropdown extends StatefulWidget {
  final SvgPicture logo;
  final List<Country> countryList;
  final Function(Country)? onCountryChange;
  final bool isRtl;

  const _CustomCountryDropdown({
    Key? key,
    required this.logo,
    required this.countryList,
    this.onCountryChange,
    required this.isRtl,
  }) : super(key: key);

  @override
  __CustomCountryDropdownState createState() => __CustomCountryDropdownState();
}

class __CustomCountryDropdownState extends State<_CustomCountryDropdown> {
  Country? selectedCountry;
  late OverlayEntry _overlayEntry;
  bool _isDropdownOpen = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (_isDropdownOpen) {
          _closeDropdown();
        } else {
          _openDropdown();
        }
      },
      child: Container(
        height: 40,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
        ),
        child: Row(
          children: [
            widget.logo,
            SizedBox(width: 8),
            SvgPicture.asset(
              _isDropdownOpen ? "assets/images/svg/dropdow-icon.svg" : "assets/images/svg/dropdow-icon.svg",
              width: 24,
              height: 24,
            ),
          ],
        ),
      ),
    );
  }

  void _openDropdown() {
    RenderBox renderBox = context.findRenderObject() as RenderBox;
    Offset offset = renderBox.localToGlobal(Offset.zero);

    _overlayEntry = OverlayEntry(
      builder: (context) => Stack(
        children: [
          // Dismiss dropdown when tapping outside
          Positioned.fill(
            child: GestureDetector(
              onTap: _closeDropdown,
              behavior: HitTestBehavior.translucent,
              child: Container(),
            ),
          ),
          Positioned(
            top: offset.dy + renderBox.size.height,
            left: widget.isRtl ? offset.dx + 15 : offset.dx - 15,
            width: renderBox.size.width,
            child: Material(
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12),
                  boxShadow: [
                    BoxShadow(
                      color: Color(0xFFF8F8FA),
                      blurRadius: 8,
                      offset: Offset(0, 2),
                    ),
                  ],
                ),
                child: Column(
                  children: widget.countryList
                      .map(
                        (country) => GestureDetector(
                          onTap: () {
                            setState(() {
                              selectedCountry = country;
                            });
                            widget.onCountryChange?.call(country);
                            _closeDropdown();
                          },
                          child: Container(
                            padding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
                            child: Row(
                              children: [
                                SvgPicture.asset(
                                  country.iconPath,
                                  width: 38,
                                  height: 38,
                                  fit: BoxFit.cover,
                                ),
                              ],
                            ),
                          ),
                        ),
                      )
                      .toList(),
                ),
              ),
            ),
          ),
        ],
      ),
    );

    Overlay.of(context)?.insert(_overlayEntry);
    setState(() {
      _isDropdownOpen = true;
    });
  }

  void _closeDropdown() {
    _overlayEntry.remove();
    setState(() {
      _isDropdownOpen = false;
    });
  }
}

class NewInputField extends StatefulWidget {
  final String labelText;
  final String hintText;
  final TextEditingController? controller;
  final Function(String?)? onChange;
  final String? prefix;
  final bool isEnable;
  final bool hasSelection;
  final bool hasSelectionCustomIcon;
  final String? selectionCustomIcon;
  final bool isBorderAllowed;
  final bool isAllowLeadingIcon;
  final bool isLeadingCountry;
  final String? leadingIcon;
  final bool removePadding;
  final bool isAllowRadius;
  final bool isReadOnly;
  final TextInputType keyboardType;
  final List<String>? dropdownItems;
  final String? selectedValue;
  final SelectionType? selectionType;
  final Function(bool)? onCalendarTypeChanged;
  final EdgeInsetsGeometry? padding;
  final String lang;
  final bool isCountryDropDown;
  final List<Country> countryList;
  final bool autoFocus;
  final Function(Country)? onCountryChange;
  final bool keepFocus; // New parameter to maintain focus
  final bool refocusOnChange; // New parameter to refocus when onChange is triggered

  const NewInputField({
    required this.labelText,
    required this.hintText,
    this.controller,
    this.onChange,
    this.prefix,
    this.isEnable = true,
    this.hasSelection = false,
    this.hasSelectionCustomIcon = false,
    this.selectionCustomIcon,
    this.isBorderAllowed = true,
    this.isAllowLeadingIcon = false,
    this.isLeadingCountry = false,
    this.leadingIcon,
    this.removePadding = false,
    this.isAllowRadius = true,
    this.isReadOnly = false,
    this.keyboardType = TextInputType.number,
    this.dropdownItems,
    this.selectedValue,
    this.selectionType,
    this.onCalendarTypeChanged,
    this.padding,
    this.lang = 'en',
    this.isCountryDropDown = false,
    this.countryList = const [],
    this.autoFocus = false,
    this.onCountryChange,
    this.keepFocus = false,
    this.refocusOnChange = false,
  });

  @override
  State<NewInputField> createState() => _NewInputFieldState();
}

class _NewInputFieldState extends State<NewInputField> {
  late FocusNode _internalFocusNode;
  bool _isInitialFocusSet = false;
  bool _shouldMaintainFocus = false;

  @override
  void initState() {
    super.initState();
    _internalFocusNode = FocusNode();
    _shouldMaintainFocus = widget.keepFocus;

    // Add listener to handle focus loss if keepFocus is enabled
    if (widget.keepFocus) {
      _internalFocusNode.addListener(_handleFocusChange);
    }
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (widget.autoFocus && !_isInitialFocusSet) {
      _isInitialFocusSet = true;
      _requestFocus();
    }
  }

  @override
  void didUpdateWidget(NewInputField oldWidget) {
    super.didUpdateWidget(oldWidget);

    // Update focus management settings if they changed
    if (oldWidget.keepFocus != widget.keepFocus) {
      _shouldMaintainFocus = widget.keepFocus;
      if (widget.keepFocus) {
        _internalFocusNode.addListener(_handleFocusChange);
      } else {
        _internalFocusNode.removeListener(_handleFocusChange);
      }
    }
  }

  void _handleFocusChange() {
    // If keepFocus is enabled and focus is lost, regain it
    if (_shouldMaintainFocus && !_internalFocusNode.hasFocus && mounted) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        if (mounted && _internalFocusNode.canRequestFocus && !_internalFocusNode.hasFocus) {
          _internalFocusNode.requestFocus();
        }
      });
    }
  }

  void _requestFocus() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (mounted && _internalFocusNode.canRequestFocus) {
        _internalFocusNode.requestFocus();
      }
    });
  }

  void _handleOnChange(String? value) {
    // Call the original onChange callback
    if (widget.onChange != null) {
      widget.onChange!(value);
    }

    // If refocusOnChange is enabled, refocus the field
    if (widget.refocusOnChange && mounted) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        if (mounted && _internalFocusNode.canRequestFocus) {
          _internalFocusNode.requestFocus();
        }
      });
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: widget.padding,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        borderRadius: widget.isAllowRadius ? BorderRadius.circular(15) : null,
        color: Colors.white,
        border: widget.isBorderAllowed ? Border.all(color: const Color(0xffefefef), width: 1) : null,
      ),
      child: Row(
        textDirection: Directionality.of(context),
        children: [
          if (widget.isAllowLeadingIcon && widget.leadingIcon != null)
            widget.isCountryDropDown
                ? _CustomCountryDropdown(
                    logo: SvgPicture.asset(
                      widget.prefix == "966" ? "assets/images/svg/ksa.svg" : "assets/images/svg/uae.svg",
                      width: 40,
                      height: 40,
                      fit: BoxFit.cover,
                    ),
                    countryList: widget.countryList,
                    onCountryChange: widget.onCountryChange,
                    isRtl: Directionality.of(context) == TextDirection.rtl,
                  )
                : Container(
                    height: 40,
                    width: 40,
                    margin: const EdgeInsets.only(right: 10),
                    padding: widget.isLeadingCountry ? null : const EdgeInsets.all(8),
                    decoration: const BoxDecoration(
                      color: Color(0xFFEFEFF0),
                      borderRadius: BorderRadius.all(Radius.circular(10)),
                    ),
                    child: SvgPicture.asset(
                      widget.leadingIcon!,
                      width: 24,
                      height: 24,
                      fit: BoxFit.cover,
                    ),
                  ),
          Expanded(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  widget.labelText,
                  style: context.dynamicTextStyle(
                    fontSize: 12,
                    fontWeight: FontWeight.w500,
                    color: const Color(0xff898A8D),
                    letterSpacing: -0.2,
                    height: 18 / 12,
                  ),
                ),
                widget.hasSelection
                    ? GestureDetector(
                        onTap: widget.isEnable && !widget.isReadOnly
                            ? () async {
                                if (widget.selectionType == SelectionType.dropdown) {
                                  final renderBox = context.findRenderObject() as RenderBox;
                                  final offset = renderBox.localToGlobal(Offset.zero);
                                  final selected = await showMenu<String>(
                                    context: context,
                                    position: RelativeRect.fromLTRB(
                                      offset.dx,
                                      offset.dy + renderBox.size.height,
                                      offset.dx + renderBox.size.width,
                                      0,
                                    ),
                                    items: widget.dropdownItems
                                            ?.map(
                                              (e) => PopupMenuItem<String>(
                                                value: e,
                                                child: Text(e),
                                              ),
                                            )
                                            .toList() ??
                                        [],
                                    shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(12),
                                    ),
                                  );

                                  if (selected != null) {
                                    _handleOnChange(selected);
                                  }
                                } else if (widget.selectionType == SelectionType.calendar) {
                                  bool isGregorian = true;
                                  final picked = await showHijriGregBottomSheet(
                                    context,
                                    switcherIcon: SvgPicture.asset("assets/images/svg/language.svg", width: 24),
                                    language: widget.lang,
                                    fontFamily: FontUtils.getFontFamilyForLanguage(context.selectedLanguage == "ar" ? true : false),
                                    initialShowGregorian: true,
                                    initialDate: DateTime.now(),
                                    okWidget: Padding(
                                      padding: const EdgeInsets.only(right: 8.0),
                                      child: SvgPicture.asset(
                                        "assets/images/svg/confirm.svg",
                                        width: 24,
                                        height: 24,
                                      ),
                                    ),
                                    cancelWidget: Padding(
                                      padding: const EdgeInsets.only(right: 8.0),
                                      child: SvgPicture.asset(
                                        "assets/images/svg/cancel.svg",
                                        colorFilter: ColorFilter.mode(
                                          Colors.white,
                                          BlendMode.srcIn,
                                        ),
                                        width: 24,
                                        height: 24,
                                      ),
                                    ),
                                    onCalendarTypeChanged: (bool value) {
                                      isGregorian = value;
                                    },
                                  );
                                  if (picked != null) {
                                    if (widget.onCalendarTypeChanged != null) {
                                      widget.onCalendarTypeChanged!.call(isGregorian);
                                    }
                                    _handleOnChange(picked.toIso8601String());
                                  }
                                }
                              }
                            : null,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Expanded(
                              child: Text((widget.selectedValue == null || widget.selectedValue!.isEmpty) ? widget.hintText : widget.selectedValue!,
                                  textAlign: TextAlign.left,
                                  textDirection: TextDirection.ltr,
                                  style: context.dynamicTextStyle(
                                    fontSize: 14,
                                    height: 21 / 14,
                                    fontWeight: FontWeight.w500,
                                    color: (widget.selectedValue != null && widget.selectedValue!.isNotEmpty) ? const Color(0xff2E3039) : const Color(0xffB0B0B0),
                                    letterSpacing: -0.2,
                                  )),
                            ),
                            if (widget.hasSelectionCustomIcon && widget.selectionCustomIcon != null)
                              SvgPicture.asset(widget.selectionCustomIcon!, width: 24, height: 24)
                            else
                              const Icon(Icons.keyboard_arrow_down_outlined),
                          ],
                        ),
                      )
                    : TextField(
                        enabled: widget.isEnable,
                        scrollPadding: EdgeInsets.zero,
                        keyboardType: widget.keyboardType,
                        controller: widget.controller,
                        readOnly: widget.isReadOnly,
                        textAlignVertical: TextAlignVertical.top,
                        textAlign: TextAlign.left,
                        textDirection: TextDirection.ltr,
                        onChanged: _handleOnChange,
                        focusNode: _internalFocusNode,
                        autofocus: widget.autoFocus,
                        style: context.dynamicTextStyle(
                          fontSize: 14,
                          height: 21 / 14,
                          fontWeight: FontWeight.w500,
                          color: const Color(0xff2E3039),
                          letterSpacing: -0.2,
                        ),
                        decoration: InputDecoration(
                          isDense: true,
                          hintText: widget.hintText,
                          hintStyle: context.dynamicTextStyle(
                            fontSize: 14,
                            height: 21 / 16,
                            fontWeight: FontWeight.w500,
                            color: const Color(0xff898A8D),
                            letterSpacing: -0.2,
                          ),
                          prefixIconConstraints: const BoxConstraints(minWidth: 45),
                          prefixIcon: widget.prefix == null
                              ? null
                              : Text(
                                  "+" + widget.prefix!,
                                  style: context.dynamicTextStyle(
                                    fontSize: 14,
                                    height: 21 / 14,
                                    fontWeight: FontWeight.w500,
                                    color: const Color(0xff2E303A),
                                    letterSpacing: -0.2,
                                  ),
                                ),
                          contentPadding: EdgeInsets.zero,
                          border: InputBorder.none,
                          focusedBorder: InputBorder.none,
                          enabledBorder: InputBorder.none,
                        ),
                      ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
