import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
import { usePopup } from '@/hooks/usePopup'
import { useMessage } from '@/hooks/useMessage'
import { useEffect, useState } from 'react'
import { polygonToTurfPolygon } from '@/util/canvas-util'
import { deepCopyArray } from '@/util/common-utils'
import { canvasState } from '@/store/canvasAtom'
import * as turf from '@turf/turf'
import { POLYGON_TYPE } from '@/common/common'
import { useModal } from '@nextui-org/react'
import { useModule } from '@/hooks/module/useModule'

export const PANEL_EDIT_TYPE = {
  MOVE: 'move',
  COPY: 'copy',
  COLUMN_MOVE: 'columnMove',
  COLUMN_COPY: 'columnCopy',
  ROW_MOVE: 'rowMove',
  ROW_COPY: 'rowCopy',
}

export default function PanelEdit(props) {
  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
  const { id, pos = contextPopupPosition, type = PANEL_EDIT_TYPE.MOVE, apply } = props
  const { closePopup } = usePopup()
  const [length, setLength] = useState(0)
  const [direction, setDirection] = useState('up')
  const { getMessage } = useMessage()
  const canvas = useRecoilValue(canvasState)
  const { moduleMove, moduleCopy, moduleMultiMove, moduleMultiCopy } = useModule()

  useEffect(() => {
    if (canvas) {
      const isSetupModules = canvas.getObjects().filter((obj) => obj.name === 'module') // selectedObj에 없는 객체만 필터링
      isSetupModules.forEach((obj) => obj.set({ lockMovementX: false, lockMovementY: false }))
    }
  }, [])

  //모듈 이동 적용
  const handleApply = () => {
    // const activeModuleIds = canvas.getActiveObjects().map((obj) => obj.id)
    if (type === PANEL_EDIT_TYPE.MOVE) {
      moduleMove(length, direction)
    } else if (type === PANEL_EDIT_TYPE.COPY) {
      moduleCopy(length, direction)
    } else if (type === PANEL_EDIT_TYPE.COLUMN_MOVE) {
      moduleMultiMove('column', length, direction)
    } else if (type === PANEL_EDIT_TYPE.COLUMN_COPY) {
      moduleMultiCopy('column', length, direction)
    } else if (type === PANEL_EDIT_TYPE.ROW_MOVE) {
      moduleMultiMove('row', length, direction)
    } else if (type === PANEL_EDIT_TYPE.ROW_COPY) {
      moduleMultiCopy('row', length, direction)
    }
    closePopup(id)
  }

  const contextModuleMove = (length, direction) => {
    const checkModuleDisjointSurface = (squarePolygon, turfModuleSetupSurface) => {
      return turf.booleanContains(turfModuleSetupSurface, squarePolygon) || turf.booleanWithin(squarePolygon, turfModuleSetupSurface)
    }

    const selectedObj = canvas.getActiveObjects() //선택된 객체들을 가져옴
    const selectedIds = selectedObj.map((obj) => obj.id) // selectedObj의 ID 추출

    canvas.discardActiveObject() //선택해제

    const isSetupModules = canvas.getObjects().filter((obj) => obj.name === 'module' && !selectedIds.includes(obj.id)) // selectedObj에 없는 객체만 필터링
    const selectedModules = canvas.getObjects().filter((obj) => selectedIds.includes(obj.id) && obj.name === 'module') //선택했던 객체들만 가져옴
    const setupSurface = canvas
      .getObjects()
      .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === selectedModules[0].surfaceId)[0]
    const isOverlapArray = []
    const isInSurfaceArray = []

    if (selectedModules) {
      canvas.remove(...selectedModules)

      selectedModules.forEach((module) => {
        module.set({
          originCoords: {
            left: module.left,
            top: module.top,
          },
        })

        if (direction === 'up') {
          module.set({ ...module, top: module.top - Number(length) })
        } else if (direction === 'down') {
          module.set({ ...module, top: module.top + Number(length) })
        } else if (direction === 'left') {
          module.set({ ...module, left: module.left - Number(length) })
        } else if (direction === 'right') {
          module.set({ ...module, left: module.left + Number(length) })
        }
        module.setCoords()
        canvas.renderAll()

        //다른 모듈과 겹치는지 확인하는 로직
        const isOverlap = isSetupModules.some((isSetupModule) =>
          turf.booleanOverlap(polygonToTurfPolygon(module, true), polygonToTurfPolygon(isSetupModule, true)),
        )
        isOverlapArray.push(isOverlap)

        const turfModuleSetupSurface = polygonToTurfPolygon(setupSurface, true)
        const turfModule = polygonToTurfPolygon(module, true)

        //나갔는지 확인하는 로직
        const isInSurface = turf.booleanContains(turfModuleSetupSurface, turfModule) || turf.booleanWithin(turfModule, turfModuleSetupSurface)
        isInSurfaceArray.push(isInSurface)
      })

      const isNotOverlap = isOverlapArray.some((isOverlap) => isOverlap) // true면 겹침
      const isNotOutSurface = isInSurfaceArray.every((isOutSurface) => isOutSurface) //false면 밖으로 나감

      //안겹치고 안나갔으면 이동시킨다 아니면 원래 위치로 돌려놓는다
      if (isNotOverlap || !isNotOutSurface) {
        selectedModules.forEach((module) => {
          module.set({ ...module, left: module.originCoords.left, top: module.originCoords.top })
          module.setCoords()
        })
      }

      canvas.add(...selectedModules)
      canvas.renderAll()
    }
  }

  return (
    <WithDraggable isShow={true} pos={pos}>
      <div className={`modal-pop-wrap xm mount`}>
        <div className="modal-head">
          <h1 className="title">{getMessage(type === 'move' ? 'modal.move.setting' : 'modal.copy.setting')} </h1>
          <button className="modal-close" onClick={() => closePopup(id)}>
            닫기
          </button>
        </div>
        <div className="modal-body">
          <div className="grid-option-tit">{getMessage(type === 'move' ? 'modal.move.setting.info' : 'modal.copy.setting.info')}</div>
          <div className="grid-option-wrap">
            <div className="grid-option-box">
              <div className="grid-input-form">
                <span className="mr10">{getMessage('margin')}</span>
                <div className="input-grid mr5">
                  <input type="text" className="input-origin" defaultValue={0} onKeyUp={(e) => setLength(e.target.value)} />
                </div>
                <span>mm</span>
              </div>
              <div className="grid-direction">
                <button
                  className={`direction up ${direction === 'up' ? 'act' : ''}`}
                  onClick={() => {
                    setDirection('up')
                  }}
                ></button>
                <button
                  className={`direction down ${direction === 'down' ? 'act' : ''}`}
                  onClick={() => {
                    setDirection('down')
                  }}
                ></button>
                <button
                  className={`direction left ${direction === 'left' ? 'act' : ''}`}
                  onClick={() => {
                    setDirection('left')
                  }}
                ></button>
                <button
                  className={`direction right ${direction === 'right' ? 'act' : ''}`}
                  onClick={() => {
                    setDirection('right')
                  }}
                ></button>
              </div>
            </div>
          </div>
          <div className="grid-btn-wrap">
            <button className="btn-frame modal mr5" onClick={handleApply}>
              {getMessage('modal.common.save')}
            </button>
          </div>
        </div>
      </div>
    </WithDraggable>
  )
}