import 'package:dio/dio.dart';
import 'package:fast/constants.dart';
import 'package:fast/utils/api.dart';
import 'package:fast/utils/http_utils.dart';
import 'package:fast/utils/size_fit.dart';
import 'package:fast/view/phone_code.dart';
import 'package:fast/view/web.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';

import 'component/fast_btn.dart';
import 'component/header.dart';
import 'component/toast.dart';

class Phone extends StatefulWidget {
  int type; //1 login 2 bind phone
  Phone({Key? key, required this.type}) : super(key: key);

  @override
  State<Phone> createState() => _PhoneState();
}

class _PhoneState extends State<Phone> {
  String code = '';
  bool showError = false;
  @override
  Widget build(BuildContext context) {
    SizeFit.initialize(context);
    return Material(
        child: Container(
            color: kBgColor,
            child: Column(children: [
              Stack(
                children: [
                  Header(
                    isIndexPage: false,
                  ),
                  Positioned(
                    left: 16.px,
                    top:54.px,
                      child: GestureDetector(onTap: () => Navigator.pop(context),child: Container(
                        width: 32.px,
                        height: 32.px,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(16.px)),
                          color: const Color(0x33000000)
                        ),
                    child: Image.asset(
                      'assets/images/naviback.png',
                      width: 20.px,
                      height: 20.px,
                      fit: BoxFit.cover,
                    )
                  ),))
                ],
              ),
              SizedBox(
                height: 50.px,
              ),
              Opacity(
                opacity: showError ? 1 : 0,
                child: Text(
                  '手机号错误，请重新输入',
                  style: TextStyle(color: kThemeColor, fontSize: 12.px),
                ),
              ),
              SizedBox(
                height: 10.px,
              ),
              Stack(
                children: [
                  Container(
                    width: 311.px,
                    height: 48.px,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        color: const Color(0x26C4CCDA),
                        borderRadius: BorderRadius.all(Radius.circular(16.px))),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        SizedBox(
                          width: 14.px,
                        ),
                        Text(
                          '+86',
                          style: TextStyle(
                              color: const Color(0x66FFFFFF),
                              fontWeight: FontWeight.bold,
                              fontSize: 14.px),
                        ),
                        SizedBox(
                          width: 8.px,
                        ),
                        Image.asset(
                          'assets/images/arrow.png',
                          width: 16.px,
                          height: 16.px,
                        ),
                        SizedBox(
                          width: 16.px,
                        ),
                        Expanded(
                            child: Container(
                          alignment: Alignment.centerLeft,
                          padding: EdgeInsets.only(bottom: 5.px),
                          color: Colors.transparent,
                          child: TextField(
                            onChanged: (value) {
                              setState(() {
                                code = value;
                              });
                            },
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 16.px,
                                fontFamily: 'Exo2',
                                fontWeight: FontWeight.w600),
                            cursorColor: Colors.white,
                            maxLength: 11,
                            autofocus: false,
                            textAlign: TextAlign.left,
                            keyboardType: TextInputType.number,
                            decoration: InputDecoration(
                                counterText: "",
                                hintText: "请输入您的手机号",
                                border: InputBorder.none,
                                contentPadding: EdgeInsets.zero,
                                hintStyle: TextStyle(
                                    color: const Color(0x66FFFFFF),
                                    fontSize: 16.px,
                                    height: 1.0)),
                          ),
                        ))
                      ],
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 28.px,
              ),
              FastBtn(
                  title: '下一步',
                  disable: code.length != 11,
                  // color: const Color(0x80AAFF00),
                  width: 311.px,
                  height: 48.px,
                  callback: () {
                    next();
                  }),
              SizedBox(
                height: 30.px,
              ),
              if (widget.type == 1)
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      '登录即表示同意',
                      style: TextStyle(color: Colors.white, fontSize: 12.px),
                    ),
                    GestureDetector(
                      onTap: () {
                        Get.to(() => Web(
                              title: '隐私政策',
                              url: 'https://www.baidu.com',
                            ));
                      },
                      child: Text(
                        ' 用户协议',
                        style: TextStyle(color: kThemeColor, fontSize: 12.px),
                      ),
                    ),
                    Text(
                      ' 和 ',
                      style: TextStyle(color: Colors.white, fontSize: 12.px),
                    ),
                    GestureDetector(
                      onTap: () {
                        Get.to(() => Web(
                              title: '隐私政策',
                              url: 'https://www.baidu.com',
                            ));
                      },
                      child: Text(
                        '隐私条款',
                        style: TextStyle(color: kThemeColor, fontSize: 12.px),
                      ),
                    )
                  ],
                ),
            ])));
  }

  Future next() async {
    if (!isChinaPhoneLegal(code)) {
      setState(() {
        showError = true;
      });
      return;
    }
    setState(() {
      showError = false;
    });

    var data = await HttpUtils.post(Api.sendCode, data: {'mobile': code});
    Get.to(() => PhoneCode(
          phone: code,
          type: widget.type,
        ));
  }

  bool isChinaPhoneLegal(String str) {
    return RegExp(
            '^((13[0-9])|(15[^4])|(166)|(17[0-8])|(18[0-9])|(19[8-9])|(147,145))\\d{8}\$')
        .hasMatch(str);
  }

  Future invite() async {
    try {
      Map<String, dynamic> data =
          await HttpUtils.post(Api.inviteCode, data: {'mobile': code});
      showToast();
      Navigator.of(context).pop();
    } on DioError catch (e) {
      if (e.response?.data['error_code'] == 'INVITE_CODE_NOT_EXIST') {
        setState(() {
          showError = true;
        });
      }
    }
  }

  showToast() {
    showDialog(
        context: context,
        barrierDismissible: false,
        barrierColor: Colors.transparent,
        builder: (BuildContext context) {
          return Toast(
            title: '成功受邀',
            content: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  '+3',
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 16.px,
                      fontWeight: FontWeight.w800,
                      fontFamily: 'Exo2',
                      decoration: TextDecoration.none),
                ),
                SizedBox(
                  width: 3.px,
                ),
                Image.asset(
                  'assets/images/stone.png',
                  width: 24.px,
                  height: 24.px,
                )
              ],
            ),
          );
        });
  }

  Future jump() async {
    var data = await HttpUtils.post(Api.inviteCode, data: {'skip': true});
    Navigator.of(context).pop();
  }
}