import React, {forwardRef} from "react";
import { Button, Form, Input, message } from "antd";
import gitHub from '../../img/github.png';
import gitee from '../../img/gitee.png';
import '../index.scss';
import axios from "axios";

function EditStore(props){
  const { form, history} = props;
  const { owner , projectsId } = props.match.params;
  const { getFieldDecorator, validateFields , setFieldsValue, setFields } = form;

  function submit() {
    validateFields((error,values)=>{
      setFields({
        'github_address':{value: values.github_address, errors: null},
        'github_token':{value: values.github_token, errors: null},
        'gitee_address':{value: values.gitee_address, errors: null},
        'gitee_token':{value: values.gitee_token, errors: null}
      })
      if(!error){
        // 处理空值
        for(let i in values){
          if(!values[i]){
            delete values[i];
          }
        }
        const keysArr = Object.keys(values);
        if(keysArr.indexOf('github_address') === -1 && keysArr.indexOf('gitee_address') === -1){
          // 校验必填一个github或者gitee地址
          form.setFields({github_address: {value:values.github_address,errors:[new Error('请至少输入一个地址')]}});
          form.setFields({gitee_address: {value:values.gitee_address,errors:[new Error('请至少输入一个地址')]}});
        }else if(keysArr.indexOf('github_address') !== -1 && keysArr.indexOf('github_token') === -1){
          form.setFields({github_token: {value:values.github_token,errors:[new Error('请输入Github的授权token')]}});
        }else if(keysArr.indexOf('gitee_address') !== -1 && keysArr.indexOf('gitee_token') === -1){
          form.setFields({gitee_token: {value:values.gitee_token,errors:[new Error('请输入Gitee的授权token')]}});
        }else{
          axios.post(`/${owner}/${projectsId}/synchronizes.json`,values).then(res=>{
            if(res && res.data.message === "success"){
              message.success('绑定成功');
              window.location.href = `/${owner}/${projectsId}/service/reposyncer`;
            }else{
              // message.error('绑定失败');
            }
          })
        }
      }
    })
  }

  return <div className="storeListBox mt20">
    <div className="registerBox">
      <Form>
        <div className="storeTitle pb10 mb15"><img src={gitHub} alt="" className="storeLogo"/></div>
        <Form.Item label="Github同步仓库地址" className="storeFormItem">
          {getFieldDecorator("github_address",{
            rules:[]
          })(
            <Input placeholder="请输入Github目标版本库地址" className="storeInput"/>
          )}
        </Form.Item>
        <Form.Item label="Github同步仓库授权验证" className="storeFormItem">
          {getFieldDecorator("github_token",{
            rules:[]
          })(
            <Input addonBefore="token" placeholder="请输入Github的授权token" className="storeInput"/>
          )}
        </Form.Item>
        <div className="storeTitle pb10 mb15 pt20"><img src={gitee} alt="" className="storeLogo"/></div>
        <Form.Item label="Gitee同步仓库地址" className="storeFormItem">
          {getFieldDecorator("gitee_address",{
            rules:[]
          })(
            <Input placeholder="请输入Gitee目标版本库地址" className="storeInput"/>
          )}
        </Form.Item>
        <Form.Item label="Gitee同步仓库授权验证" className="storeFormItem">
          {getFieldDecorator("gitee_token",{
            rules:[]
          })(
            <Input addonBefore="token" placeholder="请输入Gitee的授权token" className="storeInput"/>
          )}
        </Form.Item>
        <div className="tipStoreBox">
          1、在开启仓库同步前，您需要绑定并授权目标同步仓库；<br/>
          2、完成仓库绑定后，需对仓库内的分支进行二次绑定。当已绑定的分支有代码提交、代码推送变更，将实时同步更新至其他仓库；<br/>
          3、目前仅提供Github与Gitee平台的仓库同步功能，每个平台支持同时同步一个仓库；
        </div>
        <Form.Item>
          <Button type="primary" style={{width: '112px', height: '36px'}} onClick={submit}>确认绑定</Button>
          <Button style={{width: '112px', height: '36px'}} className="ml40" onClick={()=>{history.goBack(-1)}}>取消</Button>
        </Form.Item>
      </Form>
    </div>
  </div>
}
export default Form.create()(forwardRef(EditStore));