import React,{ useState , useEffect , forwardRef ,useImperativeHandle , useRef } from 'react';
import Menus from '../../Issues/Component/menus';
import axios from 'axios';

const array =[
  {id:1,name:"最新创建"},
  {id:2,name:"最早创建"},
  {id:3,name:"最新更新"},
  {id:4,name:"最早更新"},
  {id:5,name:"高优先级"},
  {id:6,name:"低优先级"}
]

function AllMenus({owner,projectsId,chooseFunc,update},ref){
  // 列表右侧所有筛选项的值
  const [ authorList , setAuthorList ] = useState(undefined);
  const [ author , setAuthor ] = useState(undefined);
  const [ tagList , setTagList ] = useState(undefined);
  const [ tag , setTag ] = useState(undefined);
  const [ chargeList , setChargeList ] = useState(undefined);
  const [ charge , setCharge ] = useState(undefined);
  const [ millstone , setMillstone ] = useState(undefined);
  const [ millstoneList , setMillstoneList ] = useState(undefined);
  const [ ids , setIds ] = useState({author_id:undefined,issue_priorities_id:undefined,issue_tag_ids:undefined,milestone_id:undefined,sort_by:undefined,status_id:undefined,assigner_id:undefined});
  const [ names , setNames ] = useState({author_name:undefined,issue_priorities_name:undefined,issue_tag_name:undefined,milestone_name:undefined,sortby_name:undefined,status_name:undefined,assigner_name:undefined});

  useImperativeHandle(ref, () => ({
    clearChoose: () => {
      // 父组件按钮：清除筛选条件，将Ids\names里的字段全部改为undefined
      setIds({author_id:undefined,issue_tag_ids:undefined,issue_priorities_id:undefined,milestone_id:undefined,sort_by:undefined,status_id:undefined,assigner_id:undefined});
      setNames({author_name:undefined,issue_tag_name:undefined,issue_priorities_name:undefined,milestone_name:undefined,sortby_name:undefined,status_name:undefined,assigner_name:undefined});
    }
  }))

  // 获取发布人列表
  useEffect(()=>{
    getSendPerson();
  },[author])

  function getSendPerson(){
    const url = `/v1/${owner}/${projectsId}/issue_authors`;
    axios.get(url,{params:{keyword:author,only_name:true}}).then(result=>{
      if(result && result.data){
        setAuthorList(result.data.authors);
      }
    })
  }

  // 获取标记列表
  useEffect(()=>{
    getSign();
  },[tag])

  function getSign(){
    const url = `/v1/${owner}/${projectsId}/issue_tags`;
    axios.get(url,{params:{keyword:tag,only_name:true}}).then(result=>{
      if(result && result.data){
        setTagList(result.data.issue_tags);
      }
    })
  }


  // 获取负责人列表
  useEffect(()=>{
    getCharge();
  },[charge,update])

  function getCharge(){
    if(update){
      const url = `/v1/${owner}/${projectsId}/collaborators`;
      axios.get(url,{params:{keyword:charge,only_name:true}}).then(result=>{
        if(result && result.data){
          setChargeList(result.data.collaborators);
        }
      })
    }else{
      const url = `/v1/${owner}/${projectsId}/issue_assigners`;
      axios.get(url,{params:{keyword:charge,only_name:true}}).then(result=>{
        if(result && result.data){
          setChargeList(result.data.assigners);
        }
      })
    }
  }

  function choose(id,name){
    let copy = {...ids,author_id:id && id.length>0 ? id.join(","):undefined};
    let copyname = { ...names,author_name:name};
    setIds(copy);setNames(copyname);
    chooseFunc(copy,copyname);
  }

  // 获取里程碑列表
  useEffect(()=>{
    getMillstone();
  },[millstone])

  function getMillstone(){
    const url = `/v1/${owner}/${projectsId}/milestones`;
    axios.get(url,{params:{keyword:millstone,only_name:true}}).then(result=>{
      if(result && result.data){
        setMillstoneList(result.data.milestones);
      }
    })
  }
  return(
    <ul className="dropboxul">
      { !update && <Menus 
          update={update}
          ids={ids && ids.author_id}
          names={names && names.author_name}
          name={"发布人" } size={"large"} imgControl 
          lists={authorList} searchFunc={(value)=>setAuthor(value)}
          chooseFunc={(id,name)=>choose(id,name,'author_name')}
        />
      }
      <Menus 
        update={update}
        ids={ids && ids.issue_tag_ids}
        name={"标记"} size={"large"} 
        double
        names={names && names.issue_tag_name}
        lists={tagList} searchFunc={(value)=>setTag(value)}
        chooseFunc={(id,name)=>{let copy = {...ids,issue_tag_ids:id && id.length>0 ? id.join(","):undefined};let copyname = { ...names,issue_tag_name:name};setNames(copyname);setIds(copy);chooseFunc(copy,copyname)}}
      />
      <Menus 
        update={update}
        ids={ids && ids.assigner_id}
        name={"负责人"} size={"large"} imgControl 
        names={names && names.assigner_name}
        lists={chargeList} searchFunc={(value)=>setCharge(value)}
        double={update ? true : false }
        chooseFunc={(id,name)=>{let copy = {...ids,assigner_id:id && id.length>0 ? id.join(","):undefined};let copyname = { ...names,assigner_name:name};setNames(copyname);setIds(copy);chooseFunc(copy,copyname)}}
      />
      { !update && <Menus 
          ids={ids && ids.sort_by}
          name={"排序"} size={"small"} 
          lists={array} 
          names={names && names.sortby_name}
          chooseFunc={(id,name)=>{let copy = {...ids,sort_by:id && id.length>0 ? id.join(","):undefined};let copyname = { ...names,sortby_name:name};setNames(copyname);setIds(copy);chooseFunc(copy,copyname)}}
        />
      }
      {update && <Menus 
        update={update}
        ids={ids && ids.milestone_id}
        name={"里程碑"} size={"large"} 
        names={names && names.milestone_name}
        lists={millstoneList} searchFunc={(value)=>setMillstone(value)}
        chooseFunc={(id,name)=>{let copy = {...ids,milestone_id:id && id.length>0 ? id.join(","):undefined};let copyname = { ...names,milestone_name:name};setNames(copyname);setIds(copy);chooseFunc(copy,copyname)}}
      />}
  </ul>
  )
}
export default forwardRef(AllMenus);