import React, { useState , useRef } 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';

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


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

  function getID(id){
    setNewId(id);
  }
  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>
        }
        {
          nav === "1" &&
          <AddMember getID={getID} login showNotification={props.showNotification}/>
        }
        {
          (nav !== "1" && addOperation) &&
          <AddGroup getGroupID={getGroupID} organizeId={owner}/>
        }
      </div>
      <div>
        {
          nav === "1" ? 
          <Member newId={newId} projectsId={projectsId} owner={owner} project_id={props.project_id} author={props.projectDetail && props.projectDetail.author} showNotification={props.showNotification}/> 
          :
          <Group setAddOperation={setAddOperation} owner={owner} projectsId={projectsId} newGroupId={newGroupId}/>
        }
      </div>
    </WhiteBack>
  );
}
export default Collaborator;
