import React, { useState , useRef, useEffect } from "react";
import {WhiteBack} from '../Component/layout';
import AddMember from '../Component/AddMember';
import AddGroup from '../Component/AddGroup';
import Member from './CollaboratorMember';
import Group from './CollaboratorGroup';
import MemberByLink from './CollaboratorMemberByLink';

function Collaborator(props){
  const [ nav , setNav] = useState("1");
  const [ newId , setNewId] = useState(undefined);
  const [ newIdFlag , setNewIdFlag ] = useState(false);
  const [ addOperation , setAddOperation] = useState(true);
  const [ newGroupId , setNewGroupId] = useState(undefined);
  const {projectsId ,owner} = props.match.params;
  const {projectDetail} = props;

  const author = props && props.projectDetail && props.projectDetail.author;

  useEffect(()=>{
    if(projectDetail && document.title.indexOf('成员管理-') === -1){
      const { author, name} = projectDetail;
      document.title = `成员管理-${author.name}/${name}`;
    }
  }, [projectDetail])

  function getID(id){
    setNewId(id);
    setNewIdFlag(!newIdFlag);
  }
  function getGroupID(id){
    setNewGroupId(id);
  }

  return (
    <WhiteBack>
      <div className="flex-a-center baseForm bbr">
        {/* {
          author && author.type === "Organization" ?
          <span>
            <span style={{cursor:"pointer"}} className={nav === "1" ? "font-18 text-black color-blue":"font-18 text-black"} onClick={()=>{setNav("1");setNewId(undefined)}}>协作者管理</span>
            <span style={{cursor:"pointer"}} className={nav === "2" ? "font-18 text-black ml30 color-blue":"font-18 text-black ml30"} onClick={()=>{setNav("2");setNewId(undefined);setNewGroupId(undefined)}}>团队管理</span>
          </span>
          :
          <span className="font-18 text-black">协作者管理</span>
        } */}
        <span>
          <span style={{cursor:"pointer"}} className={nav === "1" ? "font-15 text-black color-blue":"font-15 text-black"} onClick={()=>{setNav("1");setNewId(undefined)}}>成员管理</span>
          <span style={{cursor:"pointer"}} className={nav === "3" ? "font-15 text-black color-blue ml30":"font-15 text-black ml30"} onClick={()=>{setNav("3");}}>邀请成员</span>
          {author && author.type === "Organization" && <span style={{cursor:"pointer"}} className={nav === "2" ? "font-15 text-black ml30 color-blue":"font-15 text-black ml30"} onClick={()=>{setNav("2");setNewId(undefined);setNewGroupId(undefined)}}>团队管理</span>}
        </span>
        {
          nav === "1" &&
          <AddMember getID={getID} login showNotification={props.showNotification}/>
        }
        {
          (nav === "2" && addOperation) &&
          <AddGroup getGroupID={getGroupID} organizeId={owner}/>
        }
      </div>
      <div>
        {
          nav === "1" ? <Member newId={newId} flag={newIdFlag} projectsId={projectsId} owner={owner} project_id={props.project_id} author={props.projectDetail && props.projectDetail.author} showNotification={props.showNotification}/>
          : nav === "2" ? <Group setAddOperation={setAddOperation} owner={owner} projectsId={projectsId} newGroupId={newGroupId}/>
          : <MemberByLink newId={newId} flag={newIdFlag} projectsId={projectsId} owner={owner} project_id={props.project_id} author={props.projectDetail && props.projectDetail.author} showNotification={props.showNotification}/>
        }
      </div>
    </WhiteBack>
  );
}
export default Collaborator;
