import React, {useEffect, useState} from "react";
import { Route, Switch } from "react-router-dom";
import Loadable from "react-loadable";
import Loading from "../../../../../Loading";
import { Link } from "react-router-dom";
import { TPMIndexHOC } from "../../../../../modules/tpm/TPMIndexHOC";
import { Box } from "../../../../Component/layout";
import './index.scss';
import { Button, message } from "antd";
import { getRegisterBot } from "../../../../../softbot/api";

const BasicInformation = Loadable({
  loader: () => import("./compenent/basicInformation"),
  loading: Loading,
});
const Jurisdiction = Loadable({
  loader: () => import("./compenent/jurisdiction"),
  loading: Loading,
});
const AdvancedInformation = Loadable({
  loader: () => import("./compenent/advancedInformation"),
  loading: Loading,
});
const Putaway = Loadable({
  loader: () => import("./compenent/putaway"),
  loading: Loading,
});

// 对自己注册的bot进行配置页面
function ConfigurateBot(props){
  const {match:{params:{id}}, current_user, location:{pathname}, history} = props;
  const [reload, setReload] = useState(undefined);
  const [botDetail, setBotDetail] = useState(undefined);

  useEffect(()=>{
    getRegisterBot({
      user_id: current_user && current_user.user_id,
      bot_id: id
    }).then(res=>{
      if(res && res.code === 200){
        const {bot_name} = res.data.bot_output_vo;
        document.title = `${bot_name}-Bot开发者配置`
        setBotDetail(res.data.bot_output_vo);
      }else if(res && res.code === 500){
        message.error("您没有权限访问该bot");
        history.push('/settings/mybot/configuration');
      }
    })
  }, [reload])

  return <div className="configurateBotBox">
    <div className="configurateBotHead mb30">
      <span className="font-18 configurateBotTitle">Bot开发者配置</span>
      <Button style={{width: '53px', padding: '0'}} className="grayBorBut"><Link to={`/settings/mybot/configuration`}>返回</Link></Button>
    </div>
    <Box>
      <div className="leftBox mr30">
        <Link to={`/settings/mybot/configuration/${id}/basic`} className={pathname.lastIndexOf("/jurisdiction") === -1 && pathname.lastIndexOf("/advanced") === -1 ?"active itemBox":"itemBox"}>基本信息</Link>
        <Link to={`/settings/mybot/configuration/${id}/jurisdiction`} className={pathname.lastIndexOf("/jurisdiction") > -1 ?"active itemBox":"itemBox"}>权限&订阅</Link>
        <Link to={`/settings/mybot/configuration/${id}/advanced`} className={pathname.lastIndexOf("/advanced") > -1 ?"active itemBox":"itemBox"}>高级选项</Link>
      </div>
      <Switch>
        {/* bot上架市场 */}
        <Route
          path="/settings/mybot/configuration/:id/advanced/putaway"
          render={(p) => (
            <Putaway {...props} {...p} botDetail={botDetail} setReload={setReload}/>
          )}
        ></Route>
        <Route
          path="/settings/mybot/configuration/:id/advanced/putaway/edit"
          render={(p) => (
            <Putaway {...props} {...p} botDetail={botDetail} setReload={setReload}/>
          )}
        ></Route>
        <Route
          path="/settings/mybot/configuration/:id/basic"
          render={(p)=>(<BasicInformation {...props} {...p} botDetail={botDetail} setReload={setReload}/>)}
        ></Route>
        <Route
          path="/settings/mybot/configuration/:id/jurisdiction"
          render={(p)=>(<Jurisdiction {...props} {...p} botDetail={botDetail} setReload={setReload}/>)}
        ></Route>
        <Route
          path="/settings/mybot/configuration/:id/advanced"
          render={(p)=>(<AdvancedInformation {...props} {...p} botDetail={botDetail} setReload={setReload}/>)}
        ></Route>
        <Route
          path="/settings/mybot/configuration/:id"
          render={(p)=>(<BasicInformation {...props} {...p} botDetail={botDetail} setReload={setReload}/>)}
        ></Route>
      </Switch>
    </Box>
  </div>
}
export default TPMIndexHOC(ConfigurateBot);