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


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

  const repo_id = projectDetail && projectDetail.repo_id;
  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">
      <Spin spinning={isSpin}>
        {
          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 && data.length > 0 && 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">
                          <span className="commitKey" style={{ "marginLeft": 0 }}>{truncateCommitId(`${item.id}`)}</span>
                        </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>
            :
            <Nodata _html={`暂无标签！`}/>
        }
      </Spin>
    </div>
  )
})