'use client'

import { useEffect, useState } from 'react'

import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'

import MenuDepth01 from './MenuDepth01'
import QSelectBox from '@/components/common/select/QSelectBox'
import { v4 as uuidv4 } from 'uuid'
import { useMessage } from '@/hooks/useMessage'
import { usePlan } from '@/hooks/usePlan'
import { useSwal } from '@/hooks/useSwal'
import { useEvent } from '@/hooks/useEvent'
import { canvasState, canvasZoomState, currentCanvasPlanState, currentMenuState, verticalHorizontalModeState } from '@/store/canvasAtom'
import { sessionStore } from '@/store/commonAtom'
import { outerLinePointsState } from '@/store/outerLineAtom'
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
import { settingModalFirstOptionsState, wordDisplaySelector } from '@/store/settingAtom'
import { MENU } from '@/common/common'

import KO from '@/locales/ko.json'
import JA from '@/locales/ja.json'
import { useCanvasEvent } from '@/hooks/useCanvasEvent'
import { popupState } from '@/store/popupAtom'
import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
import { usePopup } from '@/hooks/usePopup'
import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
import PlacementShapeSetting from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
import { useCommonUtils } from '@/hooks/common/useCommonUtils'

const canvasMenus = [
  { index: 0, name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING },
  { index: 1, name: 'plan.menu.placement.surface.initial.setting', icon: 'con01', title: MENU.INITIAL_CANVAS_SETTING },
  { index: 2, name: 'plan.menu.roof.cover', icon: 'con02', title: MENU.ROOF_COVERING.DEFAULT },
  { index: 3, name: 'plan.menu.placement.surface', icon: 'con03', title: MENU.BATCH_CANVAS.DEFAULT },
  { index: 4, name: 'plan.menu.module.circuit.setting', icon: 'con04', title: MENU.MODULE_CIRCUIT_SETTING.DEFAULT },
  { index: 5, name: 'plan.menu.estimate', icon: 'con06', title: MENU.ESTIMATE.DEFAULT },
  { index: 6, name: 'plan.menu.simulation', icon: 'con05', title: MENU.POWER_GENERATION_SIMULATION.DEFAULT },
]

export default function CanvasMenu(props) {
  const { menuNumber, setMenuNumber } = props

  const { addPopup, closePopup } = usePopup()
  const [type, setType] = useState('')

  const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState)
  const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
  const setCurrentMenu = useSetRecoilState(currentMenuState)
  const setOuterLinePoints = useSetRecoilState(outerLinePointsState)
  const setPlacementPoints = useSetRecoilState(placementShapeDrawingPointsState)
  const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
  const [currentCanvasPlan, setcurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
  const { handleZoomClear } = useCanvasEvent()

  const globalLocale = useRecoilValue(globalLocaleStore)
  const canvas = useRecoilValue(canvasState)
  const sessionState = useRecoilValue(sessionStore)

  const { getMessage } = useMessage()
  const { saveCanvas } = usePlan()
  const { swalFire } = useSwal()
  const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useEvent()

  const [commonFunctionState, setCommonFunctionState] = useState({
    text: false,
    dimension: false,
    distance: false,
  })

  const { commonFunctions } = useCommonUtils({
    commonFunctionState,
    setCommonFunctionState,
  })

  const [popup, setPopup] = useRecoilState(popupState)

  const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]

  const onClickNav = (menu) => {
    setMenuNumber(menu.index)
    setCurrentMenu(menu.title)

    switch (menu.index) {
      case 1:
        setType('placementShape')
        onClickPlacementInitialMenu()
        break
      case 2:
        setType('outline')
        break
      case 3:
        setType('surface')
        break
      case 4:
        setType('module')
        break
    }
  }
  const menuProps = {
    type,
  }

  const settingsModalOptions = useRecoilState(settingModalFirstOptionsState)

  useEffect(() => {
    if (menuNumber === 1) {
      onClickPlacementInitialMenu()
    }
  }, [menuNumber, type])

  // 저장버튼(btn08) 클릭 시 호출되는 함수
  const handleSaveCanvas = async () => {
    // swalFire({
    //   text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.save'),
    //   type: 'confirm',
    //   confirmFn: async () => {
    await saveCanvas(sessionState.userId)
    //   },
    // })
  }

  const [placementInitialId, setPlacementInitialId] = useState(uuidv4())
  const placementInitialProps = {
    id: placementInitialId,
    pos: {
      x: 50,
      y: 180,
    },
  }
  const onClickPlacementInitialMenu = () => {
    addPopup(placementInitialId, 1, <PlacementShapeSetting {...placementInitialProps} />)
    // setShowPlaceShapeModal(true)
  }

  const handleClear = () => {
    setOuterLinePoints([])
    setPlacementPoints([])
    canvas?.clear()
  }
  //
  // const handleZoomClear = () => {
  //   setCanvasZoom(100)
  //   canvas.set({ zoom: 1 })
  //   canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
  //   canvas.renderAll()
  // }

  const handlePopup = () => {
    const id = uuidv4()
    addPopup(id, 0, <SettingModal01 id={id} />)
  }

  useEffect(() => {
    if (globalLocale === 'ko') {
      setAppMessageState(KO)
    } else {
      setAppMessageState(JA)
    }
  }, [menuNumber, type, globalLocale])

  return (
    <div className={`canvas-menu-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
      <div className="canvas-menu-inner">
        <ul className="canvas-menu-list">
          {canvasMenus.map((menu) => {
            return (
              <li
                key={`canvas-menu-${menu.index}`}
                className={`canvas-menu-item ${menuNumber === menu.index ? 'active' : ''}`}
                onClick={() => onClickNav(menu)}
              >
                <button>
                  <span className={`menu-icon ${menu.icon}`}></span>
                  {getMessage(menu.name)}
                </button>
              </li>
            )
          })}
        </ul>
        <div className="canvas-side-btn-wrap">
          {menuNumber !== 6 && menuNumber !== 5 && (
            <>
              {
                <div className={`vertical-horizontal ${verticalHorizontalMode ? 'on' : ''}`}>
                  <span>{getMessage('plan.mode.vertical.horizontal')}</span>
                  <button onClick={() => setVerticalHorizontalMode(!verticalHorizontalMode)}>{verticalHorizontalMode ? 'ON' : 'OFF'}</button>
                </div>
              }
              <div className="btn-from">
                <button className={`btn01 ${commonFunctionState.text ? 'active' : ''}`} onClick={() => commonFunctions('text')}></button>
                <button className={`btn02 ${commonFunctionState.dimension ? 'active' : ''} `} onClick={() => commonFunctions('dimension')}></button>
                <button className={`btn03 ${commonFunctionState.distance ? 'active' : ''} `} onClick={() => commonFunctions('distance')}></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="btn04" onClick={handlePopup}></button>
                <button className="btn05"></button>
                <button className="btn06"></button>
              </div>
              <div className="size-control">
                <button
                  className="control-btn minus"
                  onClick={() => {
                    canvas.setZoom(canvas.getZoom() - 0.1)
                  }}
                ></button>
                <span>{canvasZoom}%</span>
                <button className="control-btn plus" onClick={handleZoomClear}></button>
              </div>
              <div className="btn-from">
                <button className="btn07" onClick={handleClear}></button>
                <button className="btn08" onClick={handleSaveCanvas}></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 || menuNumber === 3 || menuNumber === 4) && <MenuDepth01 {...menuProps} />}
      </div>
    </div>
  )
}