import 'package:flutter/cupertino.dart';
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/app_settings/app_settings.dart';
import 'package:star_lock/login/register/starLock_register_state.dart';

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: const Color(0xFFFFFFFF),
        appBar: TitleAppBar(
            barTitle: '注册'.tr,
            haveBack: true,
            backgroundColor: AppColors.mainColor),
        body: ListView(
          padding: EdgeInsets.only(top: 40.h, left: 40.w, right: 40.w),
          children: <Widget>[
            topSelectCountryAndRegionWidget(),
            middleTFWidget(),
            Obx(() {
              return SubmitBtn(
                  btnName: '注册'.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);
            }),
            SizedBox(
              height: 20.h,
            ),
            _buildBottomAgreement()
          ],
        ));
  }

  Widget topSelectCountryAndRegionWidget() {
    return Column(
      children: <Widget>[
        SizedBox(height: 50.h),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 340.w,
              height: 60.h,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(30.h)),
                  border:
                      Border.all(width: 1.0, color: AppColors.greyLineColor)),
              child: Row(
                children: <Widget>[
                  GestureDetector(
                    onTap: () {
                      state.isIphoneType.value = true;
                    },
                    child: Obx(
                      () => Container(
                        width: 170.w,
                        height: 60.h,
                        decoration: state.isIphoneType.value
                            ? BoxDecoration(
                                color: AppColors.mainColor,
                                borderRadius:
                                    BorderRadius.all(Radius.circular(30.h)),
                                border: Border.all(
                                    width: 1.0, color: AppColors.greyLineColor))
                            : null,
                        child: Center(
                          child: Text(
                            '手机'.tr,
                            style: TextStyle(
                                color: state.isIphoneType.value
                                    ? Colors.white
                                    : Colors.black),
                          ),
                        ),
                      ),
                    ),
                  ),
                  Expanded(
                    child: GestureDetector(
                      onTap: () {
                        state.isIphoneType.value = false;
                      },
                      child: Obx(
                        () => Container(
                          height: 60.h,
                          decoration: !state.isIphoneType.value
                              ? BoxDecoration(
                                  color: AppColors.mainColor,
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(30.h)),
                                  border: Border.all(
                                      width: 1.0,
                                      color: AppColors.greyLineColor))
                              : null,
                          child: Center(
                            child: Text(
                              '邮箱'.tr,
                              style: TextStyle(
                                color: !state.isIphoneType.value
                                    ? Colors.white
                                    : Colors.black,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
        SizedBox(height: 60.h),
        GestureDetector(
          onTap: () async {
            final 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();
            }
            // AppLog.log('路由返回值: $result, countryCode:${logic.state.countryCode}');
          },
          child: Obx(() => SizedBox(
                height: 70.h,
                child: Row(
                  children: <Widget>[
                    SizedBox(width: 5.w),
                    Expanded(
                        child: Text('你所在的国家/地区'.tr,
                            style: TextStyle(
                                fontSize: 26.sp, color: AppColors.blackColor))),
                    SizedBox(width: 20.w),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        Text(
                          state.isIphoneType.value
                              ? '${state.countryName.value} +${state.countryCode.value}'
                              : state.countryName.value,
                          textAlign: TextAlign.end,
                          style: TextStyle(
                              fontSize: 26.sp, color: AppColors.blackColor),
                        )
                      ],
                    ),
                    SizedBox(width: 5.w),
                    Image.asset(
                      'images/icon_right.png',
                      width: 50.w,
                      height: 50.w,
                    ),
                  ],
                ),
              )),
        ),
        Container(
          height: 0.5.h,
          color: Colors.grey,
        )
      ],
    );
  }

  Widget middleTFWidget() {
    return Column(
      children: <Widget>[
        Obx(() => LoginInput(
                controller: state.phoneOrEmailController,
                onchangeAction: (v) {
                  logic.checkNext(state.phoneOrEmailController);
                },
                leftWidget:
                    // Image.asset('images/icon_login_account.png', width: 30.w, height: 30.w,),
                    Padding(
                  padding: EdgeInsets.only(right: 5.w, left: 5.w),
                  child: Image.asset(
                    state.isIphoneType.value
                        ? 'images/icon_login_account.png'
                        : 'images/icon_login_email.png',
                    width: 30.w,
                    height: 30.w,
                  ),
                ),
                hintText: state.isIphoneType.value ? '请输入手机号'.tr : '请输入邮箱'.tr,
                keyboardType: TextInputType.number,
                inputFormatters: <TextInputFormatter>[
                  // FilteringTextInputFormatter.allow(RegExp('[0-9]')),
                  LengthLimitingTextInputFormatter(30),
                ])),
        SizedBox(height: 10.w),
        LoginInput(
            controller: state.pwdController,
            onchangeAction: (v) {
              logic.checkNext(state.pwdController);
            },
            isPwd: true,
            // isSuffixIcon: 2,
            leftWidget: Padding(
              padding: EdgeInsets.only(right: 5.w, left: 5.w),
              child: Image.asset(
                'images/icon_login_password.png',
                width: 30.w,
                height: 30.w,
              ),
            ),
            hintText: '请输入密码'.tr,
            inputFormatters: <TextInputFormatter>[
              LengthLimitingTextInputFormatter(20),
            ]),
        SizedBox(height: 15.w),
        Text(
          '密码必须是8-20位，至少包括数字/字母/符号中的2种'.tr,
          style:
              TextStyle(color: AppColors.placeholderTextColor, fontSize: 20.sp),
        ),
        SizedBox(height: 10.w),
        LoginInput(
            controller: state.sureController,
            onchangeAction: (v) {
              logic.checkNext(state.sureController);
            },
            isPwd: true,
            // isSuffixIcon: 2,
            leftWidget: Padding(
              padding: EdgeInsets.only(right: 10.w, left: 5.w),
              child: Image.asset(
                'images/icon_login_password.png',
                width: 30.w,
                height: 30.w,
              ),
            ),
            hintText: '确认密码'.tr,
            inputFormatters: <TextInputFormatter>[
              LengthLimitingTextInputFormatter(20),
            ]),
        SizedBox(height: 10.w),
        Row(
          children: <Widget>[
            Expanded(
              child: LoginInput(
                  controller: state.codeController,
                  onchangeAction: (v) {
                    logic.checkNext(state.codeController);
                  },
                  leftWidget: Padding(
                    padding: EdgeInsets.only(right: 10.w, left: 5.w),
                    child: SizedBox(
                      width: 30.w,
                      height: 30.w,
                    ),
                  ),
                  hintText: '请输入验证码'.tr,
                  inputFormatters: <TextInputFormatter>[
                    LengthLimitingTextInputFormatter(20),
                  ]),
            ),
            SizedBox(
              width: 20.w,
            ),
            Obx(() => GestureDetector(
                  onTap: (state.canSendCode.value && state.canResend.value)
                      ? () async {
                          // Navigator.pushNamed(context, Routers.safetyVerificationPage, arguments: {"countryCode":"+86", "account":state.phoneOrEmailStr.value});
                          final Object? result = await Navigator.pushNamed(
                              context, Routers.safetyVerificationPage,
                              arguments: <String, Object>{
                                'countryCode': state.countryCode,
                                'account': state.phoneOrEmailStr.value
                              });
                          state.xWidth.value =
                              (result! as Map<String, dynamic>)['xWidth'];
                          logic.sendValidationCode();
                        }
                      : null,
                  child: Container(
                    width: 180.w,
                    // height: 60.h,
                    padding: EdgeInsets.all(10.h),
                    decoration: BoxDecoration(
                        color:
                            (state.canSendCode.value && state.canResend.value)
                                ? AppColors.mainColor
                                : Colors.grey,
                        borderRadius: BorderRadius.circular(5)),
                    child: Center(
                      child: Text(state.btnText.value,
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 26.sp,
                          )),
                    ),
                  ),
                ))
          ],
        ),
        SizedBox(height: 50.w),
      ],
    );
  }

  Widget _buildBottomAgreement() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Obx(() => GestureDetector(
            onTap: () {
              state.agree.value = !state.agree.value;
              logic.changeAgreeState();
            },
            child: Image.asset(
              state.agree.value
                  ? 'images/icon_round_select.png'
                  : 'images/icon_round_unSelect.png',
              width: 30.w,
              height: 30.w,
            ))),
        SizedBox(
          width: 15.w,
        ),
        Flexible(
          child: RichText(
              text: TextSpan(
            text: '我已阅读并同意'.tr,
            style: TextStyle(color: const Color(0xff333333), fontSize: 20.sp),
            children: <InlineSpan>[
              WidgetSpan(
                  alignment: PlaceholderAlignment.middle,
                  child: GestureDetector(
                    child: Text('《${'用户协议'.tr}》',
                        style: TextStyle(
                            color: AppColors.mainColor, fontSize: 20.sp)),
                    onTap: () {
                      Get.toNamed(Routers.webviewShowPage,
                          arguments: <String, String>{
                            'url': XSConstantMacro.userAgreementURL,
                            'title': '用户协议'.tr
                          });
                    },
                  )),
              WidgetSpan(
                  alignment: PlaceholderAlignment.middle,
                  child: GestureDetector(
                    child: Text('《${'隐私政策'.tr}》',
                        style: TextStyle(
                            color: AppColors.mainColor, fontSize: 20.sp)),
                    onTap: () {
                      Get.toNamed(Routers.webviewShowPage,
                          arguments: <String, String>{
                            'url': XSConstantMacro.privacyPolicyURL,
                            'title': '隐私政策'.tr
                          });
                    },
                  )),
            ],
          )),
        )
      ],
    );
  }
}