'use client'
import { useState } from 'react'
import { useRecoilState } from 'recoil'
import { modalState } from '@/store/modalAtom'
import { settingModalFirstOptionsState } from '@/store/settingAtom'
import QSelectBox from '@/components/common/select/QSelectBox'
import { useMessage } from '@/hooks/useMessage'
import { post } from '@/lib/Axios'
import { currentMenuState } from '@/store/canvasAtom'
import { MENU } from '@/common/common'
import RoofCoveringMenu from '@/components/floor-plan/RoofCoveringMenu'

export default function CanvasMenu() {
  const [objectNo, setObjectNo] = useState('test123240912001')
  const [modalOption, setModalOption] = useRecoilState(modalState) //modal 열림닫힘 state
  const [menuNumber, setMenuNumber] = useState(null)
  const [vertical, setVertical] = useState(true)
  const { getMessage } = useMessage()
  const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
  const [currentMenu, setCurrentMenu] = useRecoilState(currentMenuState)

  const onClickNav = (menu) => {
    setCurrentMenu(menu)
  }

  const settingsModalOptions = useRecoilState(settingModalFirstOptionsState)

  // 저장버튼(btn08) 클릭 시 호출되는 함수
  const handleSaveSettings = async () => {
    try {
      // 서버에 전송할 데이터
      const dataToSend = {
        option1: settingsModalOptions[0].option1.map((item) => ({
          column: item.column,
          selected: item.selected,
        })),
        option2: settingsModalOptions[0].option2.map((item) => ({
          column: item.column,
          selected: item.selected,
        })),
      }

      const patternData = {
        objectNo,
        assignDisplay: dataToSend.option1[0].selected,
        drawDisplay: dataToSend.option1[1].selected,
        gridDisplay: dataToSend.option1[2].selected,
        charDisplay: dataToSend.option1[3].selected,
        flowDisplay: dataToSend.option1[4].selected,
        hallwayDimenDisplay: dataToSend.option1[5].selected,
        actualDimenDisplay: dataToSend.option1[6].selected,
        noDimenDisplay: dataToSend.option1[7].selected,
        trestleDisplay: dataToSend.option1[8].selected,
        coordiDisplay: dataToSend.option1[9].selected,
        drawConverDisplay: dataToSend.option1[10].selected,
        onlyBorder: dataToSend.option2[0].selected,
        lineHatch: dataToSend.option2[1].selected,
        allPainted: dataToSend.option2[2].selected,
      }

      // HTTP POST 요청 보내기
      const response = await post({ url: `/api/canvas-management/canvas-settings`, data: patternData })

      // 응답 처리
      console.log('서버 응답:', response.data)
      alert('설정이 저장되었습니다.')
    } catch (error) {
      console.error('설정을 저장하는 동안 오류가 발생했습니다:', error)
      alert('설정을 저장하는 중 오류가 발생했습니다.')
    }
  }

  return (
    <div
      className={`canvas-menu-wrap ${Object.values(MENU.ROOF_COVERING).includes(currentMenu) || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}
    >
      <div className="canvas-menu-inner">
        <ul className="canvas-menu-list">
          <li className={`canvas-menu-item `} onClick={() => onClickNav(1)}>
            <button>
              <span className="menu-icon con00"></span>
              {getMessage('plan.menu.plan.drawing')}
            </button>
          </li>
          {
            <li
              className={`canvas-menu-item ${currentMenu === MENU.INITIAL_CANVAS_SETTING ? 'active' : ''}`}
              onClick={() => onClickNav(MENU.INITIAL_CANVAS_SETTING)}
            >
              <button>
                <span className="menu-icon con01"></span>
                {getMessage('plan.menu.placement.surface.initial.setting')}
              </button>
            </li>
          }
          <li
            className={`canvas-menu-item ${Object.values(MENU.ROOF_COVERING).includes(currentMenu) ? 'active' : ''}`}
            onClick={() => onClickNav(MENU.ROOF_COVERING.DEFAULT)}
          >
            <button>
              <span className="menu-icon con02"></span>
              {getMessage('plan.menu.root.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={() => setModalOption({ ...modalOption, option: 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" onClick={handleSaveSettings}></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 ${Object.values(MENU.ROOF_COVERING).includes(currentMenu) || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}
      >
        {Object.values(MENU.ROOF_COVERING).includes(currentMenu) && <RoofCoveringMenu />}
        {/*{menuNumber === 2 && <MenuDepth01 />}
        {menuNumber === 3 && <MenuDepth01 />}
        {menuNumber === 4 && <MenuDepth01 />}*/}
      </div>
    </div>
  )
}