import React , { useEffect , useState } from 'react';
import "./Index.scss";
import TopEdition from './TopEdition';
import ThirdEdition from './ThirdEdition';
import { Anchor } from 'antd';
import F41 from './Img/4-1.png';
import F42 from './Img/4-2.png';
import F43 from './Img/4-3.png';
import F44 from './Img/4-4.png';
import SecondEdition from './SecondEdition';
import FifthEdition from './FifthEdition';
import { TPMIndexHOC } from '../modules/tpm/TPMIndexHOC';
import Axios from 'axios';

function Index(props) {
  const [ value , setValue ] = useState("");
  const [ flag , setFlag ] = useState(true);

  const [ bannerTab , setBannerTab ] = useState(undefined);
  const register = props && props.mygetHelmetapi && props.mygetHelmetapi.common && props.mygetHelmetapi.common.register;

  const { current_user } = props;
  useEffect(()=>{
    window.addEventListener("scroll",scrollListener);
    getTab();
    return ComponentWillUnmount;
  },[])

  function ComponentWillUnmount() {
    window.removeEventListener("scroll",scrollListener);
  }

  function getTab() {
    const url = `/topics.json?topic_type=card`;
    Axios.get(url,{
      params:{
        limit:3
      }
    }).then(result=>{
      if(result){
        setBannerTab(result.data.topics);
      }
    }).catch(error=>{})
  }

  function scrollListener(event) {
    
    let third = document.getElementById("thirdContent").offsetTop;
    let top = document.documentElement.scrollTop + 60;
    if(top>= third)
    {
      setFlag(false)
    }else{
      setFlag(true)
    }
  }

  function changeActive(params) {
    if(params){
      setValue(params);
      let h = params.split("#")[1];
      let t = document.getElementById(h).offsetTop;
      document.documentElement.scrollTop = t-100;
    }else{
      setValue("");
    }
  }


  return(
    <div className="homePage">
      <div className="topEdition">
        {/* <HeadNav {...props}/> */}
        <TopEdition register={register} current_user={current_user}/>
        {
          bannerTab && bannerTab.length > 0 ?
          <ul className="topEditionUl">
            {
              bannerTab.map((i,k)=>{
                return(
                  <a href={i.url} target="_blank" className="font-18">
                    <li>
                      {i.title}
                    </li>
                  </a>
                )
              })
            }
          </ul>
          :
          <ul className="topEditionUl">
            <a href="https://forum.trustie.net/forums/4666/detail" target="_blank" className="font-18">
              <li>
                CCF开源发展委员会首批执行委员名单发布
              </li>
            </a>
            <a href="https://forgeplus.trustie.net/Gitlink/forgeplus" target="_blank" className="font-18">
              <li>
                平台精选仓库：GitLink/GitLink
              </li>
            </a>
            <a href="https://forum.trustie.net/forums/4663/detail" target="_blank" className="font-18">
              <li>
                OpenHarmony系统介绍及赛题说明
              </li>
            </a>
          </ul>
        }
        
      </div>

      <div className="secondEdition">
        <p className="theTitle">GitLink，新一代开源创新服务平台</p>
        {
          flag &&
          <Anchor>
            <li onClick={()=>changeActive("#hadoop")} className={value === "#hadoop"?"active":""}><a>分布式协作开发</a></li>
            <li onClick={()=>changeActive("#oneStop")} className={value === "#oneStop"?"active":""}><a>一站式过程管理</a></li>
            <li onClick={()=>changeActive("#highDevops")} className={value === "#highDevops"?"active":""}><a>高效流水线运维</a></li>
            <li onClick={()=>changeActive("#multipleAnalyse")} className={value === "#multipleAnalyse"?"active":""}><a>多层次代码分析</a></li>
            <li onClick={()=>changeActive("#multidimensional")} className={value === "#multidimensional"?"active":""}><a>多维度用户画像</a></li>
          </Anchor>
        }
        <SecondEdition {...props} setValue={setValue}/>
      </div>
      <div id="thirdContent">
        <ThirdEdition />
      </div>

      <div className="forthEdition">
        <p className="theTitle">加入GitLink，和社区伙伴们一起踏上开源创新的辉煌旅程！</p>
        <div style={{marginBottom:"80px"}}>
          { !(current_user && current_user.login) && <a className="qulikyreg" href={register}>立即注册</a> }
        </div>
        <ul className="forthUl">
          <li>
            <img src={F41} alt="" width={"100px"}/>
            <span className="forthtitle">发现</span>
            <span className="forthsubtitle">探索丰富优质的开发资源</span>
          </li>
          <li>
            <img src={F42} alt="" width={"101px"}/>
            <span className="forthtitle">加入</span>
            <span className="forthsubtitle">寻找志同道合的协作伙伴</span>
          </li>
          <li>
            <img src={F43} alt="" width={"104px"}/>
            <span className="forthtitle">合作</span>
            <span className="forthsubtitle">开启开放共享的协同之旅</span>
          </li>
          <li>
            <img src={F44} alt="" width={"87px"}/>
            <span className="forthtitle">贡献</span>
            <span className="forthsubtitle">书写开源创新的精彩成就</span>
          </li>
        </ul>
      </div>

      <div className="fifthEdition">
        <p className="title">开源生态</p>
        <p className="subtitle">GitLink与各大企业、高校、科研机构开展广泛的技术合作，推动我国开源软件生态的快速构建与发展</p>
        <FifthEdition />
      </div>
    </div>
  )
}
export default TPMIndexHOC(Index);