import React, { useEffect, useState} from "react";
import { Button, Modal, Icon, message, Select, Input, Tooltip } from "antd";
import { Link } from "react-router-dom";
import gitHub1 from '../../img/github2.svg';
import gitee1 from '../../img/gitee1.svg';
import logo from '../../img/logo2.png';
import '../index.scss';
import axios from "axios";
import CreateJobModal from './createJobModal';

function StoreList(props){
  const { storeDetail} = props;
  const { owner , projectsId } = props.match.params;
  const [visible, setVisible] = useState(false);
  const [visibleNew, setVisibleNew] = useState(false);
  const [createJobBy, setCreateJobBy] = useState("Github");
  const [branchOptions, setBranchOptions] = useState([]);

  useEffect(()=>{
    axios.get(`/${owner}/${projectsId}/pulls/get_branches.json`, {}).then(res=>{
      res && setBranchOptions(res.data);
    })
  }, [])

  // 取消仓库绑定点击函数
  function updateStore(){
    axios.delete(`/${owner}/${projectsId}/synchronizes/delete.json`).then(res=>{
      if(res && res.data.message === "success"){
        message.success('取消绑定成功');
        setVisible(false);
        props.history.push(`/${owner}/${projectsId}/service`)
      }
    })
  }


  return <div className="storeListBox">
    <div className="headBox font-16 pl15">Reposyncer仓库同步服务
      {storeDetail !== null && <Tooltip title="Reposyncer仓库同步系统提供跨托管平台的项目协同开发同步功能。支持用户在任何一个托管平台上的代码提交、代码推送、合并请求等操作自动同步至其他托管平台。不仅增加每个开源项目与开发者的流量，也使不同平台的开源项目维护与更新变得方便与快捷" overlayStyle={{width: 400}}><span className="helpBox1 font-12 ml10">?</span></Tooltip>}
    </div>
    {/* 空数据 */}
    {!storeDetail && <div className="nullStoreBox mt25">
      <img src={logo} alt="" className="loBox mt50"/>
      <p className="font-22 mt10">欢迎使用跨平台代码同步服务</p>
      <div className="introBox font-15">跨平台代码同步服务提供跨托管平台的项目协同开发同步功能。支持用户在任何一个托管平台上的代码提交、代码推送、合并请求等操作自动同步至其他托管平台。不仅增加每个开源项目与开发者的流量，也使不同平台的开源项目维护与更新变得方便与快捷</div>
      <div className="borBox"></div>
      <Button type="primary" style={{width: '112px', height: '36px'}}><Link to={`/${owner}/${projectsId}/service/reposyncer/store/edit`}>开始体验</Link></Button>
    </div>}
    {/* 已绑定仓库信息 */}
    {storeDetail && <div className="listStore mt20">
      <div className="storeTitle pb5 mb5 font-18">已绑定仓库地址<Icon type="exclamation-circle" style={{color: '#466aff'}} className="ml10 font-14"/><span className="ml5 font-14" style={{fontWeight: 'normal'}}>对已绑定的仓库，请添加同步分支实现分支的跨平台双向同步</span></div>
      {storeDetail && storeDetail.github_address && <div className="showStoreInfo dashedBor">
        <div className="storeInfoBox">
          <div className="font-15 sTil"><img src={gitHub1} alt="" className="mr10"/><span>Github仓库地址</span></div>
          <span>{storeDetail && storeDetail.github_address}</span>
        </div>
        <div>
          <Button style={{width: '94px', height:'36px', padding: 0}} className="blue_border_but mr20"><Link to={`/${owner}/${projectsId}/service/reposyncer/record/github`}>查看同步分支</Link></Button>
          <Button style={{width: '94px', height:'36px', padding: 0}} className="blue_border_but" onClick={()=>{setVisibleNew(true);setCreateJobBy('Github')}}>新建同步分支</Button>
        </div>
      </div>}
      {storeDetail && storeDetail.gitee_address && <div className="showStoreInfo">
        <div className="storeInfoBox">
          <div className="font-15 sTil"><img src={gitee1} alt="" className="mr10"/><span>Gitee仓库地址</span></div>
          <span>{storeDetail.gitee_address}</span>
        </div>
        <div>
          <Button style={{width: '94px', height:'36px', padding: 0}} className="blue_border_but mr20"><Link to={`/${owner}/${projectsId}/service/reposyncer/record/gitee`}>查看同步分支</Link></Button>
          <Button style={{width: '94px', height:'36px', padding: 0}} className="blue_border_but" onClick={()=>{setVisibleNew(true);setCreateJobBy('Gitee')}}>新建同步分支</Button>
        </div>
      </div>}
      {/* <Button type="primary" style={{width: '134px', height:'36px', padding: 0}} className="mt30"><Link to={`/${owner}/${projectsId}/service/reposyncer/store/edit`}>更改绑定仓库信息</Link></Button> */}
      <Button style={{width: '134px', height:'36px'}} className="red_border_but mt40" onClick={()=>{setVisible(true)}}>清空仓库绑定</Button>
    </div>}
    <Modal
      title="取消绑定"
      visible={visible}
      onCancel={()=>{setVisible(false)}}
      footer={<div><Button style={{width: '90px', height:'36px'}} onClick={()=>{setVisible(false)}}>取消</Button><Button className="okBut" style={{width: '90px', height:'36px'}} onClick={updateStore}>确认清空</Button></div>}
      width={535}
      className="cancelBound"
    >
      <div className="bTilModal font-16"><span className="errorRedSpan font-18 mr20 mt20 ml15">!</span>您确定要清空已绑定仓库？</div>
      <div className="sTilModal">此操作将清空所有绑定仓库/绑定分支及同步日志，请谨慎操作</div>
    </Modal>
    <CreateJobModal owner={owner} projectsId={projectsId} visible={visibleNew} setVisible={setVisibleNew} createJobBy={createJobBy} branchOptions={branchOptions}/>
  </div>
}
export default StoreList;