import React ,{ useState , useRef , useEffect } from 'react';
import { Input , Menu , Icon } from 'antd';
import { getImageUrl } from 'educoder';
import Drop from './drop';
const { Search } = Input;

/**
 * @param {className} <li>的样式名称
 * @param {name} 未选择时显示的内容 
 * @param {lists} 下拉列表，从接口获取，需一一填充
 * @param {imgControl} 控制是否显示头像
 * @param {size} 下拉框宽度，small：120px,large:260px
 * @param {ids} 默认选择的项的id数组
 * @param {search} 搜索方法
 * @param {chooseFunc} 选择项后需调用列表的查询方法
 * @param {update} 编辑状态
 * @param {double} 是否可以多选
 */
function Menus({className,name, ids , lists , size , imgControl , searchFunc , chooseFunc , update , double ,names },ref){
  const dropRef = useRef(null);
  const [ chooseValue , setChooseValue ] = useState([]);
  const [ showValue , setShowValue ] = useState(undefined);

  useEffect(()=>{
    ids ? setChooseValue(ids.split(",")) : setChooseValue([]);
    setShowValue(names);
  },[ids,names])
  

  // 修改menus数组里的字段值
  function changeMenusValue(i){
    let l = ids;
    let id = i.id.toString();
    if(double){
      l = ids ? ids.split(",") : [] ;
      let nameArr = names ? names.split(",") : [] ;
      if(l && l.indexOf(id)>=0){
        l = l.filter(k=>k.toString() !== id);
        nameArr = nameArr.filter(k=>k.toString() !== i.name);
      }else{
        l.push(id);
        nameArr.push(i.name);
      }
      setChooseValue(l);
      setShowValue(nameArr.join(","));
      chooseFunc(l,nameArr.join(","));
    }else{
      if(l && l.indexOf(id)>=0){
        setChooseValue([]);
        setShowValue(undefined);
        chooseFunc([]);
      }else{
        setChooseValue([`${i.id}`]);
        setShowValue([i.name]);
        chooseFunc([id],i.name);
      }
      dropRef.current && dropRef.current.clearVisible(false);
    }
  }

  function menu(data){
    return <div className={`overlaydrop ${size}`}>
      { size !== "small" && 
        <div className="pb10"><Search placeholder={`搜索${name}`} onChange={(e)=>searchFunc(e.target.value)}/></div>
      }
      {
        data && data.length>0 ? 
        <Menu selectedKeys={chooseValue}>
        {
          data.map((i,j)=>{
            return <Menu.Item key={i.id}>
              {imgControl && <img src={getImageUrl(i.image_url)} alt=""/>}
              {i.color && <span style={{backgroundColor:i.color,marginRight:"0px"}} className="colorpiece"></span>}
              <span className="task-hide" onClick={()=>changeMenusValue(i)}>{i.name}</span>
              </Menu.Item>
          })
        }
        </Menu>
        :
        <div className="pl15">暂无{ids ? <span>'{name}'</span>: name}</div>
      }
    </div>
  }
  return(
    <li className={className || ""}>
      <Drop className={className} ref={dropRef} overlay={menu(lists)} placement={"bottomRight"} >
        <span className="task-hide">{showValue || (update ? `更换${name}` : name) }</span>
        <Icon type="caret-down" className="color-grey-6" />
      </Drop>
    </li>
  )
}
export default Menus;