import React , { useState , useEffect } from 'react';
import { Input } from 'antd';

function menusAdd ({ getName , checkDatas , k }){
  const [ show, setShow ] = useState(false);
  const [ value , setValue ] = useState(undefined);
  const [ index , setIndex ] = useState(undefined);
  const [ref, setRef ] = useState(undefined);
  const [put, setPut ] = useState(false);

  useEffect(() => {
    if (put && ref) {
      ref.focus();
    }
  })
  useEffect(() => {
    if (k) {
      setIndex(k);
    }
  },[k])


  function blurInput(){
    if(value){
      getName(value , index);
    }
    setValue(undefined);
    setShow(false);
    setPut(false);
  }

  function showInput(){
    let c = checkDatas();
    if(c || c === "" ){
      setShow(true);
      setPut(true);
    }
  }

  return(
    <li className="menuAdd">
      { !show && <i className="iconfont icon-tianjia" onClick={showInput}></i> }
      <Input 
        ref={(el) => setRef(el)} 
        size={"small"} 
        maxLength={8} 
        style={{width:"75px",display : `${show?"block":'none'}`}} 
        placeholder="新阶段名称" 
        value={value} 
        onChange={(e)=>setValue(e.target.value)} onBlur={blurInput} 
      />
    </li>
  )
}
export default menusAdd;