import React from 'react';
import MenusRename from './menusRename';
import MenusAdd from './menusAdd';

const typeIcon = {
  init:"icon-initialize",build:"icon-structure",deploy:"icon-arrange",customize:"icon-newStage",confirm:'icon-sure'
}

function Menus({step,changeStep, menuList , renameFunc , checkDatas , addFunc }){
  
  function InitActive(key,stage_type,stage_id,stage_name){
    changeStep(key,stage_type,stage_id,stage_name);
  }

  // 新增阶段
  function getName(name,index){
    addFunc && addFunc(name,index);
  }

  return(
    <ul className="menus">
      {
        menuList && menuList.length > 0 && menuList.map((item,key)=>{
          return(
            <React.Fragment key={item.id} >
              <li onClick={()=>InitActive(item.show_index,item.stage_type,item.id,item.stage_name)} className={item.show_index === step ?"active":""}>
                <i className={`iconfont ${typeIcon[`${item.stage_type}`]}`}></i>
                <MenusRename renameFunc={renameFunc} id={item.id} name={item.stage_name} edit={item.stage_type !== "init" && item.stage_type !== "confirm"}/>
              </li>
              { key !== (menuList.length-1) && menuList.length < 7 ?
                <MenusAdd checkDatas={checkDatas} k={key+2} getName={getName}/>:""
              } 
            </React.Fragment>
          )
        })
      }
    </ul>
  )
}
export default Menus;