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 { Dropdown , Menu , Spin } from 'antd';
import Nodata from '../../Nodata';
import './Index.scss';

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

function Index(props) {
  const [ list , setList ] = useState([]);
  const [ isSpin , setIsSpin ] = useState(true);

  const { projectsId , owner } = props.match.params;
  const { isManager , isDeveloper , projectDetail , defaultBranch } = props;
  
  useEffect(()=>{
    getList();
  },[])


  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>
  )

  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);})
  }

  return(
    <Spin spinning={isSpin}>
      <div style={{paddingTop:"10px",minHeight:"400px",paddingBottom:"30px"}}>
        {
          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={`/${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>
            )
          })
        }
        {
          list && list.length === 0 && <Nodata _html="暂无数据"/>
        }
      </div>
    </Spin>
  )
}
export default Index;