import 'dart:async';
import 'package:mc_common_app/models/user_models/country.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/utils/utils.dart';
import 'package:mc_common_app/extensions/int_extensions.dart';
import 'package:mc_common_app/extensions/string_extensions.dart';
import 'package:mc_common_app/generated/locale_keys.g.dart';
import 'package:mc_common_app/view_models/user_view_model.dart';
import 'package:mc_common_app/widgets/common_widgets/app_bar.dart';
import 'package:mc_common_app/widgets/dropdown/dropdow_field.dart';
import 'package:mc_common_app/widgets/button/show_fill_button.dart';
import 'package:mc_common_app/widgets/tab/login_email_tab.dart';
import 'package:mc_common_app/widgets/txt_field.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

  @override
  State<ForgetPasswordPage> createState() => _ForgetPasswordPageState();
}

class _ForgetPasswordPageState extends State<ForgetPasswordPage> {
  int otpType = 1;

  String userName = "";
  ClassType type = ClassType.EMAIL;
  Country? _country;
  String countryCode = "";
  DropValue? tempCountry;

  late UserVM userVM;

  @override
  void initState() {
    super.initState();
    scheduleMicrotask(() {
      userVM = Provider.of(context, listen: false);
      getCountryList();
    });
  }

  getCountryList() async {
    _country = await userVM.getAllCountries();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(isRemoveBackButton: true, title: LocaleKeys.changePassword.tr()),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        padding: const EdgeInsets.all(20),
        child: SingleChildScrollView(
          child: SizedBox(
            height: MediaQuery.of(context).size.height,
            child: Column(
              children: [
                12.height,
                LocaleKeys.forgetPassword.tr().toText(
                      fontSize: 20,
                      letterSpacing: -1.44,
                    ),
                20.height,
                LocaleKeys.retrievePassword.tr().toText(
                      color: MyColors.lightTextColor,
                      textAlign: TextAlign.center,
                      fontSize: 14,
                      height: 23 / 24,
                      letterSpacing: -0.48,
                    ),
                30.height,
                LoginEmailTab(
                  onSelection: (ClassType type) {
                    setState(() {
                      this.type = type;
                    });
                  },
                ),
                12.height,
                type == ClassType.NUMBER
                    ? Column(
                        children: [
                          getCountry(),
                          6.height,
                          TxtField(
                            hint: "5********",
                            value: userName,
                            onChanged: (v) {
                              userName = v;
                            },
                          )
                        ],
                      )
                    : TxtField(
                        hint: LocaleKeys.emailAddress.tr(),
                        value: userName,
                        onChanged: (v) {
                          userName = v;
                        },
                      ),
                20.height,
                (type == ClassType.NUMBER ? LocaleKeys.retriveOnPhone.tr() : LocaleKeys.retriveOnEmail.tr()).toText(
                  color: MyColors.lightTextColor,
                  textAlign: TextAlign.center,
                  fontSize: 14,
                  height: 23 / 24,
                  letterSpacing: -0.48,
                ),
                30.height,
                ShowFillButton(
                  title: LocaleKeys.send.tr(),
                  maxWidth: double.infinity,
                  onPressed: () {
                    if (userName.isNum() && type == ClassType.NUMBER) {
                      userVM.forgetPasswordPhoneOTP(context, countryCode: countryCode, userName: userName, otpType: otpType);
                    } else if (!userName.isNum() && type == ClassType.EMAIL) {
                      userVM.forgetPasswordEmailOTP(context, countryCode: countryCode, userName: userName, otpType: otpType);
                    }
                  },
                ),
                Utils.mFlex(10),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget getCountry() {
    if (_country != null) {
      List<DropValue> dropList = [];
      _country!.data?.forEach(
        (element) {
          dropList.add(DropValue(element.id ?? 0, "${element.countryName ?? ""} ${element.countryCode ?? ""}", element.countryCode ?? ""));
        },
      );
      return Padding(
        padding: const EdgeInsets.all(2.0),
        child: DropdownField(
          dropdownValue: tempCountry,
          (DropValue value) {
            countryCode = value.subValue;
            tempCountry = value;
            setState(() {});
          },
          list: dropList,
          hint: LocaleKeys.selectCountryCode.tr(),
        ),
      );
    } else {
      return const Center(
        child: CircularProgressIndicator(),
      );
    }
  }
}
