import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Spin } from 'antd';
import { truncateCommitId } from '../common/util';
import Nodata from '../Nodata';
import { Link } from 'react-router-dom'

export default (( props, { projectDetail }) => {
  const [isSpin, setSpin] = useState(true);
  const [data, setData] = useState(undefined);

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

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

  return (
    <div className="main" style={{padding:"0px",border:"none"}}>
      <Spin spinning={isSpin}>
        <div style={{minHeight:"400px"}}>
          {
            data && data.length > 0 &&
            <div className="div_table">
              <ul className="ul_thead">
                <li>
                  <span className="flex1">标记名</span>
                  <span>提交信息</span>
                  <span className="ul_tbody_forth">下载</span>
                </li>
              </ul>
              <ul className="ul_tbody">
                {
                  data.map((item, key) => {
                    return (
                      <li>
                        <span className="flex1">
                          <i className="iconfont icon-biaoqian3 font-16 mr5 color-grey-8"></i>
                          <span className="font-16">{item.name}</span>
                        </span>
                        <span className="ul_tbody_third">
                          <Link to={`/${owner}/${projectsId}/commits/${truncateCommitId(`${item.id}`)}`} className="commitKey" style={{ "marginLeft": 0 }}>{truncateCommitId(`${item.id}`)}</Link>
                        </span>
                        <span className="ul_tbody_forth">
                          <a href={item.tarball_url} style={{ color: "#4CC1DA" }} className="mr30"><i className="iconfont icon-TAR font-18 mr5"></i>TAR</a>
                          <a href={item.zipball_url} style={{ color: "#28BD6C" }}><i className="iconfont icon-ZIP font-18 mr5"></i>ZIP</a>
                        </span>
                      </li>
                    )
                  })
                }
              </ul>
            </div>
          }
          { data && data.length === 0 && <Nodata _html={`暂无标签！`}/> }
        </div>
      </Spin>
    </div>
  )
})