import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:hmg_patient_app_new/core/app_assets.dart';
import 'package:hmg_patient_app_new/core/app_state.dart';
import 'package:hmg_patient_app_new/core/common_models/nationality_country_model.dart';
import 'package:hmg_patient_app_new/core/dependencies.dart';
import 'package:hmg_patient_app_new/core/enums.dart';
import 'package:hmg_patient_app_new/core/utils/size_utils.dart';
import 'package:hmg_patient_app_new/core/utils/validation_utils.dart';
import 'package:hmg_patient_app_new/extensions/string_extensions.dart';
import 'package:hmg_patient_app_new/extensions/widget_extensions.dart';
import 'package:hmg_patient_app_new/features/authentication/authentication_view_model.dart';
import 'package:hmg_patient_app_new/generated/locale_keys.g.dart';
import 'package:hmg_patient_app_new/theme/colors.dart';
import 'package:hmg_patient_app_new/widgets/appbar/app_bar_widget.dart';
import 'package:hmg_patient_app_new/widgets/bottomsheet/generic_bottom_sheet.dart';
import 'package:hmg_patient_app_new/widgets/buttons/custom_button.dart';
import 'package:hmg_patient_app_new/widgets/dropdown/dropdown_widget.dart';
import 'package:hmg_patient_app_new/widgets/input_widget.dart';
import 'package:provider/provider.dart';

class RegisterNewStep2 extends StatefulWidget {
  RegisterNewStep2({Key? key}) : super(key: key);

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

class _RegisterNew extends State<RegisterNewStep2> {
  AuthenticationViewModel? authVM;

  @override
  void initState() {
    super.initState();
    authVM = context.read<AuthenticationViewModel>();
  }

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

  @override
  Widget build(BuildContext context) {
    AppState appState = getIt.get<AppState>();

    // TODO: to be checked with yakeen data
    var name = authVM!.isUserFromUAE() ? "" : appState.getLanguageCode() == "en"
        ? ("${appState.getNHICUserData.firstNameEn!.toUpperCase()} ${appState.getNHICUserData.lastNameEn!.toUpperCase()}")
        : ("${appState.getNHICUserData.firstNameAr!.toUpperCase()} ${appState.getNHICUserData.lastNameAr!.toUpperCase()}");
    return Scaffold(
      backgroundColor: AppColors.bgScaffoldColor,
      appBar: CustomAppBar(
        onBackPressed: () {
          Navigator.of(context).pop();
          // authVM!.clearDefaultInputValues();
          authVM!.clearEmailInput();
        },
        onLanguageChanged: (lang) {},
        hideLogoAndLang: true,
      ),
      body: SingleChildScrollView(
        reverse: false,
        padding: EdgeInsets.only(left: 24.h, right: 24.h, top: 0.h),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            LocaleKeys.personalDetailsVerification.tr().toText26(color: AppColors.textColor, weight: FontWeight.w600, letterSpacing: -2),
            SizedBox(height: 24.h),
            Directionality(
              textDirection: Directionality.of(context),
              child: Container(
                decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(24)),
                padding: EdgeInsets.only(left: 16.h, right: 16.h),
                child: Column(
                  children: [
                    TextInputWidget(
                      labelText: authVM!.isUserFromUAE() ? LocaleKeys.fullName.tr() : LocaleKeys.name.tr(),
                      hintText: authVM!.isUserFromUAE() ? LocaleKeys.enterNameHere.tr() : (name),
                      controller: authVM!.isUserFromUAE() ? authVM!.nameController : null,
                      isEnable: true,
                      prefix: null,
                      isAllowRadius: false,
                      isBorderAllowed: false,
                      keyboardType: TextInputType.text,
                      isAllowLeadingIcon: true,
                      isReadOnly: authVM!.isUserFromUAE() ? false : true,
                      leadingIcon: AppAssets.user_circle,
                      labelColor: AppColors.textColor,
                    ).paddingSymmetrical(0.h, 16.h),
                    Divider(height: 1, color: AppColors.greyColor),
                    TextInputWidget(
                            labelText: LocaleKeys.nationalIdNumber.tr(),
                            hintText: authVM!.isUserFromUAE() ? appState.getUserRegistrationPayload.patientIdentificationId.toString() : (appState.getNHICUserData.idNumber ?? ""),
                            controller: null,
                            isEnable: true,
                            prefix: null,
                            isAllowRadius: false,
                            isBorderAllowed: false,
                            isAllowLeadingIcon: true,
                            isReadOnly: true,
                            labelColor: AppColors.textColor,
                            leadingIcon: AppAssets.student_card)
                        .paddingSymmetrical(0.h, 16.h),
                    Divider(height: 1, color: AppColors.greyColor),
                    authVM!.isUserFromUAE()
                        ? Selector<AuthenticationViewModel, GenderTypeEnum?>(
                            selector: (_, authViewModel) => authViewModel.genderType,
                            shouldRebuild: (previous, next) => previous != next,
                            builder: (context, genderType, child) {
                              final authVM = context.read<AuthenticationViewModel>();
                              return DropdownWidget(
                                labelText: LocaleKeys.gender.tr(),
                                hintText: LocaleKeys.malE.tr(),
                                isEnable: true,
                                dropdownItems: GenderTypeEnum.values.map((e) => appState.isArabic() ? e.typeAr : e.type).toList(),
                                selectedValue: genderType != null ? (appState.isArabic() ? genderType.typeAr : genderType.type) : "",
                                onChange: authVM.onGenderChange,
                                isBorderAllowed: false,
                                hasSelectionCustomIcon: true,
                                isAllowRadius: false,
                                labelColor: AppColors.textColor,
                                padding: const EdgeInsets.only(top: 8, bottom: 8, left: 0, right: 0),
                                selectionCustomIcon: AppAssets.arrow_down,
                                leadingIcon: AppAssets.user_full,
                              ).withVerticalPadding(8);
                            })
                        : TextInputWidget(
                                labelText: LocaleKeys.gender.tr(),
                                hintText: (appState.getNHICUserData.gender ?? ""),
                                controller: null,
                                isEnable: true,
                                prefix: null,
                                isAllowRadius: false,
                                isBorderAllowed: false,
                                isAllowLeadingIcon: true,
                                isReadOnly: authVM!.isUserFromUAE() ? false : true,
                                leadingIcon: AppAssets.user_full,
                                labelColor: AppColors.textColor,
                                onChange: (value) {})
                            .paddingSymmetrical(0.h, 16.h),
                    Divider(height: 1, color: AppColors.greyColor),
                    authVM!.isUserFromUAE()
                        ? Selector<AuthenticationViewModel, MaritalStatusTypeEnum?>(
                            selector: (_, authViewModel) => authViewModel.maritalStatus,
                            shouldRebuild: (previous, next) => previous != next,
                            builder: (context, maritalStatus, child) {
                              final authVM = context.read<AuthenticationViewModel>(); // For onChange
                              return DropdownWidget(
                                labelText: LocaleKeys.maritalStatus.tr(),
                                hintText: LocaleKeys.married.tr(),
                                isEnable: true,
                                dropdownItems: MaritalStatusTypeEnum.values.map((e) => appState.isArabic() ? e.typeAr : e.type).toList(),
                                selectedValue: maritalStatus != null ? (appState.isArabic() ? maritalStatus.typeAr : maritalStatus.type) : "",
                                onChange: authVM.onMaritalStatusChange,
                                isBorderAllowed: false,
                                hasSelectionCustomIcon: true,
                                isAllowRadius: false,
                                labelColor: AppColors.textColor,
                                padding: const EdgeInsets.only(top: 8, bottom: 8, left: 0, right: 0),
                                selectionCustomIcon: AppAssets.arrow_down,
                                leadingIcon: AppAssets.smart_phone,
                              ).withVerticalPadding(8);
                            },
                          )
                        : TextInputWidget(
                                labelText: LocaleKeys.maritalStatus.tr(),
                                hintText: appState.isArabic()
                                    ? (MaritalStatusTypeExtension.fromValue(appState.getNHICUserData.maritalStatusCode)!.typeAr)
                                    : (MaritalStatusTypeExtension.fromValue(appState.getNHICUserData.maritalStatusCode)!.type),
                                isEnable: true,
                                prefix: null,
                                isAllowRadius: false,
                                isBorderAllowed: false,
                                isAllowLeadingIcon: true,
                                isReadOnly: true,
                                labelColor: AppColors.textColor,
                                leadingIcon: AppAssets.smart_phone,
                                onChange: (value) {})
                            .paddingSymmetrical(0.h, 16.h),
                    Divider(height: 1, color: AppColors.greyColor),
                    authVM!.isUserFromUAE()
                        ? Selector<AuthenticationViewModel, ({List<NationalityCountries>? countriesList, NationalityCountries? selectedCountry, bool isArabic})>(
                            selector: (context, authViewModel) {
                              final appState = getIt.get<AppState>();
                              return (
                                countriesList: authViewModel.countriesList,
                                selectedCountry: authViewModel.pickedCountryByUAEUser,
                                isArabic: appState.isArabic(),
                              );
                            },
                            shouldRebuild: (previous, next) => previous.countriesList != next.countriesList || previous.selectedCountry != next.selectedCountry || previous.isArabic != next.isArabic,
                            builder: (context, data, child) {
                              final authVM = context.read<AuthenticationViewModel>();
                              return DropdownWidget(
                                labelText: LocaleKeys.country.tr(),
                                hintText: LocaleKeys.uae.tr(),
                                isEnable: true,
                                dropdownItems: (data.countriesList ?? []).map((e) => data.isArabic ? e.nameN ?? "" : e.name ?? "").toList(),
                                selectedValue: data.selectedCountry != null
                                    ? data.isArabic
                                        ? data.selectedCountry!.nameN ?? ""
                                        : data.selectedCountry!.name ?? ""
                                    : "",
                                onChange: authVM.onUAEUserCountrySelection,
                                isBorderAllowed: false,
                                hasSelectionCustomIcon: true,
                                labelColor: AppColors.textColor,
                                isAllowRadius: false,
                                padding: const EdgeInsets.only(top: 8, bottom: 8, left: 0, right: 0),
                                selectionCustomIcon: AppAssets.arrow_down,
                                leadingIcon: AppAssets.globe,
                              ).withVerticalPadding(8);
                            },
                          )
                        : TextInputWidget(
                                labelText: LocaleKeys.nationality.tr(),
                                hintText: appState.isArabic()
                                    ? (authVM!.countriesList!.firstWhere((e) => e.id == (appState.getNHICUserData.nationalityCode ?? ""), orElse: () => NationalityCountries()).nameN ?? "")
                                    : (authVM!.countriesList!.firstWhere((e) => e.id == (appState.getNHICUserData.nationalityCode ?? ""), orElse: () => NationalityCountries()).name ?? ""),
                                isEnable: true,
                                prefix: null,
                                isAllowRadius: false,
                                isBorderAllowed: false,
                                isAllowLeadingIcon: true,
                                isReadOnly: true,
                                labelColor: AppColors.textColor,
                                leadingIcon: AppAssets.globe,
                                onChange: (value) {})
                            .paddingSymmetrical(0.h, 16.h),
                    Divider(
                      height: 1,
                      color: AppColors.greyColor,
                    ),
                    TextInputWidget(
                            labelText: LocaleKeys.mobileNumber.tr(),
                            hintText: (appState.getUserRegistrationPayload.patientMobileNumber.toString() ?? ""),
                            controller: null,
                            isEnable: false,
                            prefix: null,
                            isAllowRadius: false,
                            isBorderAllowed: false,
                            isAllowLeadingIcon: true,
                            labelColor: AppColors.textColor,
                            isReadOnly: true,
                            leadingIcon: AppAssets.call)
                        .paddingSymmetrical(0.h, 16.h),
                    Divider(
                      height: 1,
                      color: AppColors.greyColor,
                    ),
                    TextInputWidget(
                      labelText: LocaleKeys.dob.tr(),
                      hintText: authVM!.isUserFromUAE() ? appState.getUserRegistrationPayload.dob! : appState.getNHICUserData.dateOfBirth ?? "",
                      controller: authVM!.isUserFromUAE() ? authVM!.dobController : null,
                      isEnable: false,
                      prefix: null,
                      isBorderAllowed: false,
                      isAllowLeadingIcon: true,
                      isReadOnly: true,
                      labelColor: AppColors.textColor,
                      leadingIcon: AppAssets.birthday_cake,
                      selectionType: null,
                    ).paddingSymmetrical(0.h, 16.h),
                  ],
                ),
              ),
            ),
            SizedBox(height: 50.h),
            Row(
              children: [
                Expanded(
                  child: CustomButton(
                    text: LocaleKeys.cancel.tr(),
                    icon: AppAssets.cancel,
                    onPressed: () {
                      Navigator.of(context).pop();
                      // authVM!.clearDefaultInputValues();
                    },
                    backgroundColor: AppColors.secondaryLightRedColor,
                    borderColor: AppColors.secondaryLightRedColor,
                    textColor: AppColors.primaryRedColor,
                    iconColor: AppColors.primaryRedColor,
                  ),
                ),
                SizedBox(
                  width: 16,
                ),
                Expanded(
                  child: CustomButton(
                    backgroundColor: AppColors.primaryRedColor,
                    borderColor: AppColors.primaryRedColor,
                    textColor: AppColors.whiteColor,
                    text: LocaleKeys.confirm.tr(),
                    icon: AppAssets.confirm,
                    iconColor: AppColors.whiteColor,
                    onPressed: () {
                      if (appState.getUserRegistrationPayload.zipCode != CountryEnum.saudiArabia.countryCode) {
                        if (ValidationUtils.validateUaeRegistration(
                            name: authVM!.nameController.text,
                            gender: authVM!.genderType,
                            country: authVM!.pickedCountryByUAEUser,
                            maritalStatus: authVM!.maritalStatus,
                            onOkPress: () {
                              Navigator.of(context).pop();
                            })) {
                          showModel(context: context);
                        }
                      } else {
                        showModel(context: context);
                      }
                    },
                  ),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }

  void showModel({required BuildContext context}) {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      isDismissible: false,
      backgroundColor: Colors.transparent,
      builder: (bottomSheetContext) => Padding(
        padding: EdgeInsets.only(bottom: MediaQuery.of(bottomSheetContext).viewInsets.bottom),
        child: SingleChildScrollView(
          child: GenericBottomSheet(
            textController: authVM!.emailController,
            isForEmail: true,
            buttons: [
              Padding(
                padding: const EdgeInsets.only(bottom: 10),
                child: CustomButton(
                    text: LocaleKeys.submit.tr(),
                    onPressed: () {
                      if (ValidationUtils.isValidateEmail(
                          email: authVM!.emailController.text,
                          onOkPress: () {
                            Navigator.of(context).pop();
                          })) {
                        authVM!.onRegistrationComplete();
                      }
                    },
                    backgroundColor: AppColors.bgGreenColor,
                    borderColor: AppColors.bgGreenColor,
                    textColor: AppColors.whiteColor),
              ),
            ],
          ),
        ),
      ),
    );
  }
}