import React , { useState , useEffect } from 'react';
import { Popover , Input , Spin } from 'antd';
import './branch.css';
import { getBranch , getTag } from '../GetData/getData';


export default (({ projectsId , repo_id , changeBranch , branch , owner })=>{
  const [ showValue , setShowValue ] = useState(branch);
  const [ inputValue , setInputValue] = useState(undefined);
  const [ nav , setNav ] = useState(0);
  const [ isSpin , setIsSpin ] = useState(true);
  const [ flag , setFlag ] = useState(false);

  const [ data , setData ] = useState(undefined);
  const [ datas , setDatas ] = useState(undefined);

  useEffect(()=>{
    setShowValue(branch);
  },[branch])
  useEffect(()=>{
    document.body.addEventListener('click', e => {
      let name = e.target.className;
      let turn = name == "ant-input OptionsInput" || name == "navli active"|| name == "navli" || name == "padding10 bor-bottom-greyE";
      if(turn){
        return;
      }else{
        setFlag(false);
      }
    })
  })

  useEffect(()=>{
    getBranchs(projectsId,owner);
  },[projectsId])


  async function getBranchs(id,owner){
    let result = await getBranch(id,owner);
    setData(result);
    setDatas(result);
    setIsSpin(false);
  }
  async function getTags(id,owner){
    let result = await getTag(id,owner);
    setData(result);
    setDatas(result);
    setIsSpin(false);
  }

  function changeInputValue(e){
    setInputValue(e.target.value);
    let filter = e.target.value ? data && data.length>0 && data.filter(item=>item.name.indexOf(e.target.value)>-1) : data;
    setDatas(filter);
  }

  function changeNav(nav){
    setNav(nav);
    setIsSpin(true);
    if(nav === 0){
      getBranchs(projectsId,owner);
    }else{
      getTags(projectsId,owner);
    }
  }
  function chooseitem(value){
    setShowValue(value);
    changeBranch(value);
  }


  const menu = (
    <div>
      <div className="padding10 bor-bottom-greyE">
        <Input 
          placeholder="请输入分支或标签名称搜索" 
          autocomplete="off" className="OptionsInput" value={inputValue} 
          onChange={changeInputValue} style={{width:"220px"}}
        />
        <ul className="navUl">
          <li className={nav==0?"navli active":"navli"} onClick={()=>changeNav(0)}><i className="iconfont icon-fenzhi1 font-14 mr3"></i>分支列表</li>
          <li className={nav==1?"navli active":"navli"} onClick={()=>changeNav(1)}><i className="iconfont icon-biaoqian3 font-14 mr3"></i>标签列表</li>
        </ul>
      </div>
      <Spin spinning={isSpin}>
        <ul className="OptionsUl" id="ul-btn">
          {
            datas && datas.length>0 ?
            datas.map((item,key)=>{
              return(
                <li key={key} onClick={()=>chooseitem(item.name)}><a className="task-hide ulALink">{item.name}</a></li>
              )
            }):
            <p className="listTips">暂无{inputValue}{nav === 0 ?"分支":"标签"}~</p>
          }
        </ul>
      </Spin>
    </div>
  );
  return(
    <Popover placement="bottom" visible={flag} content={menu} onClick={()=>setFlag(!flag)} overlayClassName="branch-tagBox-list">
      <div className="branch-tagBox">
        <span className="color-grey-9 mr3 ml8">{nav === 0 ?"分支":"标签"}:</span>
        <a className="ant-dropdown-link">
          {showValue}
        </a>
        <i className="showtag iconfont icon-xiajiantou font-14 color-grey-9 mr8" />
      </div>
    </Popover>
  )
})