import React , { useEffect , useState } from 'react';
import './Index.scss';
import SubBanner from './SubBanner';
import SubUnitBanner from './SubUnitBanner';
import Icon from '../img/index/icon.png';
import { Link } from 'react-router-dom';
import { Spin } from 'antd';
import SubList from './SubList';
import more from '../img/index/more.png';
import axios from 'axios';
import { getImageUrl } from 'educoder';
import Nodata from '../../Nodata';

const LIMIT = 20;
function Index() {

  const [ cateList , setCateList ] = useState(undefined);
  const [ projectsList , setProjectsList ] = useState(undefined);
  const [ cateID, setCateID ] = useState(undefined);
  const [ isSpin, setIsSpin ] = useState(true);

  useEffect(()=>{
    getCate();
  },[])

  useEffect(()=>{
    setIsSpin(true);
    getProject();
  },[cateID])
  
  function getCate() {
    const url = `/project_categories/pinned_index.json`;
    axios.get(url).then(result=>{
      if(result && result.data){
        setCateList(result.data.project_categories);
      }
    }).catch(error=>{})
  }

  function getProject() {
    const url = `/projects.json`;
    axios.get(url,{
      params:{
        pinned:"d",
        category_id:cateID,
        limit:LIMIT
      }
    }).then(result=>{
      if(result && result.data){
        setProjectsList(result.data.projects);
        setIsSpin(false);
      }
    }).catch(error=>{})
  }
  
  return(
    <div>
      <SubBanner />
      <SubUnitBanner />
      <div className="dataPanel">
        <div className="left">
          <ul className="leftTypes">
            <a className={cateID ? "" : "active"} onClick={()=>setCateID(undefined)}><img src={Icon} alt="" /><span>最近更新</span></a>
            {
              cateList && cateList.length>0?
                cateList.map((i,k)=>{
                  return(
                    <a className={cateID === i.id ?"active":""} onClick={()=>setCateID(i.id)}><img src={i.logo_url || Icon} alt="" /><span>{i.name}</span></a>
                  )
                })
              :""
            }
          </ul>
          <div className="leftLists">
            <div className="leftTitles">
              <span>开源项目</span>
              <Link to={`/explore/all`}>更多<i className="iconfont icon-triangle font-12"></i></Link>
            </div>
            <Spin spinning={isSpin}>
              <div style={{minHeight:"400px"}}>
                {
                  projectsList && projectsList.length > 0 ?
                  <div className="leftlistItem">
                    {
                      projectsList.map((i,k)=>{
                        return(
                          <li>
                            <Link to={`/${i.author && i.author.login}`}><img src={getImageUrl(`/${i.author && i.author.image_url}`)} alt="" /></Link>
                            <div className="itemTitle">
                              <div className="item-title-infos">
                                <Link to={`/${i.author && i.author.login}/${i.identifier}`} className="infotitle">{i.author && i.author.name}/{i.name}</Link>
                                {i.praises_count > 0 ? <span><i className="iconfont icon-dianzan11 mr3 font-16"></i>{i.praises_count}</span> :"" }
                                {i.forked_count > 0 ? <span><i className="iconfont icon-fork2 mr3 font-13"></i>{i.forked_count}</span>:""}
                              </div>
                              <div className="item-desc task-hide-2">
                                {i.description}
                              </div>
                              <div className="item-data">
                                {i.category && i.category.id ? <span className="category">{i.category.name}</span> :"" }
                                {i.language && i.language.id ? <span className="language mr30">{i.language.name}</span> :""}
                                <span style={{lineHeight:"15px",display:"flex"}}><i className="iconfont icon-shijian font-15 mr5"></i>更新于{i.time_ago}</span>
                              </div>
                            </div>
                          </li>
                        )
                      })
                    }
                  </div>
                  :""
                }
                {
                  projectsList && projectsList.length === 0 && <Nodata _html="暂无数据" />
                }
              </div>
            </Spin>
            <div className="left-bottom-btn">
              <Link to={`/explore/all`}>查看更多开源项目<img src={more} alt="" /></Link>
            </div>
          </div>
        </div>
        <SubList />
      </div>
    </div>
  )
}
export default Index;