import React, {useState, useEffect} from "react";
import { Button, Tooltip } from "antd";
import './index.scss';
import logo from '../img/logo2.png';
import Loadable from "react-loadable";
import { Route, Switch } from "react-router";
import Loading from "../../../Loading";
import { Link } from "react-router-dom";
import axios from 'axios';

// 编辑同步仓库页面
const EditStore = Loadable({
  loader: () => import("./component/editStore"),
  loading: Loading,
});
// 同步仓库页面
const StoreList = Loadable({
  loader: () => import("./component/storeList"),
  loading: Loading,
});
// 跨平台代码同步服务-同步记录页面
const RecordList = Loadable({
  loader: () => import("./component/recordList"),
  loading: Loading,
});

function Reposyncer(propsF){
  const { owner , projectsId } = propsF.match.params;

  const [storeDetail, setStoreDetail] = useState(null);
  const { projectDetail } = propsF;

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

  useEffect(()=>{
    // 获取仓库同步详情
    axios.get(`/${owner}/${projectsId}/synchronizes.json`).then(res=>{
      if(res && res.data.message === "success"){
        setStoreDetail(res.data.data);
      }
    })
  },[])

  return <div className="reposyncerBox">
    <Switch {...propsF}>
      <Route
        path="/:owner/:projectsId/service/reposyncer/record/:type"
        render={(props) => (
          <RecordList {...propsF} {...props} storeDetail={storeDetail}/>
        )}
      ></Route>
      <Route
        path="/:owner/:projectsId/service/reposyncer/store/edit"
        render={(props) => (
          <EditStore {...propsF} {...props}/>
        )}
      ></Route>
      <Route
        path="/:owner/:projectsId/service/reposyncer"
        render={(props) => (
          <StoreList {...propsF} {...props} storeDetail={storeDetail}/>
        )}
      ></Route>
    </Switch>
  </div>
}
export default Reposyncer;