import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { canvasSettingState, canvasState, currentMenuState, currentObjectState } from '@/store/canvasAtom'
import { useEffect, useState } from 'react'
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, contextPopupState } from '@/store/popupAtom'
import AuxiliaryEdit from '@/components/floor-plan/modal/auxiliary/AuxiliaryEdit'
import SizeSetting from '@/components/floor-plan/modal/object/SizeSetting'
import DormerOffset from '@/components/floor-plan/modal/object/DormerOffset'
import FontSetting from '@/components/common/font/FontSetting'
import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/FlowDirectionSetting'

import { useCommonUtils } from './common/useCommonUtils'
import { useMessage } from '@/hooks/useMessage'
import { useCanvasEvent } from '@/hooks/useCanvasEvent'
import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
import PanelEdit, { PANEL_EDIT_TYPE } from '@/components/floor-plan/modal/module/PanelEdit'
import DimensionLineSetting from '@/components/floor-plan/modal/dimensionLine/DimensionLineSetting'
import ColumnRemove from '@/components/floor-plan/modal/module/column/ColumnRemove'
import ColumnInsert from '@/components/floor-plan/modal/module/column/ColumnInsert'
import RowRemove from '@/components/floor-plan/modal/module/row/RowRemove'
import RowInsert from '@/components/floor-plan/modal/module/row/RowInsert'
import { useObjectBatch } from '@/hooks/object/useObjectBatch'
import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
import { fontSelector, globalFontAtom } from '@/store/fontAtom'
import { useLine } from '@/hooks/useLine'
import { useSwal } from '@/hooks/useSwal'
import ContextRoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting'
import { useCanvasSetting } from './option/useCanvasSetting'
import { useGrid } from './common/useGrid'
import { useAdsorptionPoint } from './useAdsorptionPoint'
import { useRoofFn } from '@/hooks/common/useRoofFn'
import { MODULE_ALIGN_TYPE, useModule } from './module/useModule'
import PlacementSurfaceLineProperty from '@/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty'
import { selectedMenuState } from '@/store/menuAtom'
import { useTrestle } from './module/useTrestle'
import { useCircuitTrestle } from './useCirCuitTrestle'
import { usePolygon } from '@/hooks/usePolygon'
import { useText } from '@/hooks/useText'

export function useContextMenu() {
  const canvas = useRecoilValue(canvasState)
  const canvasSetting = useRecoilValue(canvasSettingState)
  const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
  const setContextPopupPosition = useSetRecoilState(contextPopupPositionState) // 현재 메뉴
  const [contextMenu, setContextMenu] = useRecoilState(contextMenuListState) // 메뉴.object 별 context menu
  const [currentContextMenu, setCurrentContextMenu] = useRecoilState(contextPopupState) // 선택한 contextMenu
  const currentObject = useRecoilValue(currentObjectState)
  const { getMessage } = useMessage()
  const { addPopup } = usePopup()
  const [popupId, setPopupId] = useState(uuidv4())
  const [gridColor, setGridColor] = useRecoilState(gridColorState)
  const { deleteObject, moveObject, copyObject, editText, changeDimensionExtendLine, deleteOuterLineObject } = useCommonUtils()
  const [qContextMenu, setQContextMenu] = useRecoilState(contextMenuState)
  const [cell, setCell] = useState(null)
  const [column, setColumn] = useState(null)
  const { handleZoomClear } = useCanvasEvent()
  const { moveObjectBatch, copyObjectBatch } = useObjectBatch({})
  const { moveSurfaceShapeBatch, rotateSurfaceShapeBatch } = useSurfaceShapeBatch({})
  const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
  const { addLine, removeLine } = useLine()
  const { removeGrid } = useGrid()
  const { removeAdsorptionPoint } = useAdsorptionPoint()
  const commonTextFont = useRecoilValue(fontSelector('commonText'))
  const { settingsData, setSettingsDataSave } = useCanvasSetting(false)
  const { swalFire } = useSwal()
  const { alignModule, modulesRemove, moduleRoofRemove } = useModule()
  const { removeRoofMaterial, removeAllRoofMaterial, moveRoofMaterial, removeOuterLines, setSurfaceShapePattern } = useRoofFn()
  const selectedMenu = useRecoilValue(selectedMenuState)
  const { isAllComplete, clear: resetModule } = useTrestle()
  const { isExistCircuit } = useCircuitTrestle()
  const { changeCorridorDimensionText } = useText()
  const { setPolygonLinesActualSize, drawDirectionArrow } = usePolygon()
  const currentMenuSetting = () => {
    switch (selectedMenu) {
      case 'outline':
        break
      // default:
      //   setContextMenu([])
      //   break
    }
  }

  const handleClick = (e, menu) => {
    if (menu?.fn) {
      menu.fn(qContextMenu.currentMousePos)
    }

    setContextPopupPosition({
      x: window.innerWidth / 2,
      y: 180,
    })
    setCurrentContextMenu(menu)
    currentMenuSetting()
    setQContextMenu({ ...qContextMenu, visible: false })
  }

  const handleKeyup = (e) => {
    let menu = null
    for (let i = 0; i < contextMenu.length; i++) {
      const temp = contextMenu[i].filter((menu) => {
        return menu.shortcut?.includes(e.key)
      })

      if (temp.length > 0) menu = temp[0]
    }

    if (menu) handleClick(null, menu)
  }

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

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

  useEffect(() => {
    //console.log('currentObject', currentObject)
    if (currentObject?.name) {
      switch (currentObject.name) {
        case 'triangleDormer':
        case 'pentagonDormer':
          if (selectedMenu === 'surface') {
            setContextMenu([
              [
                {
                  id: 'dormerRemove',
                  shortcut: ['d', 'D'],
                  name: `${getMessage('contextmenu.remove')}(D)`,
                  fn: () => deleteObject(),
                },
                {
                  id: 'dormerMove',
                  shortcut: ['m', 'M'],
                  name: `${getMessage('contextmenu.move')}(M)`,
                  fn: () => moveObjectBatch(),
                },
                {
                  id: 'dormerCopy',
                  shortcut: ['c', 'C'],
                  name: `${getMessage('contextmenu.copy')}(C)`,
                  fn: () => copyObject(),
                },
                {
                  id: 'dormerOffset',
                  name: getMessage('contextmenu.dormer.offset'),
                  component: <DormerOffset id={popupId} title={getMessage('contextmenu.dormer.offset')} />,
                },
              ],
            ])
          }
          break
        case 'roof':
        case 'auxiliaryLine':
        case 'hip':
        case 'ridge':
        case 'eaveHelpLine':
          if (selectedMenu === 'surface') {
            setContextMenu([
              [
                {
                  id: 'sizeEdit',
                  name: getMessage('contextmenu.size.edit'),
                  component: <SizeSetting id={popupId} target={currentObject} />,
                },
                {
                  id: 'rotate',
                  name: `${getMessage('contextmenu.rotate')}`,
                  fn: () => rotateSurfaceShapeBatch(),
                },
                {
                  id: 'roofMaterialRemove',
                  shortcut: ['d', 'D'],
                  name: `${getMessage('contextmenu.remove')}(D)`,
                  fn: () => deleteObject(),
                },
                {
                  id: 'roofMaterialMove',
                  shortcut: ['m', 'M'],
                  name: `${getMessage('contextmenu.move')}(M)`,
                  fn: () => moveSurfaceShapeBatch(),
                },
                {
                  id: 'roofMaterialCopy',
                  shortcut: ['c', 'C'],
                  name: `${getMessage('contextmenu.copy')}(C)`,
                  fn: () => copyObject(),
                },
              ],
              [
                {
                  id: 'roofMaterialEdit',
                  name: getMessage('contextmenu.roof.material.edit'),
                  component: <ContextRoofAllocationSetting id={popupId} />,
                },
                {
                  id: 'linePropertyEdit',
                  name: getMessage('contextmenu.line.property.edit'),
                  fn: () => {
                    if (+canvasSetting.roofSizeSet === 3) {
                      swalFire({ text: getMessage('contextmenu.line.property.edit.roof.size.3') })
                    } else {
                      addPopup(popupId, 1, <PlacementSurfaceLineProperty id={popupId} roof={currentObject} />)
                    }
                  },
                  // component: <LinePropertySetting id={popupId} target={currentObject} />,
                },
                {
                  id: 'flowDirectionEdit',
                  name: getMessage('contextmenu.flow.direction.edit'),
                  component: <FlowDirectionSetting id={popupId} target={currentObject} />,
                },
              ],
            ])
          } else if (selectedMenu === 'outline') {
            setContextMenu([
              [
                {
                  id: 'roofMaterialPlacement',
                  name: getMessage('contextmenu.roof.material.placement'),
                  component: <RoofAllocationSetting id={popupId} />,
                },

                {
                  id: 'roofMaterialRemoveAll',
                  name: getMessage('contextmenu.roof.material.remove.all'),
                  fn: () => removeAllRoofMaterial(),
                },
                {
                  id: 'selectMove',
                  name: getMessage('contextmenu.select.move'),
                  fn: (currentMousePos) => {
                    moveRoofMaterial(currentMousePos)
                  },
                },
                {
                  id: 'wallLineRemove',
                  name: getMessage('contextmenu.wallline.remove'),
                  fn: (currentMousePos) => {
                    removeOuterLines(currentMousePos)
                  },
                },
              ],
              [
                {
                  id: 'sizeEdit',
                  name: getMessage('contextmenu.size.edit'),
                  component: <AuxiliarySize id={popupId} />,
                },
                {
                  id: 'auxiliaryMove',
                  name: `${getMessage('contextmenu.auxiliary.move')}(M)`,
                  shortcut: ['m', 'M'],
                  component: <AuxiliaryEdit id={popupId} type={'move'} />,
                },
                {
                  id: 'auxiliaryCopy',
                  name: `${getMessage('contextmenu.auxiliary.copy')}(C)`,
                  shortcut: ['c', 'C'],
                  component: <AuxiliaryEdit id={popupId} type={'copy'} />,
                },
                {
                  id: 'auxiliaryRemove',
                  shortcut: ['d', 'D'],
                  name: `${getMessage('contextmenu.auxiliary.remove')}(D)`,
                  fn: () => {
                    if (!currentObject) return
                    const roof = canvas.getObjects().filter((obj) => obj.id === currentObject.attributes.roofId)[0]
                    if (!roof) {
                      // 아직 innerLines로 세팅이 안되어있는 line인 경우 제거
                      canvas.remove(currentObject)
                      canvas.discardActiveObject()
                      return
                    }
                    const innerLines = roof.innerLines?.filter((line) => currentObject.id !== line.id)
                    roof.innerLines = [...innerLines]
                    canvas.remove(currentObject)
                    canvas.discardActiveObject()
                  },
                },
                {
                  id: 'auxiliaryVerticalBisector',
                  name: getMessage('contextmenu.auxiliary.vertical.bisector'),
                  fn: () => {
                    if (!currentObject) return
                    const slope = (currentObject.y2 - currentObject.y1) / (currentObject.x2 - currentObject.x1)
                    const length = currentObject.length

                    let startX, startY, endX, endY
                    if (slope === 0) {
                      startX = endX = (currentObject.x1 + currentObject.x2) / 2
                      startY = currentObject.y2 - length / 2
                      endY = currentObject.y2 + length / 2
                    } else if (slope === Infinity) {
                      startX = currentObject.x1 - length / 2
                      startY = endY = (currentObject.y1 + currentObject.y2) / 2
                      endX = currentObject.x1 + length / 2
                    } else {
                      const bisectorSlope = -1 / slope
                      const dx = length / 2 / Math.sqrt(1 + bisectorSlope * bisectorSlope)
                      const dy = bisectorSlope * dx

                      startX = (currentObject.x1 + currentObject.x2) / 2 + dx
                      startY = (currentObject.y1 + currentObject.y2) / 2 + dy
                      endX = (currentObject.x1 + currentObject.x2) / 2 - dx
                      endY = (currentObject.y1 + currentObject.y2) / 2 - dy
                    }

                    const line = addLine([startX, startY, endX, endY], {
                      stroke: 'red',
                      strokeWidth: 1,
                      selectable: true,
                      name: 'auxiliaryLine',
                      attributes: { ...currentObject.attributes },
                    })

                    if (!currentObject.attributes.roofId) {
                      return
                    }

                    canvas
                      .getObjects()
                      .filter((obj) => obj.id === currentObject.attributes.roofId)[0]
                      .innerLines.push(line)
                  },
                },
                {
                  id: 'auxiliaryRemoveAll',
                  name: getMessage('contextmenu.auxiliary.remove.all'),
                  fn: () => {
                    if (!currentObject) {
                      swalFire({ text: getMessage('roof.is.not.selected') })
                      return
                    }
                    const innerLines = canvas.getObjects().filter((obj) => obj.id === currentObject.attributes.roofId)[0]?.innerLines
                    if (innerLines) {
                      innerLines.forEach((line) => {
                        canvas.remove(line)
                      })
                      innerLines.length = 0
                    }

                    // 확정되지 않은 보조선
                    const notFixedAuxiliaryLines = canvas.getObjects().filter((obj) => obj.name === 'auxiliaryLine' && !obj.isAuxiliaryFixed)

                    notFixedAuxiliaryLines.forEach((line) => {
                      canvas.remove(line)
                    })

                    canvas.renderAll()
                  },
                },
              ],
            ])
          }

          break
        case 'opening':
          setContextMenu([
            [
              {
                id: 'sizeEdit',
                name: getMessage('contextmenu.size.edit'),
                component: <SizeSetting id={popupId} target={currentObject} />,
              },
              {
                id: 'openingRemove',
                shortcut: ['d', 'D'],
                name: `${getMessage('contextmenu.remove')}(D)`,
                fn: () => deleteObject(),
              },
              {
                id: 'openingMove',
                shortcut: ['m', 'M'],
                name: `${getMessage('contextmenu.move')}(M)`,
                fn: () => moveObjectBatch(),
              },
              {
                id: 'openingCopy',
                shortcut: ['c', 'C'],
                name: `${getMessage('contextmenu.copy')}(C)`,
                fn: () => copyObjectBatch(),
              },
              {
                id: 'openingOffset',
                name: getMessage('contextmenu.opening.offset'),
                component: <DormerOffset id={popupId} title={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'),
                fn: () => deleteObject(),
              },
              {
                id: 'commonTextMove',
                name: getMessage('contextmenu.move'),
                fn: () => moveObject(),
              },
              {
                id: 'commonTextCopy',
                name: getMessage('contextmenu.copy'),
                fn: () => copyObject(),
              },
              {
                id: 'commonTextFontSetting',
                name: getMessage('contextmenu.font.setting'),
                component: (
                  <FontSetting
                    id={popupId}
                    type={'commonText'}
                    font={commonTextFont}
                    onSave={(font) => {
                      setGlobalFont((prev) => {
                        return {
                          ...prev,
                          commonText: {
                            fontFamily: font.fontFamily,
                            fontWeight: font.fontWeight,
                            fontSize: font.fontSize,
                            fontColor: font.fontColor,
                          },
                        }
                      })
                    }}
                  />
                ),
              },
              {
                id: 'commonTextEdit',
                name: getMessage('contextmenu.edit'),
                fn: () => editText(),
              },
            ],
          ])
          break
        case 'lineGrid':
        case 'dotGrid':
        case 'tempGrid':
          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('contextmenu.grid.color.edit'),
                component: (
                  <ColorPickerModal
                    id={popupId}
                    color={gridColor}
                    setColor={setGridColor}
                    settingsData={settingsData}
                    setSettingsDataSave={setSettingsDataSave}
                  />
                ),
              },
              {
                id: 'remove',
                name: getMessage('contextmenu.remove'),
                fn: () => {
                  canvas.remove(currentObject)
                  canvas.discardActiveObject()
                },
              },
              {
                id: 'removeAll',
                name: getMessage('contextmenu.remove.all'),
                fn: () => {
                  removeGrid()
                  removeAdsorptionPoint()
                  canvas.discardActiveObject()
                },
              },
            ],
          ])
          break
        case 'adsorptionPoint':
          setContextMenu([
            [
              {
                id: 'remove',
                name: getMessage('contextmenu.remove'),
                fn: () => {
                  canvas.remove(currentObject)
                  canvas.discardActiveObject()
                },
              },
              {
                id: 'removeAll',
                name: getMessage('contextmenu.remove.all'),
                fn: () => {
                  removeGrid()
                  removeAdsorptionPoint()
                  canvas.discardActiveObject()
                },
              },
            ],
          ])
          break
        case 'dimensionGroup':
          setContextMenu([
            [
              {
                id: 'dimensionLineRemove',
                name: getMessage('contextmenu.remove'),
                fn: () => deleteObject(),
              },
              {
                id: 'dimensionLineMove',
                name: getMessage('contextmenu.move'),
                fn: () => moveObject(),
              },
              {
                id: 'dimensionAuxiliaryLineEdit',
                name: getMessage('contextmenu.dimension.auxiliary.line.edit'),
                fn: () => changeDimensionExtendLine(),
              },
              {
                id: 'dimensionLineDisplayEdit',
                name: getMessage('contextmenu.display.edit'),
                component: <DimensionLineSetting id={popupId} isConfig={false} />,
              },
            ],
          ])
          break
        case 'shadow':
          setContextMenu([
            [
              {
                id: 'sizeEdit',
                name: getMessage('contextmenu.size.edit'),
                component: <SizeSetting id={popupId} target={currentObject} />,
              },
              {
                id: 'remove',
                shortcut: ['d', 'D'],
                name: `${getMessage('contextmenu.remove')}(D)`,
                fn: () => deleteObject(),
              },
              {
                id: 'move',
                shortcut: ['m', 'M'],
                name: `${getMessage('contextmenu.move')}(M)`,
                fn: () => moveObjectBatch(),
              },
              {
                id: 'copy',
                shortcut: ['c', 'C'],
                name: `${getMessage('contextmenu.copy')}(C)`,
                fn: () => copyObject(),
              },
            ],
          ])
          break
        case 'module':
          setContextMenu([
            [
              {
                id: 'remove',
                name: getMessage('contextmenu.remove'),
                fn: () => modulesRemove(),
              },
              {
                id: 'move',
                name: getMessage('contextmenu.move'),
                fn: () => {
                  if (currentObject.circuit) {
                    swalFire({
                      title: getMessage('can.not.move.module'),
                      icon: 'error',
                      type: 'alert',
                    })
                    return
                  }

                  addPopup(popupId, 1, <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.MOVE} />)
                },
                // component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.MOVE} />,
              },
              {
                id: 'copy',
                name: getMessage('contextmenu.copy'),
                fn: () => {
                  if (currentObject.circuit) {
                    swalFire({
                      title: getMessage('can.not.copy.module'),
                      icon: 'error',
                      type: 'alert',
                    })
                    return
                  }

                  addPopup(popupId, 1, <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COPY} />)
                },
              },
            ],
            [
              {
                id: 'columnMove',
                name: getMessage('contextmenu.column.move'),
                fn: () => {
                  if (isAllComplete()) {
                    swalFire({
                      title: getMessage('can.not.move.module'),
                      icon: 'error',
                      type: 'alert',
                    })
                    return
                  }
                  resetModule()
                  addPopup(popupId, 1, <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COLUMN_MOVE} />)
                },
              },
              {
                id: 'columnCopy',
                name: getMessage('contextmenu.column.copy'),
                fn: () => {
                  if (isAllComplete()) {
                    swalFire({
                      title: getMessage('can.not.copy.module'),
                      icon: 'error',
                      type: 'alert',
                    })
                    return
                  }
                  resetModule()
                  addPopup(popupId, 1, <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COLUMN_COPY} />)
                },
                // component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COLUMN_COPY} />,
              },
              {
                id: 'columnRemove',
                name: getMessage('contextmenu.column.remove'),
                fn: () => {
                  if (isExistCircuit()) {
                    resetModule()
                  }

                  addPopup(popupId, 1, <ColumnRemove id={popupId} />)
                },
                // component: <ColumnRemove id={popupId} />,
              },
              {
                id: 'columnInsert',
                name: getMessage('contextmenu.column.insert'),
                fn: () => {
                  if (isExistCircuit()) {
                    resetModule()
                  }

                  addPopup(popupId, 1, <ColumnInsert id={popupId} />)
                },
                // component: <ColumnInsert id={popupId} />,
              },
            ],
            [
              {
                id: 'rowMove',
                name: getMessage('contextmenu.row.move'),
                fn: () => {
                  if (isAllComplete()) {
                    swalFire({
                      title: getMessage('can.not.move.module'),
                      icon: 'error',
                      type: 'alert',
                    })
                    return
                  }
                  resetModule()
                  addPopup(popupId, 1, <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.ROW_MOVE} />)
                },
                // component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.ROW_MOVE} />,
              },
              {
                id: 'rowCopy',
                name: getMessage('contextmenu.row.copy'),
                fn: () => {
                  if (isAllComplete()) {
                    swalFire({
                      title: getMessage('can.not.copy.module'),
                      icon: 'error',
                      type: 'alert',
                    })
                    return
                  }
                  resetModule()
                  addPopup(popupId, 1, <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.ROW_COPY} />)
                },
                // component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.ROW_COPY} />,
              },
              {
                id: 'rowRemove',
                name: getMessage('contextmenu.row.remove'),
                fn: () => {
                  if (isExistCircuit()) {
                    resetModule()
                  }

                  addPopup(popupId, 1, <RowRemove id={popupId} />)
                },
                // component: <RowRemove id={popupId} />,
              },
              {
                id: 'rowInsert',
                name: getMessage('contextmenu.row.insert'),
                fn: () => {
                  if (isExistCircuit()) {
                    resetModule()
                  }

                  addPopup(popupId, 1, <RowInsert id={popupId} />)
                },
                // component: <RowInsert id={popupId} />,
              },
            ],
          ])
          break
        case 'moduleSetupSurface':
          setContextMenu([
            [
              {
                id: 'moduleVerticalCenterAlign',
                name: getMessage('contextmenu.module.vertical.align'),
                fn: () => {
                  if (isAllComplete()) {
                    swalFire({
                      title: getMessage('can.not.move.module'),
                      icon: 'error',
                      type: 'alert',
                    })
                    return
                  }

                  resetModule()
                  alignModule(MODULE_ALIGN_TYPE.VERTICAL, currentObject.arrayData ?? [currentObject])
                },
              },
              {
                id: 'moduleHorizonCenterAlign',
                name: getMessage('contextmenu.module.horizon.align'),
                fn: () => {
                  if (isAllComplete()) {
                    swalFire({
                      title: getMessage('can.not.move.module'),
                      icon: 'error',
                      type: 'alert',
                    })
                    return
                  }

                  resetModule()
                  alignModule(MODULE_ALIGN_TYPE.HORIZONTAL, currentObject.arrayData ?? [currentObject])
                },
              },
              {
                id: 'moduleRemove',
                name: getMessage('contextmenu.module.remove'),
                fn: () => {
                  moduleRoofRemove(currentObject.arrayData ?? [currentObject])

                  // const moduleSetupSurface = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
                  // const modules = canvas.getObjects().filter((obj) => obj.surfaceId === moduleSetupSurface.id && obj.name === POLYGON_TYPE.MODULE)
                  // canvas.remove(...modules)
                  // canvas.renderAll()
                },
              },
              {
                id: 'moduleMove',
                name: getMessage('contextmenu.module.move'),
                fn: () => {
                  if (isAllComplete()) {
                    swalFire({
                      title: getMessage('can.not.move.module'),
                      icon: 'error',
                      type: 'alert',
                    })
                    return
                  }
                  resetModule()
                  addPopup(
                    popupId,
                    1,
                    <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.MOVE_ALL} arrayData={currentObject.arrayData ?? [currentObject]} />,
                  )
                },

                // component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.MOVE_ALL} arrayData={currentObject.arrayData ?? [currentObject]} />,
              },
              {
                id: 'moduleCopy',
                name: getMessage('contextmenu.module.copy'),
                fn: () => {
                  if (isAllComplete()) {
                    swalFire({
                      title: getMessage('can.not.move.module'),
                      icon: 'error',
                      type: 'alert',
                    })
                    return
                  }
                  resetModule()
                  addPopup(
                    popupId,
                    1,
                    <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COPY_ALL} arrayData={currentObject.arrayData ?? [currentObject]} />,
                  )
                },
                // component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COPY_ALL} arrayData={currentObject.arrayData ?? [currentObject]} />,
              },
              // {
              //   id: 'moduleCircuitNumberEdit',
              //   name: getMessage('contextmenu.module.circuit.number.edit'),
              //   component: <CircuitNumberEdit id={popupId} />,
              // },
            ],
          ])
          break
        default:
          currentMenuSetting()
      }
    } else {
      currentMenuSetting()
    }
  }, [currentObject])

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