import React , {useEffect , useState} from 'react';
import { Route, Switch , Link } from "react-router-dom";
import Loadable from "react-loadable";
import Loading from "../../../Loading";
import '../Index.scss';
import axios from 'axios';

import Cards from '../../Component/Cards';

const GroupSetting = Loadable({
  loader: () => import("../Group/GroupDetailSetting"),
  loading: Loading,
});

export default ((props)=>{
  const OIdentifier = props.match.params.OIdentifier;
  const groupId = props.match.params.groupId;
  const pathname = props.location.pathname;
  const [ detail , setDetail ] = useState(undefined);
  const [ flag , setFlag ] = useState(false);

  // 设置页面：顶部不需要设置按钮了
  useEffect(()=>{
    if(pathname){
      if(pathname.indexOf(`/${OIdentifier}/teams/${groupId}/setting`)>-1){
        setFlag(false);
      }else{
        setFlag(true);
      }
    }
  },[pathname])

  useEffect(()=>{
    if(OIdentifier && groupId){
      getDetail(OIdentifier,groupId);
    }
  },[OIdentifier,groupId]);

  function getDetail(id,gId) {
    const url = `/organizations/${id}/teams/${gId}.json`;
    axios.get(url).then(result=>{
      if(result && result.data){
        setDetail(result.data);
      }
    }).catch(error=>{})
  }
  return(
    <div className="teamDetail" style={{paddingTop:"0px"}}>
      <div>
        <i className="iconfont icon-zuobiao mr5"></i>
        <Link to={`/${OIdentifier}`}>{detail && detail.organization && detail.organization.nickname}</Link>
        <i className="iconfont icon-youjiantou ml3 mr3 font-12 color-grey-9"></i>
        <span className="color-grey-9">{detail ? detail.nickname : "新建团队"}</span>
      </div>
      {
        detail && 
        <Cards
          src={`/${OIdentifier}/teams/${groupId}`}
          title={detail.nickname||detail.name}
          rightBtn={
            flag && <span className="subNavs">
              <Link to={`/${OIdentifier}/members`} className={pathname ===`/${OIdentifier}/members` ? "active":""}><span>组织成员</span>{detail.num_users && <lable>{detail.num_users}</lable>}</Link>
              <Link to={`/${OIdentifier}/teams`} className={pathname ===`/${OIdentifier}/teams` ? "active":""}><span>组织团队</span>{detail.num_teams &&<lable>{detail.num_teams}</lable>}</Link>
            </span>
          }
          desc={!flag && detail.description}
        />
      }
      <Switch {...props}>
        {/* 组织团队-设置 */}
        <Route
          path="/:OIdentifier/teams/:groupId/setting"
          render={(p) => {
            return <GroupSetting {...props} {...p}/>
          }}
        ></Route>
      </Switch>
    </div>
  )
})