import React,{useState , useEffect} from 'react';
import { Link } from 'react-router-dom';
import AgreementModal from './agreementModal';

function Main(props){
  const [ visible , setVisible ] =  useState(false);
  const { owner , projectsId } = props.match.params;
  const [ has_trace_user , setHas_trace_user ] = useState(false);

  const { current_user , resetUserInfo, projectDetail, showNotification } = props;

  useEffect(()=>{
    // 更新网页标题
    if(projectDetail){
      const { author, name} = projectDetail;
      document.title = `服务-${author.name}/${name}`;
    }
  }, [projectDetail])

  useEffect(()=>{
    if(current_user && !current_user.login){
      props.history.push(`/login?go_page=/${owner}/${projectsId}/service`);
    }else{
      setHas_trace_user(current_user.has_trace_user);
    }
  },[current_user])

  function onOk(){
    setVisible(false);
    resetUserInfo && resetUserInfo();
    props.history.push(`/${owner}/${projectsId}/service/codeanalysis`);
  }

  function openDetail(){
    if(projectDetail && projectDetail.forked_from_project_id){
      showNotification("fork仓库暂不支持代码溯源服务，敬请谅解。");
    }else if(!has_trace_user){
      setVisible(true);
    }else{
      props.history.push(`/${owner}/${projectsId}/service/codeanalysis`);
    }
  }
  return(
    <div>
      <AgreementModal visible={visible} onCancel={()=>setVisible(false)} onOk={onOk}/>
      <ul className="serverlist">
        <li>
          <span className="servername">
            <img src={require('./img/logo.png')} alt=""/>
            <a onClick={openDetail}>重睛鸟代码溯源</a>
          </span>
          <p className="task-hide-2 serverdesc">支持软件源代码的溯源分析、自主度评估、开源漏洞检测、开源许可证合规性分析等</p>
          <span className="serverbtn">
            <a onClick={openDetail} className="btnhover">查看详情</a>
          </span>
        </li>
        {/* <li>
          <div className="servername" style={{marginBottom: '8px'}}>
            //记得注释 <img src={require('./img/logo.png')} alt=""/>
            <Link to={`/${owner}/${projectsId}/service/reposyncer`}>Reposyncer仓库同步</Link>
          </div>
          <p className="task-hide-2 serverdesc">支持不同开源托管平台自动同步推送/拉取相关代码，实现多平台项目同步开发功能</p>
          <span className="serverbtn">
            <Link to={`/${owner}/${projectsId}/service/reposyncer`} className="btnhover">查看详情</Link>
          </span>
        </li> */}
      </ul>
    </div>
  )
}
export default Main;