import React , { forwardRef, useState } from 'react';
import { Form , Input , Button } from 'antd';
import { AlignCenter } from '../../Component/layout';
import Axios from 'axios';


export default Form.create()(
  forwardRef((props)=>{
    const { getFieldDecorator, validateFields , setFieldsValue } = props && props.form;
    const { username } = props && props.match && props.match.params;
    const { current_user} = props;

    const [ oldPass , setOldPass ] = useState(undefined);
    const [ oldPassRepeat , setOldPassRepeat ] = useState(undefined);

    function submit() {
      validateFields((error,values)=>{
        if(!error){
          submitFunc(values);
        }
      })
    }

    function submitFunc(values) {
      const url = `/accounts/change_password.json`;
      Axios.post(url,{
        login:current_user && current_user.login,
        ...values
      }).then(result=>{
        if(result && result.data){
          props.showNotification("密码重置成功！")
        }
      }).catch(error=>{})
    }

    // 判断两次输入的密码是否一致
    function checkIdentifier(rule, value, callback , inputValue){
      if(!value){
        callback();
      }
      if (value && inputValue && value !== inputValue) {
        callback("两次输入的密码不一致");
      }
      callback();
    }       
     var reg = /(?!.*\s)(?!^[\u4e00-\u9fa5]+$)(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{8,16}$/;

    function checkNewPass(rule, value, callback) {
      if(!value){
        callback();
      }
      if (!reg.test(value)) {
        callback("8-16个字符,不包含空格,必须包含数字,字母或字符至少两种");
      }
      callback();
    }
 
    return(
      <Form layout={'inline'} className="formBase passMan">
        <Form.Item label="旧密码">
          {getFieldDecorator("old_password",{
            rules:[
              {required:true,message:"请输入旧密码"},
              {validator:(rule, value, callback)=>checkIdentifier(rule, value, callback,oldPassRepeat)}
            ]
          })(
            <Input.Password placeholder="请输入旧密码" style={{width:"400px"}} onChange={(e)=>{setOldPass(e.target.value)}}/>
          )}
        </Form.Item>
        <Form.Item label="重复旧密码">
          {getFieldDecorator("old_password_repeat",{
            rules:[
              {required:true,message:"请重新输入旧密码"},
              {validator:(rule, value, callback)=>checkIdentifier(rule, value, callback,oldPass)}
            ]
          })(
            <Input.Password placeholder="请重新输入旧密码" style={{width:"400px"}} onChange={(e)=>{setOldPassRepeat(e.target.value)}}/>
          )}
        </Form.Item>
        <Form.Item label="新密码">
          {getFieldDecorator("password",{
            rules:[
              {required:true,message:"请输入新密码"},
              {validator:checkNewPass}
            ]
          })(
            <Input.Password placeholder="请输入新密码" style={{width:"400px"}}/>
          )}
        </Form.Item>
        <AlignCenter style={{marginTop:"20px"}}>
          <span className="ant-form-item-label"></span>
          <Button className="but25" type={"primary"} onClick={submit}>提交</Button>
          <Button type={"default"} onClick={()=>props.history.push(`/${username}`)} className="ml20">取消</Button>
        </AlignCenter>
      </Form>
    )
  })
)