import 'dart:async';

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';

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

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

class _StarLockRegisterPageState extends State<StarLockRegisterPage> {
  final TextEditingController _phoneController = TextEditingController();
  final TextEditingController _pwdController = TextEditingController();
  final TextEditingController _codeController = TextEditingController();

  late Timer _timer;
  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 (),
            SubmitBtn(btnName: "${TranslationLoader.lanKeys!.reset!.tr} ${TranslationLoader.lanKeys!.password!.tr}", fontSize: 30.sp, borderRadius: 20.w, padding: EdgeInsets.only(top: 25.w, bottom: 25.w), onClick: (){

            }),
          ],
        )
    );
  }

  Widget topSeletCountryAndRegionWidget (){
    return Column(
      children: [
        SizedBox(height:50.h),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 420.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: 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: Row(
                children: [
                  GestureDetector(
                    onTap: (){

                    },
                    child: Container(
                        width: 210.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: 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!.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: (){
            Navigator.pushNamed(context, Routers.seletCountryRegionPage);
          },
          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: 30.sp, fontWeight: FontWeight.w500))),
                SizedBox(width:20.w),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Text("中国+86", textAlign: TextAlign.end, style: TextStyle(fontSize: 30.sp, fontWeight: FontWeight.w500),)
                  ],
                ),
                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: _phoneController,
            leftWidget:Padding(
              padding: EdgeInsets.only(top:30.w, bottom: 20.w, right: 20.w, left: 5.w),
              child: Image.asset('images/main/icon_main_search.png', width: 40.w, height: 40.w,),
            ),
            hintText: TranslationLoader.lanKeys!.pleaseEnterNumberOrEmail!.tr,
            keyboardType: TextInputType.number,
            inputFormatters: [
              FilteringTextInputFormatter.allow(RegExp('[0-9]')),
              LengthLimitingTextInputFormatter(20),
            ]
        ),
        SizedBox(height: 10.w),
        LoginInput(
            controller: _pwdController,
            isPwd: true,
            leftWidget:Padding(
              padding: EdgeInsets.only(top:30.w, bottom: 20.w, right: 20.w, left: 5.w),
              child: Image.asset('images/main/icon_main_search.png', width: 40.w, height: 40.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: const Color(0xFF999999), fontSize: 26.sp),),
        SizedBox(height: 10.w),
        LoginInput(
            controller: _pwdController,
            isPwd: true,
            leftWidget:Padding(
              padding: EdgeInsets.only(top:30.w, bottom: 20.w, right: 20.w, left: 5.w),
              child: Image.asset('images/main/icon_main_search.png', width: 40.w, height: 40.w,),
            ),
            hintText: "${TranslationLoader.lanKeys!.sure!.tr} ${TranslationLoader.lanKeys!.password!.tr}",
            inputFormatters: [
              LengthLimitingTextInputFormatter(20),
            ]
        ),
        SizedBox(height: 10.w),
        Row(
          children: [
            Expanded(
              child: LoginInput(
                  controller: _codeController,
                  isPwd: true,
                  leftWidget:Padding(
                    padding: EdgeInsets.only(top:30.w, bottom: 20.w, right: 20.w, left: 5.w),
                    child: 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!.getTip!.tr} ${TranslationLoader.lanKeys!.verificationCode!.tr}': (_seconds<10)?'0$_seconds s':'$_seconds s', textAlign:TextAlign.center, style: TextStyle(
                    color: Colors.white,
                    fontSize: 26.sp,
                  )),
                ),
              ),
              onTap: (){
                if(_seconds==60){
                  // _setVerify();
                }else{
                  // Toast.show(msg: '正在获取验证码');
                }
              },
            )
          ],
        ),
        SizedBox(height: 50.w),
      ],
    );
  }
}