'use client'

import { ToggleonMouse } from '@/components/header/Header'
import { useMessage } from '@/hooks/useMessage'
import { useEffect, useState } from 'react'

export default function MenuDepth01(props) {
  const { setShowOutlineModal } = props
  const { getMessage } = useMessage()
  const [activeMenu, setActiveMenu] = useState(0)
  const onClickMenu = (menuNum) => {
    setActiveMenu(menuNum)
    setShowOutlineModal(menuNum === 0)
  }

  const menus = [
    { id: 0, name: '外壁線を描' },
    { id: 1, name: '補助線を描' },
    { id: 2, name: '屋根形状設定' },
    { id: 3, name: '軒下変更' },
    { id: 4, name: '外壁線の上げ下げ' },
    { id: 5, name: '銅線移動' },
    { id: 6, name: '特殊コーナー形状' },
  ]

  useEffect(() => {
    menus.forEach((menu) => {
      menu.isActive = menu.id === activeMenu
    })
  }, [menus, activeMenu])
  return (
    <div className="canvas-depth2-inner">
      <ul className="canvas-depth2-list">
        {menus.map((menu) => {
          return (
            <li className={`canvas-depth2-item ${menu.id === activeMenu ? 'active' : ''}`}>
              <button onClick={() => onClickMenu(menu.id)}>{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>
  )
}