'use client'

import { ToggleonMouse } from '@/components/header/Header'
import { useMessage } from '@/hooks/useMessage'
import { useEffect, useState } from 'react'
import { MENU } from '@/common/common'
import { currentMenuState } from '@/store/canvasAtom'
import { useSetRecoilState } from 'recoil'

export default function MenuDepth01(props) {
  const { setShowOutlineModal, type } = props
  const { getMessage } = useMessage()
  const [activeMenu, setActiveMenu] = useState()
  const setCurrentMenu = useSetRecoilState(currentMenuState)
  const onClickMenu = ({ id, menu, name }) => {
    setActiveMenu(menu)
    setShowOutlineModal(menu === MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
    setCurrentMenu(menu)
    if (type === 'outline') {
      setShowOutlineModal(id === 0)
    }
  }

  useEffect(() => {
    setActiveMenu(null)
  }, [type])

  const menuInfo = {
    outline: [
      // 지붕덮개
      { id: 0, name: 'plan.menu.roof.cover.outline.drawing', menu: MENU.ROOF_COVERING.EXTERIOR_WALL_LINE },
      { id: 1, name: 'plan.menu.roof.cover.roof.shape.setting', menu: MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS },
      { id: 2, name: 'plan.menu.roof.cover.roof.shape.edit', menu: MENU.ROOF_COVERING.ROOF_SHAPE_EDITING },
      { id: 3, name: 'plan.menu.roof.cover.auxiliary.line.drawing', menu: MENU.ROOF_COVERING.HELP_LINE_DRAWING },
    ],
    surface: [
      // 배치면
      { id: 0, name: 'plan.menu.placement.surface.drawing', menu: MENU.BATCH_CANVAS.BATCH_DRAWING },
      { id: 1, name: 'plan.menu.placement.surface.surface', menu: MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH },
      { id: 2, name: 'plan.menu.placement.surface.object', menu: MENU.BATCH_CANVAS.OBJECT_BATCH },
    ],
    module: [
      // 모듈, 회로 구성
      { id: 0, name: 'plan.menu.module.circuit.setting.default', menu: MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING },
      {
        id: 1,
        name: 'plan.menu.module.circuit.setting.circuit.trestle.setting',
        menu: MENU.MODULE_CIRCUIT_SETTING.CIRCUIT_TRESTLE_SETTING,
      },
    ],
  }
  return (
    <div className="canvas-depth2-inner">
      <ul className="canvas-depth2-list">
        {menuInfo[type].map((menu) => {
          return (
            <li key={menu.id} className={`canvas-depth2-item ${menu.menu === activeMenu ? 'active' : ''}`}>
              <button onClick={() => onClickMenu(menu)}>{getMessage(menu.name)}</button>
            </li>
          )
        })}
      </ul>
      <ul className="canvas-depth2-btn-list">
        <li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>
          <button>{getMessage('plan.menu.estimate.roof.alloc')}</button>
        </li>
        <li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>
          <button>屋根材の設定と変更</button>
        </li>
        <li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>
          <button>屋根面全体削除</button>
        </li>
      </ul>
    </div>
  )
}