'use client'

import { useRecoilState, useSetRecoilState } from 'recoil'

import { MENU } from '@/common/common'
import { ToggleonMouse } from '@/components/header/Header'
import { useMessage } from '@/hooks/useMessage'
import { currentMenuState } from '@/store/canvasAtom'
import { modalState } from '@/store/modalAtom'

export default function RoofCoveringMenu() {
  const { getMessage } = useMessage()
  const [currentMenu, setCurrentMenu] = useRecoilState(currentMenuState)

  const setModalState = useSetRecoilState(modalState)

  const onClickNav = (menu) => {
    setCurrentMenu(menu)
    if (menu === MENU.ROOF_COVERING.EXTERIOR_WALL_LINE) {
      setModalState((prev) => ({ ...prev, outerwall: true }))
    } else {
      setModalState((prev) => ({ ...prev, outerwall: false }))
    }
  }

  return (
    <div className="canvas-depth2-inner">
      <ul className="canvas-depth2-list">
        <li className={`canvas-depth2-item ${currentMenu === MENU.ROOF_COVERING.EXTERIOR_WALL_LINE ? 'active' : ''}`}>
          <button onClick={(e) => onClickNav(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)}>{getMessage('plan.menu.root.cover.outline.drawing')}</button>
        </li>
        <li className={`canvas-depth2-item ${currentMenu === MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS ? 'active' : ''}`}>
          <button onClick={(e) => onClickNav(MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS)}>{getMessage('plan.menu.root.cover.roof.setting')}</button>
        </li>
        <li className={`canvas-depth2-item ${currentMenu === MENU.ROOF_COVERING.ROOF_SHAPE_EDITING ? 'active' : ''}`}>
          <button onClick={(e) => onClickNav(MENU.ROOF_COVERING.ROOF_SHAPE_EDITING)}>{getMessage('plan.menu.root.cover.roof.edit')}</button>
        </li>
        <li className={`canvas-depth2-item ${currentMenu === MENU.ROOF_COVERING.HELP_LINE_DRAWING ? 'active' : ''}`}>
          <button onClick={(e) => onClickNav(MENU.ROOF_COVERING.HELP_LINE_DRAWING)}>{getMessage('plan.menu.root.cover.sub.line')}</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>
  )
}