import React, { useState, useEffect } from "react";
import { Button, Icon, message, Modal } from "antd";
import './index.scss';
import { Link } from "react-router-dom";
import { getImageUrl } from 'educoder';
import { getMyBot, getTransferToBot, receiveTransferBot, refuseTransferBot } from "../../../../softbot/api";
import nullBot from '../../../../softbot/image/notBot1.png';
import moment from "moment";

function ExploitBot(props){
  const {current_user} = props;
  const [makeOverList, setMakeOverList] = useState([]);
  const [botList, setBotList] = useState(undefined);
  const [visible, setVisible] = useState(false);
  const [refuseBotDetail, setRefuseBotDetail] = useState(undefined);
  const [reload, setReload] = useState(undefined);

  useEffect(()=>{
    window.scrollTo(0,0);
    document.title='我的Bot';
  }, [])

  useEffect(()=>{
    getMyBot({
      user_id: current_user && current_user.user_id,
      page_no: 1,
      page_size: 1000
    }).then(res=>{
      if(res && res.code === 200){
        setBotList(res.data.list);
      }
    })
    getTransferToBot({
      state: "2",
      user_id: current_user && current_user.user_id,
      login: current_user && current_user.login
    }).then(res=>{
      if(res && res.code === 200){
        setMakeOverList(res.data.bot_list);
      }
    })
  }, [reload])

  // 接受转让的bot
  function receiveBot(info){
    receiveTransferBot({
      bot_id: info.bot_id,
      transfer_from_id: info.transfer_id,
      transfer_to_login: current_user && current_user.login,
      transfer_to_id: current_user && current_user.user_id
    }).then(res=>{
      if(res && res.code === 200){
        message.success('操作成功');
        setReload(Math.random());
      }
    })
  }

  // 拒绝转让的bot
  function refuseBot(){
    refuseTransferBot({
      bot_id: refuseBotDetail.bot_id,
      transfer_from_bot: refuseBotDetail.transfer_id,
      transfer_to_bot: current_user && current_user.user_id
    }).then(res=>{
      if(res && res.code === 200){
        setVisible(false);
        setRefuseBotDetail(undefined);
        message.success('操作成功');
        setReload(Math.random());
      }
    })
  }

  return <div>
    <div className="exploitHead font-18">
      <span>我的Bot</span>
      <Button type="primary" style={{width: '100px', height: '36px'}}><Link to={`/settings/mybot/new`}>Bot注册</Link></Button>
    </div>

    {/* bot转让接收按钮显示区域 */}
    {makeOverList.length > 0 && <div className="makeOverBox">
      {makeOverList.map((item, index)=>{return <div className="makeOverItem" key={index}>
        <div>
          <p className="botName font-15">{item.bot_name}</p>
          <p className="userName"><a href={`/${item.fromlogin}`} className="fromUserNameBot">{item.fromname}</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{moment(item.transfer_date).format('YYYY-MM-DD HH:mm')}</p>
        </div>
        <div>
          <Button className="themeCorBorBut" style={{width: '68px', height: '36px'}} onClick={()=>{receiveBot(item)}}>接收</Button>
          <Button className="dangerBorBut ml20" style={{width: '68px', height: '36px'}} onClick={()=>{setRefuseBotDetail(item); setVisible(true)}}>拒绝</Button>
        </div>
      </div>})}
    </div>}

    {/* bot列表显示区域 */}
    {botList && (botList.length > 0 ? <div className="softBotListBox">
      {botList.map((item, index)=>{return <div className="softBotItem" key={index}>
        <div className="botOneLine botNameWarpBox">
          <img src={getImageUrl(item.logo)} alt="" className="imgBox mr20" object-fit="fill"/>
          <Link className="font-15 botOneLine botNameBox" to={`/settings/mybot/configuration/${item.bot_id}`}>{item.bot_name}</Link>
          <span className={`font-12 ml10 statusBot ${item.is_public ? item.is_market ? 'market' : 'public' : 'private'}`}>{item.is_public ? item.is_market ? '上架' : '公开' : '私有'}</span>
        </div>
        <Button className="themeCorBorBut ml30" style={{width: '68px', height: '36px'}}><Link to={`/settings/mybot/configuration/${item.bot_id}`}>编辑</Link></Button>
      </div>})}
    </div> : <div className="nullBotsBox mt80">
      <img src={nullBot} alt="" width={62}/>
      <p className="font-18 showBigTip">您当前暂未注册任何Bot</p>
      <div className="showTip font-14">Bot可以帮助您自动化处理一些繁杂的项目任务，欢迎您<Link to="/settings/mybot/new"> 注册一个Bot </Link>基于GitLink API进行开发。<br/>此外您还可以在<Link to="/softbot">  Bot市场 </Link>中共享或安装他人的Bot</div>
    </div>)}

    <Modal
      className="f8HeadModal"
      width="550px"
      title={`拒绝${refuseBotDetail && refuseBotDetail.bot_name}Bot`}
      visible={visible}
      maskClosable={false}
      footer={[
        <Button onClick={()=>{setVisible(false)}} className="mr30 grayBorBut whiteBackBut" style={{width:"104px", height: '36px'}}>取消</Button>,
        <Button className="redFontBut grayBorBut whiteBackBut" style={{width:"104px", height: '36px'}} onClick={refuseBot}>确认</Button>
      ]}
      onCancel={()=>{setVisible(false)}}
    >
        <div className="font-16 titleTip mt20"><span className="circleRed font-18">!</span>您确定要拒绝此Bot吗？</div>
        <div className="deleteTip">拒绝后，开发Bot权限将返回至转让人。</div>
    </Modal>
  </div>
}
export default ExploitBot;