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/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 StarLockRegisterXHJPage extends StatefulWidget {
  const StarLockRegisterXHJPage({Key? key}) : super(key: key);

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: Colors.white,
        appBar: TitleAppBar(
            barTitle: '注册'.tr,
            haveBack: true,
            iconColor: AppColors.blackColor,
            titleColor: AppColors.blackColor,
            backgroundColor: Colors.white),
        body: ListView(
          padding: EdgeInsets.only(left: 40.w, right: 40.w),
          children: <Widget>[
            topSelectCountryAndRegionWidget(),
            middleTFWidget(),
            _buildBottomAgreement(),
            SizedBox(
              height: 10.h,
            ),
            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);
            }),
          ],
        ));
  }

  Widget topSelectCountryAndRegionWidget() {
    return Column(
      children: <Widget>[
        Container(
          height: 80.h,
          child: DefaultTabController(
            length: 2,
            initialIndex: state.isIphoneType.value ? 0 : 1,
            child: TabBar(
              onTap: (int index) {
                state.isIphoneType.value = index == 0;
              },
              overlayColor: MaterialStateProperty.resolveWith(
                  (Set<MaterialState> states) {
                return Colors.transparent;
              }),
              dividerHeight: 0,
              indicatorSize: TabBarIndicatorSize.tab,
              tabs: <Widget>[Text('手机'.tr), Text('邮箱'.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 {
            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();
            }
            // Get.log("路由返回值: $result, countryCode:${logic.state.countryCode}");
          },
          child: Obx(() => Container(
                color: Colors.white,
                height: 70.h,
                child: Row(
                  children: <Widget>[
                    SizedBox(width: 5.w),
                    Text('国家/地区'.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: <Widget>[
        Obx(() => LoginInput(
                controller: state.phoneOrEmailController,
                onchangeAction: (v) {
                  logic.checkNext(state.phoneOrEmailController);
                },
                leftWidget: SizedBox(),
                label: state.isIphoneType.value ? '请输入手机号'.tr : '请输入邮箱'.tr,
                keyboardType: TextInputType.number,
                inputFormatters: <TextInputFormatter>[
                  LengthLimitingTextInputFormatter(30),
                ])),
        LoginInput(
            controller: state.pwdController,
            onchangeAction: (v) {
              logic.checkNext(state.pwdController);
            },
            isPwd: true,
            leftWidget: SizedBox(),
            label: '请输入密码'.tr,
            inputFormatters: <TextInputFormatter>[
              LengthLimitingTextInputFormatter(20),
            ]),
        Text(
          '密码必须是8-20位，至少包括数字/字母/符号中的2种'.tr,
          style:
              TextStyle(color: AppColors.placeholderTextColor, fontSize: 20.sp),
        ),
        LoginInput(
            controller: state.sureController,
            onchangeAction: (v) {
              logic.checkNext(state.sureController);
            },
            isPwd: true,
            leftWidget: SizedBox(),
            label: '确认密码'.tr,
            inputFormatters: <TextInputFormatter>[
              LengthLimitingTextInputFormatter(20),
            ]),
        Row(
          children: <Widget>[
            Expanded(
              child: LoginInput(
                  controller: state.codeController,
                  onchangeAction: (v) {
                    logic.checkNext(state.codeController);
                  },
                  leftWidget: SizedBox(),
                  label: '请输入验证码'.tr,
                  inputFormatters: <TextInputFormatter>[
                    LengthLimitingTextInputFormatter(20),
                  ]),
            ),
            Obx(() => GestureDetector(
                  onTap: (state.canSendCode.value && state.canResend.value)
                      ? () async {
                          // Navigator.pushNamed(context, Routers.safetyVerificationPage, arguments: {"countryCode":"+86", "account":state.phoneOrEmailStr.value});
                          final result = await Get.toNamed(
                              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(
                    padding: EdgeInsets.all(10.h),
                    decoration: BoxDecoration(
                        color:
                            (state.canSendCode.value && state.canResend.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: 22.sp,
                          )),
                    ),
                  ),
                )),
            SizedBox(
              width: 20.w,
            ),
          ],
        ),
        SizedBox(height: 50.w),
      ],
    );
  }

  Widget _buildBottomAgreement() {
    return Padding(
      padding: EdgeInsets.only(bottom: 20.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Obx(() => GestureDetector(
              onTap: () {
                state.agree.value = !state.agree.value;
                logic.changeAgreeState();
              },
              child: Container(
                width: 40.w,
                height: 40.w,
                // color: Colors.red,
                padding: EdgeInsets.only(
                  left: 5.w,
                  right: 10.w,
                ),
                child: Image.asset(
                  state.agree.value
                      ? 'images/icon_round_select.png'
                      : 'images/icon_round_unSelect.png',
                  width: 20.w,
                  height: 20.w,
                ),
              ))),
          SizedBox(
            width: 10.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
                            });
                      },
                    )),
              ],
            )),
          )
        ],
      ),
    );
  }
}