import React,{ useEffect , useState } from 'react';
import SubMenu from '../sub/SubMenu';
import { Table , Tooltip , Spin } from 'antd';
import axios from 'axios';
import { Link } from 'react-router-dom';
import { truncateCommitId } from '../../common/util';
import { getImageUrl } from 'educoder';
import Nonedata from '../../Nodata';
import './Index.scss';
import Tree from '../img/tree.png'
import moment from 'moment';

function Tags(props) {

  const [ source , setSource ] = useState(undefined);
  const [ isSpin , setIsSpin ] = useState(true);  

  const { projectsId , owner } = props.match.params;

  useEffect(() => {
    if (projectsId) {
      const url = `/${owner}/${projectsId}/tags.json`;
      axios.get(url).then((result) => {
        if (result && result.data) {
          setSource(result.data.tags);
          setIsSpin(false);
        }
      }).catch(error => {})
    }
  }, [owner, projectsId]);

  const columns=[
    {
      title:"标签名",
      dataIndex:"name",
      key:1,
      ellipsis:true,
      width:"200px",
      render:(txt,item)=>{
        return(
          <div className="tagBranch">
            <Link className="hover tagClass" to={`/${owner}/${projectsId}/tree/${item.name}`}>{item.name}</Link>
          </div>
        )
      }
    },
    {
      title:"创建时间",
      dataIndex:"time_ago",
      key:2,
      ellipsis:true,
      render:(txt,item)=>{
        return (
          <span className="color-grey-3 tagModel">
            {
              item.tagger &&
              <Tooltip placement="top" title={item.tagger.name}>
                {
                  item.tagger.id ?
                  <Link className="mr3 tagModelImg" to={`/${item.tagger.login}`} >
                    <img src={getImageUrl(`/${item.tagger && item.tagger.image_url}`)} alt=""/>
                  </Link>
                  :
                  <span className="mr3 tagModelImg" style={{cursor:"default"}}>
                    <img src={getImageUrl(`/${item.tagger && item.tagger.image_url}`)} alt=""/>
                  </span>
                }
              </Tooltip>
            }
            <span>创建于{txt}</span>
          </span>
        )
      }
    },
    {
      title:"提交ID",
      dataIndex:"id",
      key:3,
      ellipsis:true,
      render:(txt,item)=>{
        return (
          <Tooltip placement="top" title={`最后提交日期:${item.created_at_unix ? moment(item.created_at_unix*1000).format('YYYY-MM-DD'):''}`}>
            <img src={Tree} alt="提交ID" width="22px" className="mr4"/>
            <Link className="hover color-blue" to={`/${owner}/${projectsId}/commits/${truncateCommitId(`${item.id}`)}`}>{truncateCommitId(item.id)}</Link>
          </Tooltip>
        )
      }
    },
    {
      title:"描述信息",
      dataIndex:"message",
      key:4,
      ellipsis:true,
      render:(txt,item)=>{
        return item.message || "--"
      }
    },
    {
      title:"下载",
      dataIndex:"stage_type",
      key:5,
      ellipsis:true,
      align:"center",
      width:"204px",
      render:(txt,item)=>{
        return (
          <React.Fragment>
            <a href={`${item.tarball_url}`} download className="btn-83">
              <i className="iconfont icon-xiazai-icon font-16 mr5"></i>TAR
            </a>
            <a href={`${item.zipball_url}`} download className="btn-83">
              <i className="iconfont icon-xiazai-icon font-16 mr5"></i>ZIP
            </a>
          </React.Fragment>
        )
      }
    }
  ]
  return(
    <div>
      <SubMenu tab={"tags"} projectsId={projectsId} owner={owner}/>
      <Spin spinning={isSpin}>
        <div className="tagSpin">
        {
          source && source.length > 0 &&
          <Table 
            className="tagTable"
            dataSource={source} columns={columns} pagination={false}></Table>
        }
        {
          source && source.length === 0 && <Nonedata _html={'暂无数据~'}/>
        }
        </div>
      </Spin>
    </div>
  )
}
export default Tags;