import React , { useEffect , useState } from 'react';
import NodataPanel from '../../components/nodata-panel';
import { wikiPages, getWiki } from '../../forge/Wiki/api';
import bg from '../img/help_bg.png';
import './index.scss';
function Help(props) {
  const {showNotification} = props;
  const [fileArrInit, setFileArrInit] = useState(null);
  const [checkItem, setCheckItem] = useState({});
  const [itemDetail, setItemDetail] = useState({});
  // locationStatus true 正式环境 false 测试环境或者开发环境
  const locationStatus = window.location.host.indexOf("50008") !== -1 || window.location.host.indexOf("gitlink") !== -1;

  // 获取仓库wiki列表
  useEffect(()=>{
    wikiPages({
      owner: locationStatus ? 'CCF-GLCC' : 'forgetest2',
      repo: locationStatus ? 'glcc-help' : 'wiki1',
      projectId: locationStatus ? '1403908' : '546103'
    }).then(res => {
      if (res && res.message === "200" && Array.isArray(res.data)) {
        setFileArrInit(res.data);
        if (res.data.length) {
          setCheckItem(res.data[0]);
        };
      } else {
        setFileArrInit([]);
      }
    });
  }, [])

  // 获取选择wiki详情
  useEffect(() => {
    checkItem.name && getWiki({
      owner: locationStatus ? 'CCF-GLCC' : 'forgetest2',
      repo: locationStatus ? 'glcc-help' : 'wiki1',
      pagename: checkItem.name,
      projectId: locationStatus ? '1403908' : '546103'
    }).then(res => {
      if (res && res.message === "200") {
        setItemDetail(res.data);
      } else {
        showNotification("加载失败")
      }
    });
  }, [checkItem]);

  return(
    <div className="glcc_help">
      {fileArrInit && fileArrInit.length === 0 ? <NodataPanel/> : <div className='help_main'>
        <div className='menuList'>
          <span className='font-18 mb15'>帮助文档</span>
          {fileArrInit && fileArrInit.map(item => {
            return <span className={`wiki_title font-15 mb15 ${item.name ===  checkItem.name? 'active' : ''}`} key={item.name} onClick={() => { setCheckItem(item) }}>{item.name}</span>})}
        </div>
        <div className="help_cntent pt10" >
          <div dangerouslySetInnerHTML={{ __html: itemDetail && itemDetail.simple_content }}></div>
          <img src={bg} className='bg' alt='bg'/>
        </div>
      </div>}
    </div>
  )
}
export default Help;