import React , { forwardRef, useState } from 'react';
import { Link } from 'react-router-dom';
import { Button, Form , Input } from 'antd';
import Axios from 'axios';

const { TextArea } = Input;
function New({ form , showNotification , history }) {
  const { getFieldDecorator, validateFields , setFieldsValue } = form;
  const [ msg , setMsg ] = useState(undefined);

  function submit() {
    validateFields((error,values)=>{
      if(!error){
        const url = `/public_keys.json`;
        Axios.post(url,{
          ...values
        }).then(result=>{
          if(result){
            if(result.data.status === 0){
              history.push(`/settings/SSH`);
              showNotification("密钥创建成功!");
            }
            let s = {
              status:result.data.status,
              message:result.data.message
            }
            setMsg(s);
          }
        }).catch(error=>{})
      }
    })
  }

  return(
    <div>
      <div className="sshHead">
        <span className="add-SSH-title"><Link to={`/settings/SSH`} className="blue-Purple">SSH密钥</Link><i className="iconfont icon-youjiantou ml5 mr5 font-12"></i>添加SSH密钥</span>
      </div>
      <Form className="sshForm">
        <Form.Item label="标题" validateStatus={msg && msg.status === 10001 ? "error":undefined} help={msg && msg.status === 10001 ? msg.message:undefined}>
          {getFieldDecorator("title",{
            rules:[{required:true,message:"请输入密钥标题"}]
          })(
            <Input placeholder="请输入密钥标题" size="large" maxLength="200"/>
          )}
        </Form.Item>
        <Form.Item label="密钥" validateStatus={msg && msg.status === 10002 ? "error":undefined} help={msg && msg.status === 10002 ? msg.message:undefined}>
          {getFieldDecorator("key",{
            rules:[{required:true,message:"请输入密钥"}]
          })(
            <TextArea placeholder="支持以'ssh-rsa','ssh-dss','ssh-ed25519','ecdsa-sha2-nistp256','ecdsa-sha2-nistp384','ecdsa-sha2-nistp521'开头" autoSize={{ minRows: 6, maxRows: 6 }}/>
          )}
        </Form.Item>
        <button style={{width:"100px"}} onClick={submit} className="but25">确定</button>
      </Form>
    </div>
  )
}
export default Form.create()(forwardRef(New));