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 { current_user} = props;

    const [ NewPass , setNewPass ] = useState(undefined);
    const [ NewPassRepeat , setNewPassRepeat ] = 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=>{})
    }

    // 判断两次输入的密码是否一致
     var reg = /(?!.*\s)(?!^[\u4e00-\u9fa5]+$)^.{8,16}$/;
    function checkIdentifier(rule, value, callback , inputValue){
      if(!value){
        callback();
      }
      if (value && !inputValue && !reg.test(value)) {
        callback("请输入8-16位密码，区分大小写、不能使用空格");
      } 
      if (value && inputValue && value !== inputValue) {
        callback("两次输入的密码不一致");
      }
      callback();
    }       

    function checkNewPass(rule, value, callback,newpassrepeat) {
      if(!value){
        callback();
      }
      if (!reg.test(value)) {
        callback("请输入8-16位密码，区分大小写、不能使用空格");
      }
      if(value && newpassrepeat && newpassrepeat!==value){
        callback("两次输入的密码不一致");
      }
      callback();
    }
 
    return(
      <Form layout={'inline'} className="formBase passMan">
        <Form.Item label="旧密码">
          {getFieldDecorator("old_password",{
            rules:[
              {required:true,message:"请输入旧密码"}
            ]
          })(
            <Input.Password placeholder="请输入旧密码" autoComplete={"new-password"} style={{width:"400px"}}/>
          )}
        </Form.Item>
        <Form.Item label="新密码">
          {getFieldDecorator("password",{
            rules:[
              {required:true,message:"请输入新密码"},
              {validator:(rule, value, callback)=>checkNewPass(rule, value, callback,NewPassRepeat)}
            ]
          })(
            <Input.Password placeholder="请输入新密码" style={{width:"400px"}} onChange={(e)=>{setNewPass(e.target.value)}}/>
          )}
        </Form.Item>
        <Form.Item label="确认新密码">
          {getFieldDecorator("new_password_repeat",{
            rules:[
              {required:true,message:"请重新输入新密码"},
              {validator:(rule, value, callback)=>checkIdentifier(rule, value, callback,NewPass)}
            ]
          })(
            <Input.Password placeholder="请重新输入新密码" style={{width:"400px"}} onChange={(e)=>{setNewPassRepeat(e.target.value)}}/>
          )}
        </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(`/${current_user && current_user.login}`)} className="ml20">取消</Button>
        </AlignCenter>
      </Form>
    )
  })
)