import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../appRouters.dart';
import '../../app_settings/app_colors.dart';
import '../../common/XSConstantMacro/XSConstantMacro.dart';
import '../../tools/tf_loginInput.dart';
import '../../tools/submitBtn.dart';
import '../../tools/titleAppBar.dart';
import '../../translations/trans_lib.dart';
import 'starLock_register_logic.dart';

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

  @override
  State<StarLockRegisterXHJPage> createState() => _StarLockRegisterPageState();
}

class _StarLockRegisterPageState extends State<StarLockRegisterXHJPage> {
  final logic = Get.put(StarLockRegisterLogic());
  final state = Get.find<StarLockRegisterLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: Colors.white,
        appBar: TitleAppBar(
            barTitle: TranslationLoader.lanKeys!.register!.tr,
            haveBack: true,
            iconColor: AppColors.blackColor,
            titleColor: AppColors.blackColor,
            backgroundColor: Colors.white),
        body: ListView(
          padding: EdgeInsets.only(left: 40.w, right: 40.w),
          children: [
            topSelectCountryAndRegionWidget(),
            middleTFWidget(),
            _buildBottomAgreement(),
            SizedBox(
              height: 10.h,
            ),
            Obx(() {
              return SubmitBtn(
                  btnName: TranslationLoader.lanKeys!.register!.tr,
                  // backgroundColorList: state.canSub.value ? [AppColors.mainColor] :[Colors.grey],
                  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.agree.value == false) {
                            logic.showToast('请先同意用户协议及隐私政策'.tr);
                            return;
                          } else {
                            logic.register();
                          }
                        }
                      : null);
            }),
          ],
        ));
  }

  Widget topSelectCountryAndRegionWidget() {
    return Column(
      children: [
        Container(
          height: 80.h,
          child: DefaultTabController(
            length: 2,
            child: TabBar(
              onTap: (int index) {
                state.isIphoneType.value = index == 0;
              },
              overlayColor: MaterialStateProperty.resolveWith((states) {
                return Colors.transparent;
              }),
              dividerHeight: 0,
              indicatorSize: TabBarIndicatorSize.tab,
              tabs: [
                Text(TranslationLoader.lanKeys!.iphone!.tr),
                Text(TranslationLoader.lanKeys!.email!.tr)
              ],
              indicatorColor: AppColors.mainColor,
              labelStyle:
                  TextStyle(color: AppColors.mainColor, fontSize: 26.sp),
              unselectedLabelStyle:
                  TextStyle(color: AppColors.blackColor, fontSize: 22.sp),
            ),
          ),
        ),
        SizedBox(
          height: 15.h,
        ),
        GestureDetector(
          onTap: () 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'];
              logic.checkIpAction();
            }
            Get.log("路由返回值: $result, countryCode:${logic.state.countryCode}");
          },
          child: Obx(() => Container(
                color: Colors.white,
                height: 70.h,
                child: Row(
                  children: [
                    SizedBox(width: 5.w),
                    Text(TranslationLoader.lanKeys!.countryAndRegion!.tr,
                        style: TextStyle(
                            fontSize: 26.sp, color: AppColors.blackColor)),
                    SizedBox(width: 50.w),
                    Text(
                      state.isIphoneType.value
                          ? '${state.countryName.value} +${state.countryCode.value}'
                          : state.countryName.value,
                      style: TextStyle(
                          fontSize: 26.sp, color: AppColors.mainColor),
                    ),
                  ],
                ),
              )),
        ),
      ],
    );
  }

  Widget middleTFWidget() {
    return Column(
      children: [
        Obx(() => LoginInput(
                controller: state.phoneOrEmailController,
                onchangeAction: (v) {
                  logic.checkNext(state.phoneOrEmailController);
                },
                leftWidget: SizedBox(),
                label:
                    "${TranslationLoader.lanKeys!.pleaseEnter!.tr}${state.isIphoneType.value ? "手机号".tr : TranslationLoader.lanKeys!.email!.tr}",
                keyboardType: TextInputType.number,
                inputFormatters: [
                  LengthLimitingTextInputFormatter(30),
                ])),
        LoginInput(
            controller: state.pwdController,
            onchangeAction: (v) {
              logic.checkNext(state.pwdController);
            },
            isPwd: true,
            leftWidget: SizedBox(),
            label:
                "${TranslationLoader.lanKeys!.pleaseEnter!.tr}${TranslationLoader.lanKeys!.password!.tr}",
            inputFormatters: [
              LengthLimitingTextInputFormatter(20),
            ]),
        Text(
          TranslationLoader.lanKeys!.registerPasswordTip!.tr,
          style:
              TextStyle(color: AppColors.placeholderTextColor, fontSize: 20.sp),
        ),
        LoginInput(
            controller: state.sureController,
            onchangeAction: (v) {
              logic.checkNext(state.sureController);
            },
            isPwd: true,
            leftWidget: SizedBox(),
            label:
                "${TranslationLoader.lanKeys!.sure!.tr}${TranslationLoader.lanKeys!.password!.tr}",
            inputFormatters: [
              LengthLimitingTextInputFormatter(20),
            ]),
        Row(
          children: [
            Expanded(
              child: LoginInput(
                  controller: state.codeController,
                  onchangeAction: (v) {
                    logic.checkNext(state.codeController);
                  },
                  leftWidget: SizedBox(),
                  label:
                      "${TranslationLoader.lanKeys!.pleaseEnter!.tr}${TranslationLoader.lanKeys!.verificationCode!.tr}",
                  inputFormatters: [
                    LengthLimitingTextInputFormatter(20),
                  ]),
            ),
            Obx(() => GestureDetector(
                  onTap:
                      state.phoneOrEmailStrIsOK.value && state.canResend.value
                          ? () async {
                              // Navigator.pushNamed(context, Routers.safetyVerificationPage, arguments: {"countryCode":"+86", "account":state.phoneOrEmailStr.value});
                              if (state.pwd.value != state.surePwd.value) {
                                logic.showToast("密码不一致哦".tr);
                                return;
                              }
                              var result = await Get.toNamed(
                                  Routers.safetyVerificationPage,
                                  arguments: {
                                    "countryCode": state.countryCode,
                                    "account": state.phoneOrEmailStr.value
                                  });
                              state.xWidth.value =
                                  (result as Map<String, dynamic>)['xWidth'];
                              logic.sendValidationCode();
                            }
                          : null,
                  child: Container(
                    color: Colors.transparent,
                    padding: EdgeInsets.all(10.h),
                    child: Center(
                      child: Text(state.btnText.value,
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            color: AppColors.mainColor,
                            fontSize: 22.sp,
                          )),
                    ),
                  ),
                )),
            SizedBox(
              width: 20.w,
            ),
          ],
        ),
        SizedBox(height: 50.w),
      ],
    );
  }

  Widget _buildBottomAgreement() {
    return GestureDetector(
      onTap: () {
        state.agree.value = !state.agree.value;
        logic.changeAgreeState();
      },
      child: Padding(
        padding: EdgeInsets.symmetric(vertical: 16.h),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Obx(() => Image.asset(
                  state.agree.value
                      ? 'images/icon_round_select.png'
                      : 'images/icon_round_unSelect.png',
                  width: 20.w,
                  height: 20.w,
                )),
            SizedBox(
              width: 15.w,
            ),
            Flexible(
              child: RichText(
                  text: TextSpan(
                text: TranslationLoader.lanKeys!.readAndAgree!.tr,
                style:
                    TextStyle(color: const Color(0xff333333), fontSize: 20.sp),
                children: [
                  WidgetSpan(
                      alignment: PlaceholderAlignment.middle,
                      child: GestureDetector(
                        child: Text(
                            '《${TranslationLoader.lanKeys!.userAgreement!.tr}》',
                            style: TextStyle(
                                color: AppColors.mainColor, fontSize: 20.sp)),
                        onTap: () {
                          Get.toNamed(Routers.webviewShowPage, arguments: {
                            "url": XSConstantMacro.userAgreementURL,
                            "title": '用户协议'.tr
                          });
                        },
                      )),
                  WidgetSpan(
                      alignment: PlaceholderAlignment.middle,
                      child: GestureDetector(
                        child: Text(
                            '《${TranslationLoader.lanKeys!.privacyPolicy!.tr}》',
                            style: TextStyle(
                                color: AppColors.mainColor, fontSize: 20.sp)),
                        onTap: () {
                          Get.toNamed(Routers.webviewShowPage, arguments: {
                            "url": XSConstantMacro.privacyPolicyURL,
                            "title": '隐私政策'.tr
                          });
                        },
                      )),
                ],
              )),
            )
          ],
        ),
      ),
    );
  }
}