import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { currentMenuState, currentObjectState } from '@/store/canvasAtom'
import { useEffect, useState } from 'react'
import { MENU } from '@/common/common'
import AuxiliaryMove from '@/components/floor-plan/modal/auxiliary/AuxiliaryMove'
import AuxiliarySize from '@/components/floor-plan/modal/auxiliary/AuxiliarySize'
import { usePopup } from '@/hooks/usePopup'
import { v4 as uuidv4 } from 'uuid'
import GridMove from '@/components/floor-plan/modal/grid/GridMove'
import GridCopy from '@/components/floor-plan/modal/grid/GridCopy'
import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal'
import { gridColorState } from '@/store/gridAtom'
import { contextPopupPositionState } from '@/store/popupAtom'
import AuxiliaryCopy from '@/components/floor-plan/modal/auxiliary/AuxiliaryCopy'
import SizeSetting from '@/components/floor-plan/modal/object/SizeSetting'
import RoofMaterialSetting from '@/components/floor-plan/modal/object/RoofMaterialSetting'
import DormerOffset from '@/components/floor-plan/modal/object/DormerOffset'
import FontSetting from '@/components/common/font/FontSetting'
import DimensionLineSetting from '@/components/floor-plan/modal/dimensionLine/DimensionLineSetting'
import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
import LinePropertySetting from '@/components/floor-plan/modal/lineProperty/LinePropertySetting'
import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/FlowDirectionSetting'
import { useMessage } from '@/hooks/useMessage'
import { useCanvasEvent } from '@/hooks/useCanvasEvent'

export function useContextMenu() {
  const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
  const setContextPopupPosition = useSetRecoilState(contextPopupPositionState) // 현재 메뉴
  const [contextMenu, setContextMenu] = useState([[]]) // 메뉴.object 별 context menu
  const [currentContextMenu, setCurrentContextMenu] = useState(null) // 선택한 contextMenu
  const currentObject = useRecoilValue(currentObjectState)
  const { getMessage } = useMessage()
  const { addPopup } = usePopup()
  const [popupId, setPopupId] = useState(uuidv4())
  const [gridColor, setGridColor] = useRecoilState(gridColorState)
  const { handleZoomClear } = useCanvasEvent()
  const currentMenuSetting = (position) => {
    switch (currentMenu) {
      case MENU.PLAN_DRAWING:
        setContextMenu([
          [
            {
              id: 'gridMove',
              name: getMessage('modal.grid.move'),
              component: <GridMove id={popupId} />,
            },
            {
              id: 'gridCopy',
              name: getMessage('modal.grid.copy'),
              component: <GridCopy id={popupId} />,
            },
            {
              id: 'gridColorEdit',
              name: getMessage('modal.grid.color.edit'),
              component: <ColorPickerModal id={popupId} color={gridColor} setColor={setGridColor} />,
            },
            {
              id: 'remove',
              name: getMessage('delete'),
            },
            {
              id: 'removeAll',
              name: getMessage('delete.all'),
            },
          ],
        ])
        break
      case MENU.ROOF_COVERING.EXTERIOR_WALL_LINE:
      case MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS:
      case MENU.ROOF_COVERING.ROOF_SHAPE_PASSIVITY_SETTINGS:
      case MENU.ROOF_COVERING.ROOF_SHAPE_EDITING:
      case MENU.ROOF_COVERING.HELP_LINE_DRAWING:
      case MENU.ROOF_COVERING.EAVES_KERAVA_EDIT:
      case MENU.ROOF_COVERING.MOVEMENT_SHAPE_UPDOWN:
      case MENU.ROOF_COVERING.OUTLINE_EDIT_OFFSET:
      case MENU.ROOF_COVERING.ROOF_SHAPE_ALLOC:
      case MENU.ROOF_COVERING.DEFAULT:
        setContextMenu([
          [
            {
              id: 'refresh',
              name: getMessage('refresh'),
              fn: () => handleZoomClear(),
            },
            {
              id: 'roofMaterialPlacement',
              name: getMessage('contextmenu.roof.material.placement'),
            },
            {
              id: 'roofMaterialRemove',
              name: getMessage('contextmenu.roof.material.remove'),
            },
            {
              id: 'roofMaterialRemoveAll',
              name: getMessage('contextmenu.roof.material.remove.all'),
            },
            {
              id: 'selectMove',
              name: getMessage('contextmenu.select.move'),
            },
            {
              id: 'wallLineRemove',
              name: getMessage('contextmenu.wallline.remove'),
            },
          ],
          [
            {
              id: 'sizeEdit',
              name: getMessage('contextmenu.size.edit'),
              component: <AuxiliarySize id={popupId} />,
            },
            {
              id: 'auxiliaryMove',
              name: `${getMessage('contextmenu.auxiliary.move')}(M)`,
              component: <AuxiliaryMove id={popupId} />,
            },
            {
              id: 'auxiliaryCopy',
              name: `${getMessage('contextmenu.auxiliary.copy')}(C)`,
              component: <AuxiliaryCopy id={popupId} />,
            },
            {
              id: 'auxiliaryRemove',
              name: `${getMessage('contextmenu.auxiliary.remove')}(D)`,
            },
            {
              id: 'auxiliaryVerticalBisector',
              name: getMessage('contextmenu.auxiliary.vertical.bisector'),
            },
            {
              id: 'auxiliaryCut',
              name: getMessage('contextmenu.auxiliary.cut'),
            },
            {
              id: 'auxiliaryRemoveAll',
              name: getMessage('contextmenu.auxiliary.remove.all'),
            },
          ],
        ])
        break
      case MENU.BATCH_CANVAS.SLOPE_SETTING:
      case MENU.BATCH_CANVAS.BATCH_DRAWING:
      case MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH:
      case MENU.BATCH_CANVAS.OBJECT_BATCH:
      case MENU.BATCH_CANVAS.ALL_REMOVE:
      case MENU.BATCH_CANVAS.DEFAULT:
        setContextMenu([
          [
            {
              id: 'sizeEdit',
              name: getMessage('contextmenu.size.edit'),
            },
            {
              id: 'remove',
              name: `${getMessage('contextmenu.remove')}(D)`,
            },
            {
              id: 'move',
              name: `${getMessage('contextmenu.move')}(M)`,
            },
            {
              id: 'copy',
              name: `${getMessage('contextmenu.copy')}(C)`,
            },
          ],
          [
            {
              id: 'roofMaterialEdit',
              name: getMessage('contextmenu.roof.material.edit'),
            },
            {
              id: 'linePropertyEdit',
              name: getMessage('contextmenu.line.property.edit'),
              component: <LinePropertySetting id={popupId} />,
            },
            {
              id: 'flowDirectionEdit',
              name: getMessage('contextmenu.flow.direction.edit'),
            },
          ],
        ])
        break
      default:
        setContextMenu([])
        break
    }
  }

  const handleClick = (e, menu) => {
    setContextPopupPosition({
      x: e.clientX,
      y: e.clientY,
    })
    setCurrentContextMenu(menu)
  }

  useEffect(() => {
    currentMenuSetting()
  }, [gridColor, currentMenu])

  useEffect(() => {
    if (currentContextMenu?.component) addPopup(popupId, 1, currentContextMenu?.component)
  }, [currentContextMenu])

  useEffect(() => {
    if (currentObject?.name) {
      switch (currentObject.name) {
        case 'triangleDormer':
        case 'pentagonDormer':
          setContextMenu([
            [
              {
                id: 'sizeEdit',
                name: getMessage('contextmenu.size.edit'),
                component: <SizeSetting id={popupId} target={currentObject} />,
              },
              {
                id: 'dormerRemove',
                name: `${getMessage('contextmenu.remove')}(D)`,
              },
              {
                id: 'dormerMove',
                name: `${getMessage('contextmenu.move')}(M)`,
              },
              {
                id: 'dormerCopy',
                name: `${getMessage('contextmenu.copy')}(C)`,
              },
              {
                id: 'roofMaterialEdit',
                name: getMessage('contextmenu.roof.material.edit'),
                component: <RoofMaterialSetting id={popupId} />,
              },
              {
                id: 'dormerOffset',
                name: getMessage('contextmenu.dormer.offset'),
                component: <DormerOffset id={popupId} />,
              },
            ],
          ])
          break
        case 'roof':
          setContextMenu([
            [
              {
                id: 'sizeEdit',
                name: '사이즈 변경',
                component: <SizeSetting id={popupId} />,
              },
              {
                id: 'roofMaterialRemove',
                name: `${getMessage('contextmenu.remove')}(D)`,
              },
              {
                id: 'roofMaterialMove',
                name: `${getMessage('contextmenu.move')}(M)`,
              },
              {
                id: 'roofMaterialCopy',
                name: `${getMessage('contextmenu.copy')}(C)`,
              },
            ],
            [
              {
                id: 'roofMaterialEdit',
                name: getMessage('contextmenu.roof.material.edit'),
                component: <RoofAllocationSetting id={popupId} />,
              },
              {
                id: 'linePropertyEdit',
                name: getMessage('contextmenu.line.property.edit'),
                component: <LinePropertySetting id={popupId} />,
              },
              {
                id: 'flowDirectionEdit',
                name: getMessage('contextmenu.flow.direction.edit'),
                component: <FlowDirectionSetting id={popupId} target={currentObject} />,
              },
            ],
          ])
          break
        case 'opening':
          setContextMenu([
            [
              {
                id: 'sizeEdit',
                name: getMessage('contextmenu.size.edit'),
              },
              {
                id: 'openingRemove',
                name: `${getMessage('contextmenu.remove')}(D)`,
              },
              {
                id: 'openingMove',
                name: `${getMessage('contextmenu.move')}(M)`,
              },
              {
                id: 'openingCopy',
                name: `${getMessage('contextmenu.copy')}(C)`,
              },
              {
                id: 'openingOffset',
                name: getMessage('contextmenu.opening.offset'),
              },
            ],
          ])
          break
        case 'lengthText':
          setContextMenu([
            [
              {
                id: 'lengthTextRemove',
                name: getMessage('contextmenu.remove'),
              },
              {
                id: 'lengthTextMove',
                name: getMessage('contextmenu.move'),
              },
              {
                id: 'lengthTextAuxiliaryLineEdit',
                name: getMessage('contextmenu.dimension.auxiliary.line.edit'),
              },
              {
                id: 'displayEdit',
                name: getMessage('contextmenu.display.edit'),
              },
            ],
          ])
          break
        case 'commonText':
          setContextMenu([
            [
              {
                id: 'commonTextRemove',
                name: getMessage('contextmenu.remove'),
              },
              {
                id: 'commonTextMove',
                name: getMessage('contextmenu.move'),
              },
              {
                id: 'commonTextCopy',
                name: getMessage('contextmenu.copy'),
              },
              {
                id: 'commonTextFontSetting',
                name: getMessage('contextmenu.font.setting'),
                component: <FontSetting id={popupId} type={'commonText'} />,
              },
              {
                id: 'commonTextEdit',
                name: getMessage('contextmenu.edit'),
              },
            ],
          ])
          break
        case 'lineGrid':
          setContextMenu([
            [
              {
                id: 'gridMove',
                name: getMessage('modal.grid.move'),
              },
              {
                id: 'gridCopy',
                name: getMessage('modal.grid.copy'),
              },
              {
                id: 'gridColorEdit',
                name: getMessage('contextmenu.grid.color.edit'),
              },
              {
                id: 'remove',
                name: getMessage('contextmenu.remove'),
              },
              {
                id: 'removeAll',
                name: getMessage('contextmenu.remove.all'),
              },
            ],
          ])
          break
        case 'dimensionLine':
          setContextMenu([
            [
              {
                id: 'dimensionLineRemove',
                name: getMessage('contextmenu.remove'),
              },
              {
                id: 'dimensionLineMove',
                name: getMessage('contextmenu.move'),
              },
              {
                id: 'dimensionAuxiliaryLineEdit',
                name: getMessage('contextmenu.dimension.auxiliary.line.edit'),
              },
              {
                id: 'dimensionLineDisplayEdit',
                name: getMessage('contextmenu.display.edit'),
                component: <DimensionLineSetting id={popupId} />,
              },
            ],
          ])
          break
        case 'shadow':
          setContextMenu([
            [
              {
                id: 'sizeEdit',
                name: getMessage('contextmenu.size.edit'),
                component: <SizeSetting id={popupId} />,
              },
              {
                id: 'remove',
                name: `${getMessage('contextmenu.remove')}(D)`,
              },
              {
                id: 'move',
                name: `${getMessage('contextmenu.move')}(M)`,
              },
              {
                id: 'copy',
                name: `${getMessage('contextmenu.copy')}(C)`,
              },
            ],
          ])
          break
        default:
          currentMenuSetting()
      }
    } else {
      currentMenuSetting()
    }
  }, [currentObject])

  return {
    contextMenu,
    currentContextMenu,
    setCurrentContextMenu,
    handleClick,
  }
}