import React ,{ useState , useRef } from 'react';
import { Form , Input , Button  , message } from 'antd';
import user from "./image/user.png";
import lock from "./image/lock.png";
import shield from './image/shield.png';
import phone from './image/phone.svg';
import axios from 'axios';
import cookie from 'react-cookies';
import { setmiyah } from 'educoder';

const phonereg = /^([1][3456789])\d{9}$/
const emailreg = /^[a-zA-Z0-9]+([.\-_\\]*[a-zA-Z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
function Bind(props){
  const { form } = props;
  const seconds = useRef();
  let interval = undefined;
  const { getFieldDecorator , getFieldsValue } = form;
  const [ bindFlag , setBindFlag]  = useState(true);
  const [ captchaFlag , setCaptchaFlag ] = useState(true);
  const [secondsStr, setSecondsStr] = useState(60);
  const [ getCaptchaBut , setGetCaptchaBut ] = useState(true);

  const type = props.match.params.type;
  
  //判断用户名（username）是否注册
  function usernameConfirm(rule, value, callback){
    value ? axios.post(`/accounts/check.json`, {
      value: value,
      type: 1
    }).then(response => {
      if(response){
        if (response.data.status === -1) {
          callback('该名称已经被使用');
        } else {
          const { captcha , password  , confirm_password,username} = getFieldsValue();
          if( captcha && password && confirm_password && (password === confirm_password) &&(phonereg.test(username) || emailreg.test(username)) ){
            setBindFlag(false);
          }
        }
      }
      callback();
    }):callback();
  }

  function accountConfirm(rule, value, callback){
    if(value){
      const { captcha , password , confirm_password,register_username} = getFieldsValue();
      if(!(phonereg.test(value) || emailreg.test(value))){
        setCaptchaFlag(true);
        callback(`请输入正确的手机号或邮箱地址`);
      }else{
        axios.get(`/accounts/valid_email_and_phone.json`, {
          params: {
            login: value,
            type: 1
          }
        }).then(response => {
          if(response){
            if (response.data.status === -2) {
              callback(response.data.message);
            } else {
              setCaptchaFlag(false);
              if(captcha && password && confirm_password && (password === confirm_password) && register_username){
                setBindFlag(false);
              }
            }
            callback();
          }
        })
      }
    }else{
      setBindFlag(true);
      callback();
    }
  }
  function psdConfirm(r,v,c){
    if(!v){
      setBindFlag(true);
      c('请输入登录密码');
    }else if(/(?!.*\s)(?!^[\u4e00-\u9fa5]+$)^.{8,16}$/.test(v)){
      const { username , captcha , confirm_password , register_username } = getFieldsValue();
      if(register_username && (phonereg.test(username) || emailreg.test(username)) && captcha && confirm_password && (v=== confirm_password) ){
        setBindFlag(false);
      }else{
        setBindFlag(true);
      }
      c()
    }else{
      if(v.length<8 || v.length>16){
        setBindFlag(true);
        c('密码长度为8-16个字符');
      }else{
        setBindFlag(true);
        c('密码不能使用空格');
      }
    }
  }
  function captchaConfirm(r,v,c){
    if(v){
      const { username , password , confirm_password , register_username } = getFieldsValue();
      if(register_username && (phonereg.test(username) || emailreg.test(username)) && password && confirm_password && (password ===confirm_password) ){
        setBindFlag(false);
      }else{
        setBindFlag(true);
      }
      c();
    }else{
      c();
      setBindFlag(true);
    }
  }
  function repsdConfirm(r,v,c){
    if(!v){
      setBindFlag(true);
      c("请重复输入登录密码");
    }else if(/(?!.*\s)(?!^[\u4e00-\u9fa5]+$)^.{8,16}$/.test(v)){
      const { username , password , register_username , captcha} = getFieldsValue();
      if(v !== password){
        c("两次输入的密码不一样");
      }else if((phonereg.test(username) || emailreg.test(username)) && password && register_username && captcha){
        setBindFlag(false);
      }else{
        setBindFlag(true);
      }
      c();
    }else{
      if(v.length<8 || v.length>16){
        setBindFlag(true);
        c('密码长度为8-16个字符');
      }else{
        setBindFlag(true);
        c('密码不能使用空格');
      }
    }
    if(v){
      const { username , password , register_username , captcha} = getFieldsValue();
      if(v !== password){
        c("两次输入的密码不一样");
      }else{
        c();
      }
      if((phonereg.test(username) || emailreg.test(username)) && password && register_username && captcha){
        setBindFlag(false);
      }else{
        setBindFlag(true);
      }
      c();
    }else{
      c();
    }
  }

  //获取验证码
  function getCaptcha() {
    const { username }= getFieldsValue();
    if (username) {
      // 倒计时开始
      setCaptchaFlag(true);
      setGetCaptchaBut(false);
      seconds.current = 60;
      setSecondsStr(60);
      !interval && clearInterval(interval);
      interval = setInterval(() => {
        if (seconds.current > 1) {
          let oldSeconds = seconds.current;
          seconds.current = oldSeconds - 1;
          setSecondsStr(oldSeconds - 1);
        } else {
          clearInterval(interval);
          //倒计时结束->可以获取验证码
          setCaptchaFlag(false);
          setGetCaptchaBut(true);
        }
      }, 1000)

      //请求获取验证码接口
      axios.get(`/accounts/get_verification_code.json`, {
        params: {
          login: username,
          type: 1,
          smscode: setmiyah(username),
        }
      }).then(response => {
        if (response.data && response.data.status === 0) {
          //验证码发送成功
          setGetCaptchaBut(false);
        }
      })
    }
  }
  // 绑定登录
  function bindRegFunc(){
    form.validateFields((err, values) => {
      if (!err) {
        var url = '/accounts/register.json';
        axios.post(url,{
          namespace: values.register_username,
          login: values.username,
          password: values.password,
          password_confirmation: values.confirm_password,
          code: values.captcha,
          type
        }).then(response=>{
          if(response.data && response.data.status === -6){
            //验证码不正确
            form.setFields({captcha: {value:values.captcha,errors:[new Error('验证码错误，请重新输入')]}});
            
          }else if(response.data && response.data.status === 0){
            //注册成功，页面跳转即可，注册后登录流程forge处理了
            cookie.save("supplyphone",true);
            cookie.save("login",response.data.login);
            window.location.href = "/"+values.register_username;
          }
        })
      }
    })
  }
  return(
    <div>
      <Form className="bind_form">
        <Form.Item>
          {getFieldDecorator('register_username',{
            rules:[
              {
                required:true,
                message:"请输入用户名"
              },
              {
                pattern: /^[a-zA-Z]/,
                message: "用户名必须以字母开头"
              },
              {
                pattern: /[a-zA-Z0-9]$/,
                message: "用户名只能使用英文字母和数字"
              },
              {
                min: 4,
                max: 15,
                message: "用户名长度为4到15个字符"
              },
              {
                validator: (rule, value, callback) => { usernameConfirm(rule, value, callback) }
              }
            ],
            validateTrigger:"onBlur",
            validateFirst: true,
          })(<Input placeholder="请输入4-15位用户名，以字母开头，只能使用字母和数字"  addonBefore={<img src={user} alt="" width="13px" />} size="large" autoComplete="off"/>)}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('username',{
            rules:[
              {
                required:true,
                message:"请输入手机号或邮箱地址"
              },
              {
                validator: (rule, value, callback) => { accountConfirm(rule, value, callback) }
              }
            ],
            validateTrigger:"onBlur",
            validateFirst: true,
          })(<Input className="account" addonBefore={<img src={phone} alt="" width="13px" />} size="large" placeholder="请输入手机号或邮箱地址"/>)}
        </Form.Item>
        <Form.Item>
          <div className="login_register_head">
            {getFieldDecorator('captcha', {
              rules: [{
                required: true,
                message: "请输入验证码"
              },
              {
                validator: (rule, value, callback) => { captchaConfirm(rule, value, callback) }
              }],
              validateTrigger: "onInput",
            })(
              <Input className="captcha" size="large" addonBefore={<img src={shield} alt="" width="13px" />} placeholder="请输入验证码" autoComplete="off"/>
            )}
            <Button type="primary" ghost size="large" className={captchaFlag ? 'codeBut disable':'codeBut'} disabled={captchaFlag} onClick={getCaptcha}>{getCaptchaBut ? "获取验证码":`重发(${secondsStr}s)`}</Button>
          </div>
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('password', {
            rules: [
              {
                required:true,
                message:"请输入登录密码"
              },
              {
                validator: (rule, value, callback) => { psdConfirm(rule, value, callback) }
              }
            ],
            validateTrigger:"onInput",
          })(
            <Input.Password autoComplete="new-password" addonBefore={<img src={lock} alt="" width="13px" />} className="psd" size="large" placeholder="请输入登录密码" />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('confirm_password', {
            rules: [
              {
                required:true,
                message:"请再次输入登录密码"
              },
              {
                validator: (rule, value, callback) => { repsdConfirm(rule, value, callback) }
              }
            ],
            validateTrigger:"onInput",
          })(
            <Input.Password autoComplete="new-password" addonBefore={<img src={lock} alt="" width="13px" />} className="psd" size="large" placeholder="请确认登录密码" />,
          )}
        </Form.Item>
        <Button type="primary" disabled={bindFlag} size="large" style={{width:"100%",marginTop:"40px"}} onClick={bindRegFunc}>
          注册并登录
        </Button>
      </Form>
    </div>
  )
}
export default Form.create({ name: 'Bind' })(Bind);