'use client'
import { useEffect, useState } from 'react'
import MenuDepth01 from './MenuDepth01'
import QSelectBox from '@/components/common/select/QSelectBox'
import { useMessage } from '@/hooks/useMessage'

export default function CanvasMenu(props) {
  const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal } = props
  const [menuNumber, setMenuNumber] = useState(null)
  const [vertical, setVertical] = useState(true)
  const [type, setType] = useState('')
  const { getMessage } = useMessage()
  const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
  const onClickNav = (number) => {
    setMenuNumber(number)
    if (number === 2) setType('outline')
    if (number === 3) setType('surface')
    if (number === 4) setType('module')
  }
  const menuProps = {
    setShowOutlineModal,
    type,
  }
  useEffect(() => {}, [menuNumber, type])

  return (
    <div className={`canvas-menu-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
      <div className="canvas-menu-inner">
        <ul className="canvas-menu-list">
          <li className={`canvas-menu-item ${menuNumber === 0 ? 'active' : ''}`} onClick={() => onClickNav(0)}>
            <button>
              <span className="menu-icon con00"></span>
              {getMessage('plan.menu.plan.drawing')}
            </button>
          </li>
          <li className={`canvas-menu-item ${menuNumber === 1 ? 'active' : ''}`} onClick={() => onClickNav(1)}>
            <button>
              <span className="menu-icon con01"></span>
              {getMessage('plan.menu.placement.surface.initial.setting')}
            </button>
          </li>
          <li
            className={`canvas-menu-item ${menuNumber === 2 ? 'active' : ''}`}
            onClick={() => {
              if (!showOutlineModal) setShowOutlineModal(true)
              // setModalOption({ ...modalOption, outerwall: true })
              onClickNav(2)
            }}
          >
            <button>
              <span className="menu-icon con02"></span>
              {getMessage('plan.menu.roof.cover')}
            </button>
          </li>
          <li className={`canvas-menu-item ${menuNumber === 3 ? 'active' : ''}`} onClick={() => onClickNav(3)}>
            <button>
              <span className="menu-icon con03"></span>
              {getMessage('plan.menu.placement.surface')}
            </button>
          </li>
          <li className={`canvas-menu-item ${menuNumber === 4 ? 'active' : ''}`} onClick={() => onClickNav(4)}>
            <button>
              <span className="menu-icon con04"></span>
              {getMessage('plan.menu.module.circuit.setting')}
            </button>
          </li>
          <li className={`canvas-menu-item ${menuNumber === 5 ? 'active' : ''}`} onClick={() => onClickNav(5)}>
            <button>
              <span className="menu-icon con06"></span>
              {getMessage('plan.menu.estimate')}
            </button>
          </li>
          <li className={`canvas-menu-item ${menuNumber === 6 ? 'active' : ''}`} onClick={() => onClickNav(6)}>
            <button>
              <span className="menu-icon con05"></span>
              {getMessage('plan.menu.simulation')}
            </button>
          </li>
        </ul>
        <div className="canvas-side-btn-wrap">
          {menuNumber !== 6 && menuNumber !== 5 && (
            <>
              <div className="btn-from">
                <button className="btn01"></button>
                <button className="btn02 active"></button>
                <button className="btn03 "></button>
              </div>
              <div className={`vertical-horizontal ${vertical ? 'on' : ''}`}>
                <span>{getMessage('plan.mode.vertical.horizontal')}</span>
                <button onClick={() => setVertical(!vertical)}>{vertical ? 'ON' : 'OFF'}</button>
              </div>
              <div className="select-box">
                <QSelectBox title={'瓦53A'} option={SelectOption} />
              </div>
              <div className="btn-from">
                <button className="btn04" onClick={() => setShowCanvasSettingModal(true)}></button>
                <button className="btn05"></button>
                <button className="btn06"></button>
              </div>
              <div className="size-control">
                <button className="control-btn minus"></button>
                <span>100%</span>
                <button className="control-btn plus"></button>
              </div>
              <div className="btn-from">
                <button className="btn07"></button>
                <button className="btn08"></button>
                <button className="btn09"></button>
              </div>
            </>
          )}

          {menuNumber === 5 && (
            <>
              <div className="ico-btn-from">
                <button className="btn-frame gray ico-flx act">
                  <span className="ico ico01"></span>
                  <span>{getMessage('plan.menu.estimate.roof.alloc')}</span>
                </button>
                <button className="btn-frame gray ico-flx">
                  <span className="ico ico02"></span>
                  <span>{getMessage('plan.menu.estimate.save')}</span>
                </button>
                <button className="btn-frame gray ico-flx">
                  <span className="ico ico03"></span>
                  <span>{getMessage('plan.menu.estimate.reset')}</span>
                </button>
                <button className="btn-frame gray ico-flx">
                  <span className="ico ico04"></span>
                  <span>{getMessage('plan.menu.estimate.copy')}</span>
                </button>
              </div>
            </>
          )}
          {menuNumber === 6 && (
            <>
              <div className="ico-btn-from">
                <button className="btn-frame gray ico-flx">
                  <span className="ico ico01"></span>
                  <span>{getMessage('plan.menu.simulation.excel')}</span>
                </button>
                <button className="btn-frame gray ico-flx">
                  <span className="ico ico01"></span>
                  <span>{getMessage('plan.menu.simulation.pdf')}</span>
                </button>
              </div>
            </>
          )}
        </div>
      </div>
      <div className={`canvas-depth2-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
        {menuNumber === 2 && <MenuDepth01 {...menuProps} />}
        {menuNumber === 3 && <MenuDepth01 {...menuProps} />}
        {menuNumber === 4 && <MenuDepth01 {...menuProps} />}
      </div>
    </div>
  )
}