import 'dart:async';
import 'dart:io';

import 'package:dio/dio.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/retrofit/data/base_data.dart';
import 'package:huixiang/retrofit/data/user_info.dart';
import 'package:huixiang/retrofit/retrofit_api.dart';
import 'package:huixiang/utils/font_weight.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:shared_preferences/shared_preferences.dart';

import '../view_widget/border_text.dart';

class BindingPhonePage extends StatefulWidget {
  final Map<String, dynamic> arguments;

  BindingPhonePage({this.arguments});

  @override
  State<StatefulWidget> createState() {
    return _BindingPhonePage();
  }
}

class _BindingPhonePage extends State<BindingPhonePage> {
  ApiService apiService;
  String area = "+86";
  var _controllerPhone = TextEditingController();
  var _controllerNewPhone = TextEditingController();
  var _controllerCode = TextEditingController();
  var _controllerNewCode = TextEditingController();
  Color statusCodeTextColor = Color(0xFF353535);
  var verifyStatus = 0;
  var mobileStatus = 0;
  var btnText = "获取验证码";
  var _sendCodeStatus = 0;
  Timer _timer;
  UserInfo userInfo;
  int phoneState = 1;

  @override
  void initState() {
    super.initState();
    userInfo = widget.arguments['userInfo'];
  }

  @override
  void dispose() {
    if (_timer != null && _timer.isActive) _timer.cancel();
    super.dispose();
  }

  ///修改绑定手机号码
  modifyPhoneCode(int state) async {
    var mobile = _controllerPhone.text;
    if (mobile == ""&& phoneState == 1) {
      SmartDialog.showToast(S.of(context).qingshurushoujihao, alignment: Alignment.center);
      return;
    }
    var newMobile = _controllerNewPhone.text;
    if (newMobile == ""&& phoneState == 2) {
      SmartDialog.showToast(S.of(context).qingshurushoujihao, alignment: Alignment.center);
      return;
    }
    var code = _controllerCode.text;
    if (code == "" && phoneState == 1) {
      SmartDialog.showToast(S.of(context).qingshuruyanzhengma, alignment: Alignment.center);
      return;
    }
    var newCode = _controllerNewCode.text;
    if (newCode == "" && phoneState == 2) {
      SmartDialog.showToast(S.of(context).qingshuruyanzhengma, alignment: Alignment.center);
      return;
    }
    if (code.length != 6 && phoneState==1) {
      SmartDialog.showToast(S.of(context).code_error, alignment: Alignment.center);
      return;
    }
    if (newCode.length != 6 && phoneState == 2) {
      SmartDialog.showToast(S.of(context).code_error, alignment: Alignment.center);
      return;
    }
    if (apiService == null) {
      SharedPreferences value = await SharedPreferences.getInstance();
      apiService = ApiService(Dio(),
          context: context, token: value.getString("token"), showLoading: false);
    }
    BaseData baseData = await apiService.changePhone({
      "areaCode": area,
      "capcha": phoneState == 1 ? code:newCode,
      "mobile1": mobile,
      "mobile2": newMobile,
      "state": state,
    }).catchError((error) {});
    if (baseData != null && baseData.isSuccess) {
      if(state == 1){
        _timer.cancel();
        btnText = "获取验证码";
        _sendCodeStatus = 0;
        phoneState = 2;
      }else if(state == 2){
        phoneState = 3;}
      setState(() {});
    } else {
      setState(() {});
      SmartDialog.showToast(baseData.msg, alignment: Alignment.center);
    }
  }

  ///验证验证码
  verificationCode() async {
    var mobile = _controllerPhone.text;
    if (mobile == "" && phoneState == 1) {
      SmartDialog.showToast(S.of(context).qingshurushoujihao, alignment: Alignment.center);
      return;
    }
    var newMobile = _controllerNewPhone.text;
    if (newMobile == "" && phoneState == 2) {
      SmartDialog.showToast(S.of(context).qingshurushoujihao, alignment: Alignment.center);
      return;
    }
    if (apiService == null) {
      SharedPreferences value = await SharedPreferences.getInstance();
      apiService = ApiService(Dio(),
          context: context, token: value.getString("token"), showLoading: false);
    }
    BaseData baseData = await apiService.changeSendVerify(mobile).catchError((error) {});
    if (baseData != null && baseData.isSuccess) {
      _sendCodeStatus = 1;
      countdown();
      SmartDialog.showToast(baseData.data ?? false, alignment: Alignment.center);
    } else {
      SmartDialog.showToast(baseData.msg, alignment: Alignment.center);
    }
  }

  countdown() {
    if (_timer != null && _timer.isActive) return;
    int countdown = 60;
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      countdown--;
      if (countdown == 0) {
        btnText = "重新发送";
        _sendCodeStatus = 0;
        _timer.cancel();
      } else {
        btnText = "${countdown}s";
      }
      setState(() {});
    });
  }

  bool isPhone(mobile) {
    RegExp exp = RegExp(
        r'^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$');
    return exp.hasMatch(mobile);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () {
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: Scaffold(
          resizeToAvoidBottomInset: false,
          appBar: AppBar(
            backgroundColor: Colors.white,
            leading: GestureDetector(
                child: Icon(
                  Icons.arrow_back_ios,
                  color: Colors.black,
                ),
                onTap: () {
                  Navigator.of(context).pop();
                }),
            title: Text(
              S.of(context).genggaibangdingshoujihao,
              style: TextStyle(
                fontWeight: MyFontWeight.regular,
                fontSize: 17.sp,
                color: Color(0xFF0D0D0D),
              ),
            ),
            centerTitle: true,
            elevation: 0.0,
          ),
          body: Container(
            margin: EdgeInsets.only(top: 12.h),
            padding: EdgeInsets.symmetric(horizontal:16.w),
            color: Colors.white,
            width: double.infinity,
            child:Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                topSequence(),
                if(phoneState != 3)
                Align(alignment: Alignment.center,
                    child: Text(
                      phoneState == 1 ?"现手机号验证":"修改成新号码",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Color(0xFF353535),
                        fontSize: 18.sp,
                        letterSpacing:1,
                        fontWeight: MyFontWeight.bold,
                      ),)),
                if(phoneState == 2)
                Padding(padding:EdgeInsets.only(top: 14.h),
                    child: Text(
                      "当前手机号为${area + " ${userInfo?.phone ?? ""}"} 请输入新手机号：",
                      style: TextStyle(
                        color: Color(0xFFA29E9E),
                        fontSize: 14.sp,
                        letterSpacing:0.5,
                        fontWeight: MyFontWeight.medium,
                      ),)),
                if(phoneState == 1)
                inputPhone(),
                if(phoneState == 2)
                newInputPhone(),
                if(phoneState == 3)
                bindingSuccess(),
              ],
            ),
          ),
        ));
  }

  ///头部手机号流程顺序
  Widget topSequence(){
    return Container(
      margin:EdgeInsets.only(top:35.h,bottom: 31.h),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            decoration:BoxDecoration(
              borderRadius: BorderRadius.circular(100.w),
              color: Color(0xFF34995E),
            ),
            padding: EdgeInsets.symmetric(horizontal:8.5.w,vertical:5.h),
            child: Text(
              "1",
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 14.sp,
                fontWeight: MyFontWeight.regular,
              ),),
          ),
          Container(
            height: 1.h,
            width: 74.w,
            color: Color(0xFF34995E),
            margin: EdgeInsets.symmetric(horizontal:8.w),
          ),
          Container(
            decoration:BoxDecoration(
              borderRadius: BorderRadius.circular(100.w),
              color: phoneState == 1?Color(0xFFB7D3C3) : Color(0xFF34995E),
            ),
            padding: EdgeInsets.symmetric(horizontal:8.5.w,vertical:5.h),
            child: Text(
              "2",
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 14.sp,
                fontWeight: MyFontWeight.regular,
              ),),
          ),
          Container(
            height: 1.h,
            width: 74.w,
            color: Color(0xFF34995E),
            margin: EdgeInsets.symmetric(horizontal:8.w),
          ),
          Container(
            decoration:BoxDecoration(
              borderRadius: BorderRadius.circular(100.w),
              color: (phoneState !=3)?Color(0xFFB7D3C3) : Color(0xFF34995E),
            ),
            padding: EdgeInsets.symmetric(horizontal:8.5.w,vertical:5.h),
            child: Text(
              "3",
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 14.sp,
                fontWeight: MyFontWeight.regular,
              ),),
          )
        ],
      ),
    );
  }

  ///输入现在的手机号
  Widget inputPhone(){
    return Container(
      margin:EdgeInsets.only(top:phoneState == 1?15.h:12.h,bottom:21.h,),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(padding:EdgeInsets.only(bottom: 10.h),
          child: Text(
            "手机号",
            style: TextStyle(
              color: Color(0xFF181818),
              fontSize: 16.sp,
              fontWeight: MyFontWeight.bold,
            ),)),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              GestureDetector(
                  onTap: () {
                    Navigator.of(context)
                        .pushNamed('/router/phone_address_page')
                        .then((value) {
                      if (value != null)
                        setState(() {
                          area = value;
                        });
                    });
                  },
                  child: Text(
                    area,
                    style: TextStyle(
                      fontWeight: MyFontWeight.regular,
                      fontSize: 16.sp,
                      color: Color(0xFF1A1A1A),
                    ),
                  )),
              Icon(
                Icons.keyboard_arrow_right,
                size: 18,
                color: Color(0xFF1A1A1A),
              ),
              Container(
                height: 30.h,
                width: MediaQuery.of(context).size.width - 100.w,
                margin: EdgeInsets.only(bottom:Platform.isIOS ?7.h:0),
                child: TextField(
                  style: TextStyle(
                    height: 1.h,
                    fontSize: 16.sp,
                    color: Color(0xFF353535),
                  ),
                  onChanged: (value) {
                    if (value != null && value.isNotEmpty) {
                      if (isPhone(value)) {
                        mobileStatus = 1;
                      } else {
                        mobileStatus = 2;
                      }
                    } else {
                      mobileStatus = 0;
                    }
                    setState(() {});
                  },
                  controller: _controllerPhone,
                  keyboardType: TextInputType.phone,
                  decoration: InputDecoration(
                    errorBorder: InputBorder.none,
                    focusedBorder: InputBorder.none,
                    enabledBorder: InputBorder.none,
                    hintText: S.of(context).qingshurushoujihao,
                    // contentPadding: EdgeInsets.only(top: 12, bottom: 12,),
                    hintStyle: TextStyle(
                      fontSize: 14.sp,
                      color: Color(0xFFA29E9E),
                    ),
                  ),
                  textInputAction: TextInputAction.next,
                  inputFormatters: [
                    LengthLimitingTextInputFormatter(11)
                  ],
                  cursorColor: Colors.grey,
                  maxLines: 1,
                ),
              ),
            ],
          ),
          Container(
            height: 1.h,
            width: MediaQuery.of(context).size.width - 80.h,
            color: _controllerPhone.text == ""
                ? Color(0xFFE7E3E3)
                : Color(0xFF32A060),
            margin: EdgeInsets.only(top: 10.h),
          ),
          SizedBox(
            height: 30.h,
          ),
          Padding(padding:EdgeInsets.only(bottom: 10.h),
              child: Text(
                S.of(context).yanzhengma,
                style: TextStyle(
                  fontWeight: MyFontWeight.bold,
                  fontSize: 16.sp,
                  color: Color(0xFF181818),
                ),
              )),
          Container(
            height: 30.h,
            width: MediaQuery.of(context).size.width - 30.h,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Expanded(
                  child: TextField(
                    style: TextStyle(
                      height: 1.h,
                      fontSize: 16.sp,
                      color: statusCodeTextColor,
                    ),
                    onChanged: (value) {
                      if (value != null &&
                          value.isNotEmpty) {
                        if (value.length == 6) {
                          verifyStatus = 1;
                        } else {
                          verifyStatus = 2;
                        }
                      } else {
                        verifyStatus = 0;
                      }
                      setState(() {});
                    },
                    controller: _controllerCode,
                    keyboardType: TextInputType.phone,
                    decoration: InputDecoration(
                      errorBorder: InputBorder.none,
                      focusedBorder: InputBorder.none,
                      enabledBorder: InputBorder.none,
                      hintText:S.of(context).input_code_hide,
                      hintStyle: TextStyle(
                        fontSize: 14.sp,
                        color: Color(0xFFA29E9E),
                      ),
                    ),
                    textInputAction: TextInputAction.next,
                    inputFormatters: [
                      LengthLimitingTextInputFormatter(6)
                    ],
                    cursorColor: Colors.grey,
                    maxLines: 1,
                  ),
                  flex: 4,
                ),
                Expanded(
                  child: Container(
                    alignment: Alignment.bottomCenter,
                    child: InkWell(
                      onTap: (){
                        verificationCode();
                      },
                      child: BorderText(
                        text: btnText,
                        borderColor: Colors.transparent,
                        borderWidth: 1.w,
                        radius: 2,
                        padding: EdgeInsets.only(
                          left: 6.w,
                          right: 6.w,
                        ),
                        fontSize: 14.sp,
                        fontWeight: MyFontWeight.bold,
                        textColor: _sendCodeStatus == 0
                            ? Color(0xFF32A060)
                            : Color(0xFFA29E9E),
                      ),
                    ),
                  ),
                  flex: 2,
                )
              ],
            ),
          ),
          Container(
            height: 1.h,
            width: MediaQuery.of(context).size.width - 10.h,
            color: _controllerNewCode.text == ""
                ? Color(0xFFE7E3E3)
                : Color(0xFF32A060),
            margin: EdgeInsets.only(top: 10.h),
          ),
          SizedBox(
            height: 54.h,
          ),
          Align(alignment: Alignment.center,
            child: GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: (){
                modifyPhoneCode(1);
              },
              child: Container(
                decoration:BoxDecoration(
                  borderRadius: BorderRadius.circular(23),
                  color: Color(0xFF34995E),
                ),
                padding: EdgeInsets.symmetric(vertical: 12.h,horizontal:65.w),
                child: Text(
                  S.of(context).queding,
                  style: TextStyle(
                    color: Color(0xFFFFFFFF),
                    fontSize: 16.sp,
                    fontWeight: MyFontWeight.regular,
                  ),),
              ),
            ),),
        ],
      ),
    );
  }

  ///输入新的手机号
  Widget newInputPhone(){
    return Container(
      margin:EdgeInsets.only(top:15.h,bottom:21.h,),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ///手机号
          Padding(padding:EdgeInsets.only(bottom: 10.h),
              child: Text(
                "手机号",
                style: TextStyle(
                  color: Color(0xFF181818),
                  fontSize: 16.sp,
                  fontWeight: MyFontWeight.bold,
                ),)),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              GestureDetector(
                  onTap: () {
                    Navigator.of(context)
                        .pushNamed('/router/phone_address_page')
                        .then((value) {
                      if (value != null)
                        setState(() {
                          area = value;
                        });
                    });
                  },
                  child: Text(
                    area,
                    style: TextStyle(
                      fontWeight: MyFontWeight.regular,
                      fontSize: 16.sp,
                      color: Color(0xFF1A1A1A),
                    ),
                  )),
              Icon(
                Icons.keyboard_arrow_right,
                size: 18,
                color: Color(0xFF1A1A1A),
              ),
              Container(
                height: 30.h,
                width: MediaQuery.of(context).size.width - 100.w,
                margin: EdgeInsets.only(bottom:Platform.isIOS ? 10.h:0),
                child: TextField(
                  style: TextStyle(
                    height: 1.h,
                    fontSize: 16.sp,
                    color: Color(0xFF353535),
                  ),
                  onChanged: (value) {
                    if (value != null && value.isNotEmpty) {
                      if (isPhone(value)) {
                        mobileStatus = 1;
                      } else {
                        mobileStatus = 2;
                      }
                    } else {
                      mobileStatus = 0;
                    }
                    setState(() {});
                  },
                  controller: _controllerNewPhone,
                  keyboardType: TextInputType.phone,
                  decoration: InputDecoration(
                    errorBorder: InputBorder.none,
                    focusedBorder: InputBorder.none,
                    enabledBorder: InputBorder.none,
                    hintText: S.of(context).qingshurushoujihao,
                    // contentPadding: EdgeInsets.only(top: 12, bottom: 12, left: 12),
                    hintStyle: TextStyle(
                      fontSize: 14.sp,
                      color: Color(0xFFA29E9E),
                    ),
                  ),
                  textInputAction: TextInputAction.next,
                  inputFormatters: [
                    LengthLimitingTextInputFormatter(11)
                  ],
                  cursorColor: Colors.grey,
                  maxLines: 1,
                ),
              ),
            ],
          ),
          Container(
            height: 1.h,
            width: MediaQuery.of(context).size.width - 10.h,
            color: _controllerNewPhone.text == ""
                ? Color(0xFFE7E3E3)
                : Color(0xFF32A060),
            margin: EdgeInsets.only(top: 10.h),
          ),
          SizedBox(
            height: 30.h,
          ),
          ///验证码
          Padding(padding:EdgeInsets.only(bottom: 10.h),
              child: Text(
                S.of(context).yanzhengma,
                style: TextStyle(
                  fontWeight: MyFontWeight.bold,
                  fontSize: 16.sp,
                  color: Color(0xFF181818),
                ),
              )),
          Container(
            height: 30.h,
            width: MediaQuery.of(context).size.width - 30.h,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Expanded(
                  child: TextField(
                    style: TextStyle(
                      height: 1.h,
                      fontSize: 16.sp,
                      color: statusCodeTextColor,
                    ),
                    onChanged: (value) {
                      if (value != null &&
                          value.isNotEmpty) {
                        if (value.length == 6) {
                          verifyStatus = 1;
                        } else {
                          verifyStatus = 2;
                        }
                      } else {
                        verifyStatus = 0;
                      }
                      setState(() {});
                    },
                    controller: _controllerNewCode,
                    keyboardType: TextInputType.phone,
                    decoration: InputDecoration(
                      errorBorder: InputBorder.none,
                      focusedBorder: InputBorder.none,
                      enabledBorder: InputBorder.none,
                      hintText:S.of(context).input_code_hide,
                      hintStyle: TextStyle(
                        fontSize: 14.sp,
                        color: Color(0xFFA29E9E),
                      ),
                    ),
                    textInputAction: TextInputAction.next,
                    inputFormatters: [
                      LengthLimitingTextInputFormatter(6)
                    ],
                    cursorColor: Colors.grey,
                    maxLines: 1,
                  ),
                  flex: 4,
                ),
                Expanded(
                  child: Container(
                    alignment: Alignment.bottomCenter,
                    child: InkWell(
                      onTap:(){
                        verificationCode();
                      },
                      child: BorderText(
                        text: btnText,
                        borderColor: Colors.transparent,
                        borderWidth: 1.w,
                        radius: 2,
                        padding: EdgeInsets.only(
                          left: 6.w,
                          right: 6.w,
                        ),
                        fontSize: 14.sp,
                        fontWeight: MyFontWeight.bold,
                        textColor: _sendCodeStatus == 0
                            ? Color(0xFF32A060)
                            : Color(0xFFA29E9E),
                      ),
                    ),
                  ),
                  flex: 2,
                )
              ],
            ),
          ),
          Container(
            height: 1.h,
            width: MediaQuery.of(context).size.width - 10.h,
            color: _controllerNewCode.text == ""
                ? Color(0xFFE7E3E3)
                : Color(0xFF32A060),
            margin: EdgeInsets.only(top: 10.h),
          ),
          SizedBox(
            height: 54.h,
          ),
          Align(alignment: Alignment.center,
            child: GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: (){
                modifyPhoneCode(2);
              },
              child: Container(
                decoration:BoxDecoration(
                  borderRadius: BorderRadius.circular(23),
                  color: Color(0xFF34995E),
                ),
                padding: EdgeInsets.symmetric(vertical: 12.h,horizontal:65.w),
                child: Text(
                  "下一步",
                  style: TextStyle(
                    color: Color(0xFFFFFFFF),
                    fontSize: 16.sp,
                    fontWeight: MyFontWeight.regular,
                  ),),
              ),
            ),),
        ],
      ),
    );
  }

  Widget bindingSuccess(){
    return Container(
      alignment: Alignment.center,
      margin: EdgeInsets.only(top: 31.h),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Image.asset(
            "assets/image/icon_order_success.webp",
            fit: BoxFit.cover,
            width: 76,
            height: 76,
          ),
          SizedBox(
            height: 16.h,
          ),
          Text(
            "新号码绑定成功",
            style: TextStyle(
              fontWeight: MyFontWeight.semi_bold,
              fontSize: 18.sp,
              color: Color(0xFF353535),
            ),
          ),
          SizedBox(
            height: 99.h,
          ),
          GestureDetector(
            onTap: () {
              Navigator.of(context).pop();
            },
            child: Container(
              decoration:BoxDecoration(
                borderRadius: BorderRadius.circular(23),
                color: Color(0xFF34995E),
              ),
              padding: EdgeInsets.symmetric(vertical: 14.h,horizontal:65.w),
              child: Text(
                S.of(context).queren,
                style: TextStyle(
                  color: Color(0xFFFFFFFF),
                  fontSize: 16.sp,
                  fontWeight: MyFontWeight.regular,
                ),),
            ),
          )
        ],
      ),
    );
  }
}