import 'dart:async';
import 'dart:ffi';

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 '../../tools/tf_loginInput.dart';
import '../../tools/submitBtn.dart';
import '../../tools/titleAppBar.dart';
import '../../translations/trans_lib.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 logic = Get.find<StarLockRegisterLogic>();
  final state = Get.find<StarLockRegisterLogic>().state;

  late Timer _timer;
  final int _seconds = 60;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: const Color(0xFFFFFFFF),
        appBar: TitleAppBar(
            barTitle: TranslationLoader.lanKeys!.register!.tr,
            haveBack: true,
            backgroundColor: AppColors.mainColor),
        body: ListView(
          padding: EdgeInsets.only(top: 40.h, left: 40.w, right: 40.w),
          children: [
            topSeletCountryAndRegionWidget(),
            middleTFWidget(),
            Obx(() {
              print("11111:${state.canSub.value}");
              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
                      ? () {
                          logic.register();
                        }
                      : null);
            }),
            SizedBox(
              height: 20.h,
            ),
            _buildBottomAgreement()
          ],
        ));
  }

  Widget topSeletCountryAndRegionWidget() {
    return Column(
      children: [
        SizedBox(height: 50.h),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 340.w,
              height: 60.h,
              // color: Colors.red,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(30.h)),
                  border: const Border(
                    top: BorderSide(width: 1.0, color: AppColors.greyLineColor),
                    left:
                        BorderSide(width: 1.0, color: AppColors.greyLineColor),
                    right:
                        BorderSide(width: 1.0, color: AppColors.greyLineColor),
                    bottom:
                        BorderSide(width: 1.0, color: AppColors.greyLineColor),
                  )),
              child: Row(
                children: [
                  GestureDetector(
                    onTap: () {},
                    child: Container(
                        width: 170.w,
                        height: 60.h,
                        // color: Colors.red,
                        decoration: BoxDecoration(
                            color: AppColors.mainColor,
                            borderRadius:
                                BorderRadius.all(Radius.circular(30.h)),
                            border: const Border(
                              top: BorderSide(
                                  width: 1.0, color: AppColors.greyLineColor),
                              left: BorderSide(
                                  width: 1.0, color: AppColors.greyLineColor),
                              right: BorderSide(
                                  width: 1.0, color: AppColors.greyLineColor),
                              bottom: BorderSide(
                                  width: 1.0, color: AppColors.greyLineColor),
                            )),
                        child: Center(
                            child: Text(
                          TranslationLoader.lanKeys!.iphone!.tr,
                          style: TextStyle(color: Colors.white),
                        ))),
                  ),
                  Expanded(
                    child: GestureDetector(
                      onTap: () {},
                      child: Container(
                          height: 60.h,
                          // color: Colors.red,
                          // decoration: BoxDecoration(
                          //     borderRadius: BorderRadius.all(Radius.circular(30.h)),
                          //     border: const Border(
                          //       top: BorderSide(width: 1.0, color: Color(0xffC0C0C0)),
                          //       left: BorderSide(width: 1.0, color: Color(0xffC0C0C0)),
                          //       right: BorderSide(width: 1.0, color: Color(0xffC0C0C0)),
                          //       bottom: BorderSide(width: 1.0, color: Color(0xffC0C0C0)),
                          //     )
                          // ),
                          child: Center(
                              child: Text(
                            TranslationLoader.lanKeys!.email!.tr,
                            style: const TextStyle(color: Colors.black),
                          ))),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
        SizedBox(height: 60.h),
        GestureDetector(
          onTap: () async {
            Navigator.pushNamed(context, Routers.seletCountryRegionPage);
            var result = await Navigator.pushNamed(
                context, Routers.seletCountryRegionPage);
            logic.state.countryCode.value =
                (result as Map<String, dynamic>)['code'];
            logic.state.countryId.value = result["countryId"];
            // print("路由返回值: ${result}, countryCode:${logic.state.countryCode} ,countryId:${logic.state.countryId}");
          },
          child: Container(
            height: 70.h,
            // color: Colors.red,
            // padding: EdgeInsets.only(left:20.w, right: 10.w, top: 20.w, bottom: 20.w),
            child: Row(
              children: [
                SizedBox(width: 5.w),
                Expanded(
                    child: Text(TranslationLoader.lanKeys!.countryAndRegion!.tr,
                        style: TextStyle(
                            fontSize: 26.sp, color: AppColors.blackColor))),
                SizedBox(width: 20.w),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Text(
                      "中国+86",
                      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: [
        LoginInput(
            controller: state.phoneOrEmailController,
            onchangeAction: (v) {
              print("3333333:${v}");
              logic.checkNext(state.phoneOrEmailController);
            },
            leftWidget:
            // Image.asset('images/icon_login_account.png', width: 30.w, height: 30.w,),
            Padding(
              padding: EdgeInsets.only(right: 10.w, left: 5.w),
              child: Image.asset('images/icon_login_account.png', width: 30.w, height: 30.w,),
            ),
            hintText: TranslationLoader.lanKeys!.pleaseEnterNumberOrEmail!.tr,
            keyboardType: TextInputType.number,
            inputFormatters: [
              FilteringTextInputFormatter.allow(RegExp('[0-9]')),
              LengthLimitingTextInputFormatter(20),
            ]),
        SizedBox(height: 10.w),
        LoginInput(
            controller: state.pwdController,
            onchangeAction: (v) {
              logic.checkNext(state.pwdController);
            },
            isPwd: true,
            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:
                "${TranslationLoader.lanKeys!.pleaseEnter!.tr}${TranslationLoader.lanKeys!.password!.tr}",
            inputFormatters: [
              LengthLimitingTextInputFormatter(20),
            ]),
        SizedBox(height: 15.w),
        Text(
          TranslationLoader.lanKeys!.registerPasswordTip!.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,
            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:
                "${TranslationLoader.lanKeys!.sure!.tr}${TranslationLoader.lanKeys!.password!.tr}",
            inputFormatters: [
              LengthLimitingTextInputFormatter(20),
            ]),
        SizedBox(height: 10.w),
        Row(
          children: [
            Expanded(
              child: LoginInput(
                  controller: state.codeController,
                  isPwd: true,
                  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,
                    ),
                    // Image.asset(
                    //   'images/main/icon_main_search.png',
                    //   width: 40.w,
                    //   height: 40.w,
                    // ),
                  ),
                  hintText: "${TranslationLoader.lanKeys!.pleaseEnter!.tr}${TranslationLoader.lanKeys!.verificationCode!.tr}",
                  inputFormatters: [
                    LengthLimitingTextInputFormatter(20),
                  ]),
            ),
            SizedBox(
              width: 20.w,
            ),
            GestureDetector(
              child: Container(
                width: 180.w,
                height: 60.h,
                padding: EdgeInsets.all(5.h),
                decoration: BoxDecoration(
                    color: AppColors.mainColor,
                    borderRadius: BorderRadius.circular(5)),
                child: Center(
                  child: Text(
                      _seconds == 60
                          ? TranslationLoader.lanKeys!.getVerificationCode!.tr
                          : (_seconds < 10)
                              ? '0$_seconds s'
                              : '$_seconds s',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 26.sp,
                      )),
                ),
              ),
              onTap: () {
                Navigator.pushNamed(context, Routers.safetyVerificationPage, arguments: {"countryCode":"+86", "account":"15080825640"});
                if (_seconds == 60) {
                  // _setVerify();
                } else {
                  // Toast.show(msg: '正在获取验证码');
                }
              },
            )
          ],
        ),
        SizedBox(height: 50.w),
      ],
    );
  }

  Widget _buildBottomAgreement() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Image.asset(
          'images/icon_select_circle.png',
          width: 28.w,
          height: 28.w,
        ),
        // SizedBox(
        //     height: 20.h,
        //     width: 26.w,
        //     child: Checkbox(value: false, onChanged: (value) {})),
        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: () {},
                  )),
              WidgetSpan(
                  alignment: PlaceholderAlignment.middle,
                  child: GestureDetector(
                    child: Text(
                        '《${TranslationLoader.lanKeys!.privacyPolicy!.tr}》',
                        style: TextStyle(
                            color: AppColors.mainColor, fontSize: 20.sp)),
                    onTap: () {},
                  )),
            ],
          )),
        )
      ],
    );
  }
}