import React , { useEffect , useState } from 'react';
import CopyTool from '../../Component/CopyTool';
import { truncateCommitId } from '../../common/util';
import { Link } from 'react-router-dom';
import { getImageUrl , turnbar } from 'educoder';
import { Button, Dropdown , Input, Menu , message, Modal, Select, Spin, Table, Tooltip } from 'antd';
import Modals from '../../Component/PublicModal/Index';
import './Index.scss';

import Tree from '../img/tree.png';
import Axios from 'axios';

function Index(props) {
  const [ reload, setReload] = useState(undefined);
  const [ list , setList ] = useState([]);
  const [ isSpin , setIsSpin ] = useState(true);
  // 删除分支
  const [visible, setVisible] = useState(false);
  // 新建分支
  const [addBranch, setAddBranch] = useState(false);
  const [newBranchName, setNewBranchName] = useState(undefined);
  const [newFormBranchName, setNewFormBranchName] = useState(undefined);
  const [newBranchError, setNewBranchError] = useState(undefined);
  const [branchList, setBranchList] = useState([]);//所有分支
  // 通过分支名搜索分支
  const [name, setName] = useState(undefined);
  // 分页
  const [current, setCurrent] = useState(1);
  const [total, setTotal] = useState(0);
  const [pageSize, setPageSize] = useState(10);

  const { projectsId , owner } = props.match.params;
  const { isManager , isDeveloper , projectDetail , defaultBranch, getDetail } = props;
  useEffect(()=>{
    // getList();
    const url = `/v1/${owner}/${projectsId}/branches.json`;
    Axios.get(url,{
      params:{
        keyword: name,
        page: current,
        limit: pageSize
      }
    }).then(result=>{
      if(result){
        const {branches, total_count} = result.data;
        setTotal(total_count)
        setList(branches);
        setNewFormBranchName(branches[0].name);
      }
      setIsSpin(false);
    }).catch(error=>{setIsSpin(false);})
  },[name, reload, pageSize, current])

  useEffect(()=>{
    if(projectDetail && document.title.indexOf('所有分支-') === -1){
      const { author, name} = projectDetail;
      document.title = `所有分支-${author.name}/${name}`;
    }
  }, [projectDetail])


  const menu =(zip_url,tar_url)=> (
    <Menu>
      <Menu.Item key={'0'}><a href={zip_url}>ZIP</a></Menu.Item>
      <Menu.Item key={'1'}><a href={tar_url}>TAR.GZ</a></Menu.Item>
    </Menu>
  )

  const columns = [
    {
      title: "分支名称",
      dataIndex: "name",
      key: 1,
      ellipsis: true,
      className: "branchNameColumn",
      render: (txt, item) => {
        return (
          <Link to={`/${owner}/${projectsId}/tree/${turnbar(txt)}`} onClick={()=>{window.scrollTo(0,0)}} className="task-hide">{txt}</Link>
        )
      }
    },
    {
      title: "更新信息",
      dataIndex: "commit",
      key: 3,
      ellipsis: true,
      width: "240px",
      render: (txt, item) => {
        return (
          <div className='treeinfo'>
            {
              txt && txt.committer && txt.committer.id?
              <Link to={`/${ txt.committer.login}`}>
                <img style={{borderRadius:"50%"}} src={getImageUrl(`/${ txt.committer.image_url}`)} alt="" className='branchLastUpdateUserImage'/>
                <span style={{fontWeight:"500"}}>{txt && txt.committer && txt.committer.name}</span>
              </Link>
              :
              <React.Fragment>
                <img style={{borderRadius:"50%"}} src={getImageUrl(`/${ txt.committer.image_url}`)} alt="" className='branchLastUpdateUserImage'/>
                <span style={{fontWeight:"500"}}>{txt && txt.committer && txt.committer.name}</span>
              </React.Fragment>
            }
            <span className="color-grey-3">更新于{txt && txt.time_ago}</span>
          </div>
        )
      }
    },
    {
      title: "commit信息",
      dataIndex: "commit_id",
      key: 4,
      ellipsis: true,
      width: "250px",
      render: (txt, item) => {
        return <div className="treecopy">
          <div className='treeCopyBox'>
            <span>
              <img src={Tree} alt="sha" width={"16px"}/>
              <Link to={`/${owner}/${projectsId}/commits/${truncateCommitId(txt)}`}>{truncateCommitId(txt)}</Link>
              <input type="text" id={`value${truncateCommitId(txt)}`} value={`${truncateCommitId(txt)}`}/>
            </span>
            <CopyTool beforeText="复制commit id" afterText="复制成功" inputId={`value${truncateCommitId(txt)}`}/>
          </div>
        </div>
      }
    },
    {
      title: "分支类型",
      dataIndex: "default_branch",
      key: 5,
      width: "150px",
      render: (txt, item) => {
        return isManager ? txt === item.name ? <a className='btn-83' style={{width: '93px'}}>默认分支</a> : <Select value={1} onChange={(value)=>{updateDefaultBranch(value, item)}}>
        <Select.Option value={0}>默认分支</Select.Option>
        <Select.Option value={1}>普通分支</Select.Option>
      </Select> : txt === item.name ? '默认分支' : '普通分支'
      }
    },
    {
      title: "操作",
      dataIndex: "name",
      key: 6,
      align: "center",
      width: "320px",
      className: "branchActionColumn",
      render: (txt, item) => {
        return (
          <div className="treeabout">
            {
              (isManager || isDeveloper) && (projectDetail && projectDetail.type!==2) &&
              <Tooltip title={`以${txt}为源分支创建一个合并请求`}><Link to={
                // 如果项目是fork的项目，pr自动指向源仓库，否则指向本仓库默认分支
                projectDetail && projectDetail.fork_info?
                `/${projectDetail.fork_info.fork_project_user_login}/${projectDetail.fork_info.fork_project_identifier}/compare/${turnbar(txt || defaultBranch)}...${owner + ':' + turnbar(txt)}`
                :`/${owner}/${projectsId}/compare/${turnbar(defaultBranch)}...${turnbar(txt)}`
              } className="btn-83">+ 合并请求</Link></Tooltip>
            }
            <Dropdown overlay={menu(item.zip_url,item.tar_url)} trigger={['click']} placement="bottomRight">
              <a className="btn-83" style={{width: '76px'}}>下载<i className="iconfont icon-sanjiaoxing-down font-14"></i></a>
            </Dropdown>
            {isManager && (txt === item.default_branch ? <Tooltip title={`该分支为默认分支，不支持删除操作`}><Button style={{width: '76px'}} disabled>删除</Button></Tooltip> : <Button className='f6_bor_but' style={{width: '76px'}} onClick={()=>{setVisible(item)}}>删除</Button>)}
          </div>
        )
      }
    }
  ];

  function getList() {
    const url = `/${owner}/${projectsId}/branches_slice.json`;
    Axios.get(url).then(result=>{
      if(result){
        setList(result.data);
      }
      setIsSpin(false);
    }).catch(error=>{setIsSpin(false);})
  }

  // 删除分支确认函数
  function deleteLabel(){
    Axios.delete(`/v1/${owner}/${projectsId}/branches/${visible.name}.json`).then(res=>{
      if(res && res.data){
        if(current>1 && (list && list.length===1)){
          setCurrent(current-1);
        }else{
          setReload(Math.random());
        }
        setVisible(false);
        !res.data.status && message.success('删除成功');
      }
    })
  }

  // 新建分支确认函数
  function createBranch(){
    setNewBranchError(undefined);
    if(!newBranchName){
      setNewBranchError("请输入新建分支名称");
    }else{
      Axios.post(`/v1/${owner}/${projectsId}/branches.json`, {
        new_branch_name: newBranchName,
        old_branch_name: newFormBranchName
      }).then(res=>{
        if(res && res.data){
          // 重新请求仓库详情接口，更新分支总数信息
          getDetail();
          setReload(Math.random());
          setAddBranch(false);
          message.success('新建分支成功');
        }
      })
    }
  }

  // 新建分支名检查格式
  function checkNewBranchName(e) {
    setNewBranchError(undefined);
    const value = e.target.value;
    if (value) {
      const str = '^*/';
      let reg = /\\/g;
      if(reg.test(value)){
        setNewBranchError('分支名不能包含下列任何字符：^ * \\ /');
      }else{
        for(var i=0;i<str.length;i++){
          let s = str[i];
          if(value.indexOf(s) > -1){
            setNewBranchError('分支名不能包含下列任何字符：^ * \\ /');
            return;
          }else{
            setNewBranchName(e.target.value);
          }
        }
      }
    }
  }

  // 更新默认仓库分支
  function updateDefaultBranch(value, info){
    Axios.patch(`/v1/${owner}/${projectsId}/branches/update_default_branch.json`,{
      name: info.name
    }).then(res=>{
      if(res && res.data){
        getDetail();
        setReload(Math.random());
        !res.data.status && message.success('操作成功');
      }
    })
  }

  // 改变pagesize
  function onShowSizeChange(current, pageSize){
    window.scrollTo(0, 0);
    setCurrent(1);
    setPageSize(pageSize);
  }

  // 切换页数
  function changePage(page, pageSize){
    window.scrollTo(0, 0);
    setCurrent(page);
  }

  // 新建分支按钮点击函数
  function addBranchBtn(){
    setAddBranch(true);
    const url = `/v1/${owner}/${projectsId}/branches/all.json`;
    Axios.get(url).then(result=>{
      if(result){
        setBranchList(result.data);
      }
    }).catch(error=>{console.log('error', error);})
  }

  return(
    <Spin spinning={isSpin}>
      <div style={{paddingTop:"10px",minHeight:"400px",paddingBottom:"30px"}}>
        <div className='branchListActionBox'>
          <Input.Search placeholder='请输入分支名称' style={{width: '354px'}} className='searchBranch' onSearch={(value)=>{setCurrent(1);setName(value)}} allowClear/>
          <div>
            {isManager && <Link to={`/${owner}/${projectsId}/settings/branches`} className="btn-83" style={{width: '102px'}}><i className="iconfont icon-xuanzhongjibenshezhiicon font-14 mr5"></i>分支设置</Link>}
            {(isManager || isDeveloper) && (projectDetail && projectDetail.type!==2) && <Button type='primary' onClick={addBranchBtn}>+ 新建分支</Button>}
          </div>
        </div>
        <Table
          rowKey={'name'}
          className='branchListTable'
          dataSource={list}
          columns={columns}
          pagination={{current: current, pageSize: pageSize, total: total, showSizeChanger: true, onShowSizeChange:onShowSizeChange, showQuickJumper: true, onChange: changePage}}
        >
        </Table>
        {/* {
          list && list.length>0 && list.map((item,key)=>{
            return(
              <React.Fragment>
                <p className="branchSort">{item.branch_type === "default" ? "默认分支" : item.branch_type==="protected"?"保护分支":"其它分支"}</p>
                {
                  item.list && item.list.length>0 &&
                  <ul className="treeUl">
                    {
                      item.list.map((i,k)=>{
                        let last_commit = i.last_commit;
                        return( 
                          <li>
                            <div className="treeinfo">
                              <Link to={`/${owner}/${projectsId}/tree/${turnbar(i.name)}`} className="task-hide">{i.name}</Link>
                              <div>
                                {
                                  last_commit && last_commit.committer && last_commit.committer.id?
                                  <Link to={`/${ last_commit.committer.login}`}>
                                    <img style={{borderRadius:"50%"}} src={getImageUrl(`/${ last_commit.committer.image_url}`)} alt=""/>
                                    <span className="mr3 color-grey-3" style={{fontWeight:"500"}}>{last_commit && last_commit.committer && last_commit.committer.name}</span>
                                  </Link>
                                  :
                                  <React.Fragment>
                                    <img style={{borderRadius:"50%"}} src={getImageUrl(`/${ last_commit.committer.image_url}`)} alt=""/>
                                    <span className="mr3 color-grey-3" style={{fontWeight:"500"}}>{last_commit && last_commit.committer && last_commit.committer.name}</span>
                                  </React.Fragment>
                                }
                                <span className="color-grey-3">更新于{last_commit && last_commit.time_from_now}</span>
                              </div>
                            </div>
                            <div className="treecopy">
                              <div>
                                <span>
                                  <img src={Tree} alt="sha" width={"16px"}/>
                                  <Link to={`/${owner}/${projectsId}/commits/${truncateCommitId(last_commit && last_commit.sha)}`}>{truncateCommitId(last_commit && last_commit.sha)}</Link>
                                  <input type="text" id={`value${key}${k}`} value={`${truncateCommitId(last_commit && last_commit.sha)}`}/>
                                </span>
                                <CopyTool beforeText="复制commit id" afterText="复制成功" inputId={`value${key}${k}`}/>
                              </div>
                            </div>
                            <div className="treeabout">
                              {
                                (isManager || isDeveloper) && (projectDetail && projectDetail.type!==2) &&
                                <Link to={
                                  // 如果项目是fork的项目，pr自动指向源仓库，否则指向本仓库默认分支
                                  projectDetail && projectDetail.fork_info?
                                  `/${projectDetail.fork_info.fork_project_user_login}/${projectDetail.fork_info.fork_project_identifier}/compare/${turnbar(i.name || defaultBranch)}...${owner + ':' + turnbar(i.name)}`
                                  :`/${owner}/${projectsId}/compare/${turnbar(defaultBranch)}...${turnbar(i.name)}`
                                } className="btn-83">+ 合并请求</Link>
                              }
                              <Dropdown overlay={menu(i.zip_url,i.tar_url)} trigger={['click']} placement="bottomRight">
                                <a className="btn-83 ml15">下载<i className="iconfont icon-sanjiaoxing-down font-14"></i></a>
                              </Dropdown>
                            </div>
                          </li>
                        )
                      })
                    }
                  </ul>
                }
              </React.Fragment>
            )
          })
        } */}
      </div>
      <Modals
        title="删除分支"
        onCancel={()=>{setVisible(false)}}
        visible={Boolean(visible)}
        width="456px"
        btn={
          <div>
            <Button size={"large"} onClick={()=>{setVisible(false)}}>取消</Button>
            <Button type={'danger'} ghost size={"large"} onClick={deleteLabel}>确认删除</Button>
          </div>
        }
      >
        <div className="contents mb30" style={{justifyContent: 'flex-start'}}>
          <i className='iconfont icon-shanchu_tc_icon1 font-36 mr18' style={{color: '#ca0002'}}></i>
          <p style={{color: '#333'}}>确定删除{visible.name}分支?</p>
        </div>
      </Modals>
      <Modal
        title="新建分支"
        onCancel={()=>{setAddBranch(false)}}
        visible={addBranch}
        width="388px"
        footer={
          <Button type={'primary'} style={{width:'334px', height: '42px'}} onClick={createBranch}>确认新建</Button>
        }
        className="createNewBranchModal"
      >
        <div className="mb30" style={{justifyContent: 'flex-start'}}>
          <div className='font-15 createBranchLabel'>分支名称</div>
          <Input placeholder='请输入分支名称' className='createBranchInput' onChange={checkNewBranchName} maxLength={100}/>
          <div className='newBranchError mt5'>{newBranchError}</div>
          <div className='font-15 createBranchLabel mt20'>分支起点</div>
          <Select showSearch style={{width: '340px'}} className='createBranchInput' placeholder="请选择分支起点" onChange={(value)=>{setNewFormBranchName(value)}} getPopupContainer={triggerNode => triggerNode.parentNode}>
            {branchList && branchList.map((item, index)=>{
              return <Select.Option value={item.name} key={index}>{item.name}</Select.Option>
            })}
          </Select>
        </div>
      </Modal>
    </Spin>
  )
}
export default Index;