import React, {useState} from "react";
import { Link } from "react-router-dom";
import { Button } from "antd";
import nullBot from '../../softbot/image/notBot.png';
import './setting.scss';
import { useEffect } from "react";
import { getStoreAllInstallBots } from "../../softbot/api";
import { getImageUrl } from 'educoder';

function SoftBot(props){
  const {projectDetail} = props;
  const [botList, setBotList] = useState(undefined);

  useEffect(()=>{
    // 获取仓库安装的所有bot
    projectDetail && getStoreAllInstallBots({
      store_id: projectDetail.project_id
    }).then(res=>{
      if(res && res.code === 200){
        setBotList(res.data.install_bot_infos);
      }
    })

    // 网页标题
    if(projectDetail && document.title.indexOf('已安装Bot-') === -1){
      const { author, name} = projectDetail;
      document.title = `已安装Bot-${author.name}/${name}`;
    }
  }, [projectDetail])

  return <div className="softBotClass">
    <div className="softBoxHeadTitle font-18">Bot安装</div>
    {/* bot列表显示区域 */}
    {botList && (botList.length > 0 ? <div className="botListBox">
      {botList.map((item, index)=>{return <div className="disBotItem" key={index}>
        <div className="flexCenter">
          <img src={getImageUrl(item.logo)} alt="" className="imgBox mr20"/>
          <span className="font-15 botName">{item.bot_name}</span>
          <span className={`statusBox font-12 ml10 ${item.state === 0 ? '' : 'active'}`}>{item.state === 0 ? '挂起' : '启用'}</span>
        </div>
        <Button className="themeCorBorBut" style={{width: '68px', height: '36px'}}><Link to={`/settings/installbot/${item.bot_id}`}>配置</Link></Button>
      </div>})}
    </div> : <div className="nullBotBox mt20">
      <img src={nullBot} alt="" width={62}/>
      <p className="font-18 showBigTip">您当前暂未安装任何Bot</p>
      <div className="showTip font-14">Bot可以帮助项目贡献者处理繁杂的项目任务，比如关闭疑修、合并请求等，以节约时间精力提升开发效率。快去市场中挑选一个适合您项目的Bot吧!</div>
      <div className="borTip"></div>
      <Button type="primary" style={{width: '112px', height: '36px', padding: 0}}><Link to={'/softbot'}>去Bot市场逛逛</Link></Button>
    </div>)}
  </div>
}
export default SoftBot