import 'package:flutter/material.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/minePersonInfoEditAccount/minePersonInfoEditAccount/mineUnbindPhoneOrEmail_logic.dart';
import 'package:star_lock/tools/tf_input_haveBorder.dart';

import '../../../../appRouters.dart';
import '../../../../app_settings/app_colors.dart';
import '../../../../tools/submitBtn.dart';
import '../../../../tools/titleAppBar.dart';
import '../../../../translations/trans_lib.dart';

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

  @override
  State<MineUnbindPhoneOrEmailPage> createState() =>
      _MineUnbindPhoneOrEmailState();
}

class _MineUnbindPhoneOrEmailState extends State<MineUnbindPhoneOrEmailPage> {
  final logic = Get.put(MineUnbindPhoneOrEmailLogic());
  final state = Get.find<MineUnbindPhoneOrEmailLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: AppColors.mainBackgroundColor,
        appBar: F.sw(
          skyCall: () => TitleAppBar(
            barTitle: TranslationLoader.lanKeys!.modifyAccount!.tr,
            haveBack: true,
            backgroundColor: AppColors.mainColor,
          ),
          xhjCall: () => TitleAppBar(
            barTitle: TranslationLoader.lanKeys!.modifyAccount!.tr,
            haveBack: true,
            backgroundColor: Colors.white,
            iconColor: AppColors.blackColor,
            titleColor: AppColors.blackColor,
          ),
        ),
        body: Column(
          children: [
            Container(
                width: 1.sw,
                color: AppColors.greyBackgroundColor,
                padding: EdgeInsets.only(left: 15.w, top: 10.h, bottom: 10.h),
                child: Text(
                  TranslationLoader.lanKeys!.modifyAccountTip!.tr,
                  style: TextStyle(fontSize: 20.sp),
                )),
            Obx(() => Container(
                padding: EdgeInsets.only(
                    left: 30.w, right: 30.w, top: 20.h, bottom: 10.h),
                child: TFInputHaveBorder(
                    controller: state.codeController,
                    onChangeAction: () {
                      logic.checkNext(state.codeController);
                    },
                    label:
                        "${TranslationLoader.lanKeys!.pleaseEnter!.tr}${TranslationLoader.lanKeys!.verificationCode!.tr}",
                    rightSlot: GestureDetector(
                      onTap:  state.canResend.value ?() {
                        logic.sendValidationCode();
                      } : null,
                      child: Container(
                        width: 180.w,
                        height: 90.h,
                        padding: EdgeInsets.all(5.h),
                        margin: EdgeInsets.only(right: 10.w),
                        child: Center(
                          child: Text(state.btnText.value,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                color: AppColors.mainColor,
                                fontSize: 26.sp,
                              )),
                        ),
                      ),
                    )))),
            SizedBox(height: 50.w),
            Obx(() => SubmitBtn(
                btnName: TranslationLoader.lanKeys!.next!.tr,
                isDisabled: state.canSub.value,
                onClick: () {
                  if (state.channel.value == '1') {
                    logic.unbindPhoneTokenRequest();
                  } else {
                    logic.unbindEmailTokenRequest();
                  }
                })),
            SizedBox(height: 50.w),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                GestureDetector(
                  child: SizedBox(
                    // width: 150.w,
                    height: 50.h,
                    // color: Colors.red,
                    child: Center(
                      child: Text(
                          '${TranslationLoader.lanKeys!.forgetPassword!.tr}？',
                          style: TextStyle(
                              fontSize: 18.sp, color: AppColors.mainColor)),
                    ),
                  ),
                  onTap: () {
                    Navigator.pushNamed(
                        context, Routers.starLockForgetPasswordPage);
                  },
                ),
                SizedBox(width: 30.w),
              ],
            ),
          ],
        ));
  }
}