import React, {useState} from 'react';
import { Button, Modal, Input, Select, message } from 'antd';
import axios from 'axios';
const {Option} = Select;

function DeleteBox({owner, projectsId, visible, setVisible, createJobBy, branchOptions, reload}) {
  const [error, setError] = useState(undefined);
  const [errorByOther, setErrorByOther] = useState(undefined);
  const [branch, setBranch] = useState(undefined);
  const [branchByOther, setBranchByOther] = useState(undefined);

  // 新建同步分支点击函数
  function createNew(){
    if(branch && branchByOther){
      // 新建同步分支
      const param = {
        gitlink_branch: branch,
        job_type: 'TwoWay',
        github_branch: undefined,
        gitee_branch: undefined
      }
      createJobBy === 'Github' ? (param.github_branch = branchByOther) : (param.gitee_branch = branchByOther)
      axios.post(`/${owner}/${projectsId}/synchronizes/create_jobs.json`,param).then(res=>{
        if(res && res.data.message === "success"){
          setBranch(undefined);
          setBranchByOther(undefined);
          reload && reload(Math.random());
          message.success('新建成功');
          setVisible(false);
        }
      })
    }else{
      !branch && setError('请选择仓库分支')
      !branchByOther && setErrorByOther('请输入仓库分支')
    }
  }

  return(
    <Modal
      title="新建同步分支"
      visible={visible}
      onCancel={()=>{setVisible(false)}}
      footer={<div><Button style={{width: '104px', height:'36px'}} onClick={()=>{setVisible(false)}}>取消</Button><Button type="primary" style={{width: '104px', height:'36px', marginLeft: '40px'}} onClick={createNew}>确认</Button></div>}
      width={550}
      className="cancelBound createJobBox"
    >
      <div className="itemBox mt10">
        <label className="labelBox font-16"><i className="iconfont icon-a-bitian2x font-12"></i>  {createJobBy}分支:</label>
        <Input placeholder="请输入分支名称" className="inputBox" value={branchByOther} onChange={(e)=>setBranchByOther(e.target.value)} maxLength={50}/>
        <div className="errorBox">{errorByOther}</div>
      </div>
      <div className="itemBox mt30 mb20">
        <label className="labelBox font-16"><i className="iconfont icon-a-bitian2x font-12"></i>  GitLink分支:</label>
        <Select
          value={branch}
          onSelect={(e) => {setBranch(e)}}
          showSearch
          className="inputBox"
          dropdownMatchSelectWidth={false}
          dropdownClassName="overlihide"
          placeholder="请选择仓库分支"
          getPopupContainer={trigger => trigger.parentNode}
        >
          {branchOptions && branchOptions.map((item, key) => {
          return (
            <Option key={key + 1} value={item.name}>
              {item.name}
            </Option>
          )})}
        </Select>
        <div className="errorBox">{error}</div>
      </div>
    </Modal>
  )
}
export default DeleteBox;