import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/flavors.dart';
import 'package:star_lock/mine/minePersonInfo/minePersonInfoEmail/mineBindPhoneOrEmail_logic.dart';
import 'package:star_lock/mine/minePersonInfo/minePersonInfoEmail/mineBindPhoneOrEmail_state.dart';

import '../../../appRouters.dart';
import '../../../app_settings/app_colors.dart';
import '../../../tools/commonItem.dart';
import '../../../tools/submitBtn.dart';
import '../../../tools/tf_loginInput.dart';
import '../../../tools/titleAppBar.dart';

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

  @override
  State<MineBindPhoneOrEmailPage> createState() =>
      _MineBindPhoneOrEmailPageState();
}

class _MineBindPhoneOrEmailPageState extends State<MineBindPhoneOrEmailPage> {
  final MineBindPhoneOrEmailLogic logic = Get.put(MineBindPhoneOrEmailLogic());
  final MineBindPhoneOrEmailState state = Get.find<MineBindPhoneOrEmailLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: AppColors.mainBackgroundColor,
        appBar: F.sw(
          skyCall: () => TitleAppBar(
            barTitle: state.channel.value == '1'
                ? '手机号'.tr
                : '邮箱'.tr,
            haveBack: true,
            backgroundColor: AppColors.mainColor,
          ),
          xhjCall: () => TitleAppBar(
            barTitle: state.channel.value == '1'
                ? '手机号'.tr
                : '邮箱'.tr,
            haveBack: true,
            backgroundColor: Colors.white,
            iconColor: AppColors.blackColor,
            titleColor: AppColors.blackColor,
          ),
        ),
        body: Container(
          color: Colors.white,
          padding: EdgeInsets.only(top: 10.h, left: 30.w, right: 30.w),
          child: Column(
            children: <Widget>[
              Container(
                  width: 1.sw,
                  padding: EdgeInsets.only(top: 5.h, bottom: 5.h),
                  child: Text(
                    state.channel.value == '1'
                        ? '找回密码和登录新设备时，可通过绑定的手机验证'.tr
                        : '找回密码和登录新设备时，可通过绑定的邮箱验证'.tr,
                    style: TextStyle(fontSize: 20.sp),
                  )),
              CommonItem(
                leftTitel: '国家/地区'.tr,
                rightTitle: '',
                isHaveLine: true,
                isPadding: false,
                isHaveRightWidget: true,
                isHaveDirection: true,
                rightWidget: Text(
                  '${state.countryName.value} +${state.countryCode.value}',
                  textAlign: TextAlign.end,
                  style: TextStyle(
                      fontSize: 22.sp, color: AppColors.darkGrayTextColor),
                ),
                action: () async {
                  var result =
                      await Get.toNamed(Routers.selectCountryRegionPage);
                  if (result != null) {
                    result as Map<String, dynamic>;
                    state.countryCode.value = result['code'];
                    state.countryName.value = result['countryName'];
                  }
                },
              ),
              LoginInput(
                  controller: state.accountController,
                  isPwd: false,
                  onchangeAction: (textStr) {
                    logic.checkNext(state.accountController);
                  },
                  leftWidget: const SizedBox(),
                  hintText: state.channel.value == '1'
                      ? '请输入手机号'.tr
                      : '请输入邮箱'.tr,
                  inputFormatters: <TextInputFormatter>[
                    LengthLimitingTextInputFormatter(20),
                  ]),
              SizedBox(height: 10.w),
              Row(
                children: <Widget>[
                  Expanded(
                    child: LoginInput(
                        controller: state.codeController,
                        isPwd: false,
                        leftWidget: const SizedBox(),
                        onchangeAction: (textStr) {
                          logic.checkNext(state.codeController);
                        },
                        hintText:
                        '请输入验证码'.tr,
                        inputFormatters: <TextInputFormatter>[
                          LengthLimitingTextInputFormatter(20),
                        ]),
                  ),
                  SizedBox(
                    width: 20.w,
                  ),
                  Obx(() => GestureDetector(
                        onTap: () {
                          if (state.accountIsOK.value &&
                              state.canResend.value) {
                            logic.sendValidationCode();
                          }
                        },
                        child: Container(
                          width: 180.w,
                          height: 60.h,
                          padding: EdgeInsets.all(5.h),
                          decoration: BoxDecoration(
                              color: state.accountIsOK.value
                                  ? AppColors.mainColor
                                  : AppColors.btnDisableColor,
                              borderRadius: BorderRadius.circular(5)),
                          child: Center(
                            child: Text(state.btnText.value,
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 24.sp,
                                )),
                          ),
                        ),
                      ))
                ],
              ),
              SizedBox(height: 50.w),
              Obx(() {
                return SubmitBtn(
                    btnName: '确定'.tr,
                    fontSize: 30.sp,
                    borderRadius: 20.w,
                    padding: EdgeInsets.only(top: 25.w, bottom: 25.w),
                    isDisabled: state.canSub.value,
                    onClick: state.canSub.value
                        ? () {
                            if (state.accountIsOK.value && state.codeIsOK) {
                              if (state.channel.value == '1') {
                                logic.bindMobileRequest();
                              } else {
                                logic.bindEmailRequest();
                              }
                            }
                          }
                        : null);
              }),
            ],
          ),
        ));
  }
}