import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { adsorptionPointModeState, adsorptionRangeState, canvasState, globalPitchState, verticalHorizontalModeState } from '@/store/canvasAtom'
import { useEvent } from '@/hooks/useEvent'
import { useMouse } from '@/hooks/useMouse'
import { useLine } from '@/hooks/useLine'
import { useEffect, useRef } from 'react'
import { fabric } from 'fabric'
import { calculateAngle } from '@/util/qpolygon-utils'
import {
  OUTER_LINE_TYPE,
  placementShapeDrawingAngle1State,
  placementShapeDrawingAngle2State,
  placementShapeDrawingArrow1State,
  placementShapeDrawingArrow2State,
  placementShapeDrawingDiagonalState,
  placementShapeDrawingFixState,
  placementShapeDrawingLength1State,
  placementShapeDrawingLength2State,
  placementShapeDrawingPointsState,
  placementShapeDrawingTypeState,
} from '@/store/placementShapeDrawingAtom'
import { usePolygon } from '@/hooks/usePolygon'
import { POLYGON_TYPE } from '@/common/common'
import { usePopup } from '@/hooks/usePopup'
import { useSwal } from '@/hooks/useSwal'
import { useMessage } from '@/hooks/useMessage'
import { useSurfaceShapeBatch } from './useSurfaceShapeBatch'

import { roofDisplaySelector } from '@/store/settingAtom'
import { useRoofFn } from '@/hooks/common/useRoofFn'
import { useObject } from '@/hooks/useObject'
import { useUndoRedo } from '@/hooks/useUndoRedo'

// 배치면 그리기
export function usePlacementShapeDrawing(id) {
  const canvas = useRecoilValue(canvasState)
  const roofDisplay = useRecoilValue(roofDisplaySelector)
  const {
    initEvent,
    addCanvasMouseEventListener,
    addDocumentEventListener,
    removeAllMouseEventListeners,
    removeAllDocumentEventListeners,
    removeMouseLine,
  } = useEvent()
  // const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
  //   useContext(EventContext)
  const { getIntersectMousePoint } = useMouse()
  const { addLine, removeLine } = useLine()
  const { addPolygonByLines, drawDirectionArrow, addLengthText } = usePolygon()
  const { setSurfaceShapePattern } = useRoofFn()
  const { changeSurfaceLineType } = useSurfaceShapeBatch({})
  const { handleSelectableObjects } = useObject()
  const { saveSnapshot, popLastSnapshot } = useUndoRedo()
  const { swalFire } = useSwal()
  const { getMessage } = useMessage()

  const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
  const adsorptionRange = useRecoilValue(adsorptionRangeState)
  const adsorptionPointMode = useRecoilValue(adsorptionPointModeState)

  const length1Ref = useRef(null)
  const length2Ref = useRef(null)
  const angle1Ref = useRef(null)
  const angle2Ref = useRef(null)
  const [length1, setLength1] = useRecoilState(placementShapeDrawingLength1State)
  const [length2, setLength2] = useRecoilState(placementShapeDrawingLength2State)
  const [arrow1, setArrow1] = useRecoilState(placementShapeDrawingArrow1State)
  const [arrow2, setArrow2] = useRecoilState(placementShapeDrawingArrow2State)
  const [points, setPoints] = useRecoilState(placementShapeDrawingPointsState)
  const [type, setType] = useRecoilState(placementShapeDrawingTypeState)
  const [angle1, setAngle1] = useRecoilState(placementShapeDrawingAngle1State)
  const [angle2, setAngle2] = useRecoilState(placementShapeDrawingAngle2State)
  const [outerLineDiagonalLength, setOuterLineDiagonalLength] = useRecoilState(placementShapeDrawingDiagonalState)
  const setOuterLineFix = useSetRecoilState(placementShapeDrawingFixState)
  const arrow1Ref = useRef(arrow1)
  const arrow2Ref = useRef(arrow2)

  const outerLineDiagonalLengthRef = useRef(null)

  const isFix = useRef(false)

  const { closePopup, addPopup } = usePopup()

  const globalPitch = useRecoilValue(globalPitchState)

  useEffect(() => {
    addCanvasMouseEventListener('mouse:down', mouseDown)
    addDocumentEventListener('contextmenu', document, (e) => {
      handleRollback()
    })
    handleSelectableObjects(['lineGrid', 'tempGrid', 'adsorptionPoint'], false)
    clear()
    return () => {
      initEvent()
      handleSelectableObjects(['lineGrid', 'tempGrid', 'adsorptionPoint'], true)
    }
  }, [verticalHorizontalMode, points, adsorptionRange, adsorptionPointMode])

  useEffect(() => {
    // 배치면 그리기 시작 시 스냅샷 저장 (undo 하면 그리기 전 상태로 복원)
    saveSnapshot()
    setPoints([])
    setType(OUTER_LINE_TYPE.OUTER_LINE)

    return () => {
      const placementShapeDrawingStartPoint = canvas.getObjects().find((obj) => obj.name === 'placementShapeDrawingStartPoint')
      canvas.remove(placementShapeDrawingStartPoint)

      // 확정하지 않고 닫은 경우 스냅샷 제거
      if (!isFix.current) {
        popLastSnapshot()
      }
    }
  }, [])

  useEffect(() => {
    arrow1Ref.current = arrow1
  }, [arrow1])

  useEffect(() => {
    arrow2Ref.current = arrow2
  }, [arrow2])

  useEffect(() => {
    clear()
    addDocumentEventListener('keydown', document, keydown[type])
  }, [type])

  const clear = () => {
    setLength1(0)
    setLength2(0)

    setArrow1('')
    setArrow2('')

    setAngle1(0)
    setAngle2(0)

    setOuterLineDiagonalLength(0)
  }

  const mouseDown = (e) => {
    let pointer = getIntersectMousePoint(e)

    if (points.length === 0) {
      setPoints((prev) => [...prev, pointer])
    } else {
      const lastPoint = points[points.length - 1]
      let newPoint = { x: pointer.x, y: pointer.y }
      if (verticalHorizontalMode) {
        const vector = {
          x: pointer.x - lastPoint.x,
          y: pointer.y - lastPoint.y,
        }
        const slope = Math.abs(vector.y / vector.x)

        if (slope >= 1) {
          // 기울기가 1 이상이면 수직으로 제한
          newPoint = {
            x: lastPoint.x,
            y: pointer.y,
          }
        } else {
          // 기울기가 1 미만이면 수평으로 제한
          newPoint = {
            x: pointer.x,
            y: lastPoint.y,
          }
        }
      }
      setPoints((prev) => [...prev, newPoint])
    }
  }

  useEffect(() => {
    canvas
      ?.getObjects()
      .filter((obj) => obj.name === 'placementShapeDrawingLine' || obj.name === 'helpGuideLine')
      .forEach((obj) => {
        removeLine(obj)
      })

    canvas?.remove(canvas?.getObjects().find((obj) => obj.name === 'placementShapeDrawingStartPoint'))

    if (points.length === 0) {
      setOuterLineFix(true)
      removeAllDocumentEventListeners()
      return
    }

    addDocumentEventListener('keydown', document, keydown[type])

    if (points.length === 1) {
      const point = new fabric.Circle({
        radius: 5,
        fill: 'transparent',
        stroke: 'red',
        left: points[0].x - 5,
        top: points[0].y - 5,
        selectable: false,
        name: 'placementShapeDrawingStartPoint',
      })

      canvas?.add(point)
    } else {
      setOuterLineFix(false)
      canvas
        .getObjects()
        .filter((obj) => obj.name === 'placementShapeDrawingPoint')
        .forEach((obj) => {
          canvas.remove(obj)
        })
      points.forEach((point, idx) => {
        const circle = new fabric.Circle({
          left: point.x,
          top: point.y,
          visible: false,
          name: 'placementShapeDrawingPoint',
        })
        canvas.add(circle)
      })
      points.forEach((point, idx) => {
        if (idx === 0) {
          return
        }
        drawLine(points[idx - 1], point, idx)
      })

      const lastPoint = points[points.length - 1]
      const firstPoint = points[0]

      if (isFix.current) {
        removeAllMouseEventListeners()
        removeAllDocumentEventListeners()

        const lines = canvas?.getObjects().filter((obj) => obj.name === 'placementShapeDrawingLine')
        const roof = addPolygonByLines(lines, {
          stroke: 'black',
          strokeWidth: 3,
          selectable: true,
          name: POLYGON_TYPE.ROOF,
          originX: 'center',
          originY: 'center',
          direction: 'south',
          pitch: globalPitch,
          from: 'surface',
        })

        // 기존 도형의 흡착점을 이용해 그린 경우, 기존 도형의 planeSize를 상속
        inheritPlaneSizeFromExistingShapes(roof)

        setSurfaceShapePattern(roof, roofDisplay.column)
        drawDirectionArrow(roof)

        lines.forEach((line) => {
          removeLine(line)
        })

        setPoints([])
        canvas?.renderAll()

        // if (+canvasSetting?.roofSizeSet === 3) {
        //   closePopup(id)
        //   return
        // }
        // addPopup(id, 1, <PlacementSurfaceLineProperty id={id} roof={roof} />, false)

        changeSurfaceLineType(roof)
        closePopup(id)
      }

      if (points.length < 3) {
        return
      }

      if (Math.abs(lastPoint.x - firstPoint.x) < 1 && Math.abs(lastPoint.y - firstPoint.y) < 1) {
        return
      }

      if (Math.abs(lastPoint.x - firstPoint.x) < 1 || Math.abs(lastPoint.y - firstPoint.y) < 1) {
        let isAllRightAngle = true

        const firstPoint = points[0]

        points.forEach((point, idx) => {
          if (idx === 0 || !isAllRightAngle) {
            return
          }

          const angle = calculateAngle(point, firstPoint)
          if (angle % 90 !== 0) {
            isAllRightAngle = false
          }
        })

        if (isAllRightAngle) {
          return
        }
        const line = addLine([lastPoint.x, lastPoint.y, firstPoint.x, firstPoint.y], {
          stroke: 'grey',
          strokeWidth: 1,
          selectable: false,
          name: 'helpGuideLine',
        })
      } else {
        const guideLine1 = addLine([lastPoint.x, lastPoint.y, lastPoint.x, firstPoint.y], {
          stroke: 'grey',
          strokeWidth: 1,
          strokeDashArray: [1, 1, 1],
          name: 'helpGuideLine',
        })

        const guideLine2 = addLine([guideLine1.x2, guideLine1.y2, firstPoint.x, firstPoint.y], {
          stroke: 'grey',
          strokeWidth: 1,
          strokeDashArray: [1, 1, 1],
          name: 'helpGuideLine',
        })
      }
    }
  }, [points])

  // 기존 도형의 변과 일치하는 경우 planeSize를 상속하는 함수
  const inheritPlaneSizeFromExistingShapes = (newPolygon) => {
    const tolerance = 2
    const existingPolygons = canvas
      .getObjects()
      .filter((obj) => (obj.name === POLYGON_TYPE.ROOF || obj.name === POLYGON_TYPE.WALL) && obj.id !== newPolygon.id && obj.lines)

    if (existingPolygons.length === 0) return

    const inheritedSet = new Set()

    // 1단계: 기존 도형의 변과 매칭하여 planeSize 상속
    newPolygon.lines.forEach((line, lineIdx) => {
      const x1 = line.x1,
        y1 = line.y1,
        x2 = line.x2,
        y2 = line.y2
      const isHorizontal = Math.abs(y1 - y2) < tolerance
      const isVertical = Math.abs(x1 - x2) < tolerance

      for (const polygon of existingPolygons) {
        for (const edge of polygon.lines) {
          if (!edge.attributes?.planeSize) continue

          const ex1 = edge.x1,
            ey1 = edge.y1,
            ex2 = edge.x2,
            ey2 = edge.y2

          // 1순위: 양 끝점이 정확히 일치
          const forwardMatch =
            Math.abs(x1 - ex1) < tolerance && Math.abs(y1 - ey1) < tolerance && Math.abs(x2 - ex2) < tolerance && Math.abs(y2 - ey2) < tolerance
          const reverseMatch =
            Math.abs(x1 - ex2) < tolerance && Math.abs(y1 - ey2) < tolerance && Math.abs(x2 - ex1) < tolerance && Math.abs(y2 - ey1) < tolerance

          if (forwardMatch || reverseMatch) {
            line.attributes = { ...line.attributes, planeSize: edge.attributes.planeSize }
            if (edge.attributes.actualSize) {
              line.attributes.actualSize = edge.attributes.actualSize
            }
            inheritedSet.add(lineIdx)
            return
          }

          // 2순위: 같은 방향 + 같은 좌표 차이 (끝점 공유 불필요)
          if (isHorizontal && Math.abs(ey1 - ey2) < tolerance && Math.abs(Math.abs(x2 - x1) - Math.abs(ex2 - ex1)) < tolerance) {
            line.attributes = { ...line.attributes, planeSize: edge.attributes.planeSize }
            if (edge.attributes.actualSize) {
              line.attributes.actualSize = edge.attributes.actualSize
            }
            inheritedSet.add(lineIdx)
            return
          }
          if (isVertical && Math.abs(ex1 - ex2) < tolerance && Math.abs(Math.abs(y2 - y1) - Math.abs(ey2 - ey1)) < tolerance) {
            line.attributes = { ...line.attributes, planeSize: edge.attributes.planeSize }
            if (edge.attributes.actualSize) {
              line.attributes.actualSize = edge.attributes.actualSize
            }
            inheritedSet.add(lineIdx)
            return
          }
        }
      }
    })

    // 2단계: 상속받은 변과 평행하고 좌표 차이가 같은 변에 planeSize 전파
    if (inheritedSet.size > 0) {
      newPolygon.lines.forEach((line, lineIdx) => {
        if (inheritedSet.has(lineIdx)) return

        const x1 = line.x1,
          y1 = line.y1,
          x2 = line.x2,
          y2 = line.y2
        const isHorizontal = Math.abs(y1 - y2) < tolerance
        const isVertical = Math.abs(x1 - x2) < tolerance

        for (const idx of inheritedSet) {
          const inherited = newPolygon.lines[idx]
          const ix1 = inherited.x1,
            iy1 = inherited.y1,
            ix2 = inherited.x2,
            iy2 = inherited.y2
          const iIsHorizontal = Math.abs(iy1 - iy2) < tolerance
          const iIsVertical = Math.abs(ix1 - ix2) < tolerance

          if (isHorizontal && iIsHorizontal) {
            if (Math.abs(Math.abs(x2 - x1) - Math.abs(ix2 - ix1)) < tolerance) {
              line.attributes = { ...line.attributes, planeSize: inherited.attributes.planeSize }
              if (inherited.attributes.actualSize) {
                line.attributes.actualSize = inherited.attributes.actualSize
              }
              inheritedSet.add(lineIdx)
              return
            }
          } else if (isVertical && iIsVertical) {
            if (Math.abs(Math.abs(y2 - y1) - Math.abs(iy2 - iy1)) < tolerance) {
              line.attributes = { ...line.attributes, planeSize: inherited.attributes.planeSize }
              if (inherited.attributes.actualSize) {
                line.attributes.actualSize = inherited.attributes.actualSize
              }
              inheritedSet.add(lineIdx)
              return
            }
          }
        }
      })
    }

    // planeSize가 상속된 경우 길이 텍스트를 다시 렌더링
    if (inheritedSet.size > 0) {
      addLengthText(newPolygon)
    }
  }

  // 기존 도형에서 매칭되는 변의 planeSize를 찾는 헬퍼 함수
  const findMatchingEdgePlaneSize = (x1, y1, x2, y2) => {
    const tolerance = 2
    const existingPolygons = canvas.getObjects().filter((obj) => (obj.name === POLYGON_TYPE.ROOF || obj.name === POLYGON_TYPE.WALL) && obj.lines)

    const isHorizontal = Math.abs(y1 - y2) < tolerance
    const isVertical = Math.abs(x1 - x2) < tolerance

    for (const polygon of existingPolygons) {
      for (const edge of polygon.lines) {
        if (!edge.attributes?.planeSize) continue
        const ex1 = edge.x1,
          ey1 = edge.y1,
          ex2 = edge.x2,
          ey2 = edge.y2

        // 1순위: 양 끝점 일치 (정방향/역방향)
        const forwardMatch =
          Math.abs(x1 - ex1) < tolerance && Math.abs(y1 - ey1) < tolerance && Math.abs(x2 - ex2) < tolerance && Math.abs(y2 - ey2) < tolerance
        const reverseMatch =
          Math.abs(x1 - ex2) < tolerance && Math.abs(y1 - ey2) < tolerance && Math.abs(x2 - ex1) < tolerance && Math.abs(y2 - ey1) < tolerance

        if (forwardMatch || reverseMatch) {
          return edge.attributes.planeSize
        }

        // 2순위: 같은 방향 + 같은 좌표 차이 (끝점 공유 불필요)
        if (isHorizontal && Math.abs(ey1 - ey2) < tolerance && Math.abs(Math.abs(x2 - x1) - Math.abs(ex2 - ex1)) < tolerance) {
          return edge.attributes.planeSize
        }
        if (isVertical && Math.abs(ex1 - ex2) < tolerance && Math.abs(Math.abs(y2 - y1) - Math.abs(ey2 - ey1)) < tolerance) {
          return edge.attributes.planeSize
        }
      }
    }
    return null
  }

  const drawLine = (point1, point2, idx) => {
    const line = addLine([point1.x, point1.y, point2.x, point2.y], {
      stroke: 'black',
      strokeWidth: 3,
      idx: idx,
      selectable: true,
      name: 'placementShapeDrawingLine',
      x1: point1.x,
      y1: point1.y,
      x2: point2.x,
      y2: point2.y,
    })

    // 기존 도형의 변과 일치하는 경우 planeSize 상속
    if (line) {
      const matchedPlaneSize = findMatchingEdgePlaneSize(point1.x, point1.y, point2.x, point2.y)
      if (matchedPlaneSize !== null) {
        line.attributes = { ...line.attributes, planeSize: matchedPlaneSize }
      }
    }
  }

  // 직각 완료될 경우 확인
  const checkRightAngle = (direction) => {
    const activeElem = document.activeElement

    const canDirection =
      direction === '↓' || direction === '↑'
        ? arrow1Ref.current === '←' || arrow1Ref.current === '→'
        : arrow1Ref.current === '↓' || arrow1Ref.current === '↑'

    if (activeElem === length1Ref.current || activeElem === angle1Ref.current) {
      setArrow1(direction)
      arrow1Ref.current = direction
      length2Ref.current.focus()
    } else if (activeElem === length2Ref.current || activeElem === angle2Ref.current) {
      if (!canDirection) {
        return
      }
      setArrow2(direction)
      arrow2Ref.current = direction
    }

    const length1Num = Number(length1Ref.current.value) / 10
    const length2Num = Number(length2Ref.current.value) / 10

    if (points.length === 0) {
      return
    }

    if (length1Num === 0 || length2Num === 0 || arrow1Ref.current === '' || arrow2Ref.current === '') {
      return
    }

    if (arrow1Ref.current === '↓' && arrow2Ref.current === '→') {
      setPoints((prev) => {
        if (prev.length === 0) {
          return []
        }
        return [...prev, { x: prev[prev.length - 1].x + length2Num, y: prev[prev.length - 1].y + length1Num }]
      })
    } else if (arrow1Ref.current === '↓' && arrow2Ref.current === '←') {
      setPoints((prev) => {
        if (prev.length === 0) {
          return []
        }
        return [...prev, { x: prev[prev.length - 1].x - length2Num, y: prev[prev.length - 1].y + length1Num }]
      })
    } else if (arrow1Ref.current === '↑' && arrow2Ref.current === '→') {
      setPoints((prev) => {
        if (prev.length === 0) {
          return []
        }
        return [...prev, { x: prev[prev.length - 1].x + length2Num, y: prev[prev.length - 1].y - length1Num }]
      })
    } else if (arrow1Ref.current === '↑' && arrow2Ref.current === '←') {
      setPoints((prev) => {
        if (prev.length === 0) {
          return []
        }
        return [...prev, { x: prev[prev.length - 1].x - length2Num, y: prev[prev.length - 1].y - length1Num }]
      })
    } else if (arrow1Ref.current === '→' && arrow2Ref.current === '↓') {
      setPoints((prev) => {
        if (prev.length === 0) {
          return []
        }
        return [...prev, { x: prev[prev.length - 1].x + length1Num, y: prev[prev.length - 1].y + length2Num }]
      })
    } else if (arrow1Ref.current === '→' && arrow2Ref.current === '↑') {
      setPoints((prev) => {
        if (prev.length === 0) {
          return []
        }
        return [...prev, { x: prev[prev.length - 1].x + length1Num, y: prev[prev.length - 1].y - length2Num }]
      })
    } else if (arrow1Ref.current === '←' && arrow2Ref.current === '↓') {
      setPoints((prev) => {
        if (prev.length === 0) {
          return []
        }
        return [...prev, { x: prev[prev.length - 1].x - length1Num, y: prev[prev.length - 1].y + length2Num }]
      })
    } else if (arrow1Ref.current === '←' && arrow2Ref.current === '↑') {
      setPoints((prev) => {
        if (prev.length === 0) {
          return []
        }
        return [...prev, { x: prev[prev.length - 1].x - length1Num, y: prev[prev.length - 1].y - length2Num }]
      })
    }
  }

  //이구배 완료될 경우 확인 ↓, ↑, ←, →
  const checkDoublePitch = (direction) => {
    const activeElem = document.activeElement

    const canDirection =
      direction === '↓' || direction === '↑'
        ? arrow1Ref.current === '←' || arrow1Ref.current === '→'
        : arrow1Ref.current === '↓' || arrow1Ref.current === '↑'

    if (activeElem === length1Ref.current || activeElem === angle1Ref.current) {
      setArrow1(direction)
      arrow1Ref.current = direction
      angle2Ref.current.focus()
    } else if (activeElem === length2Ref.current || activeElem === angle2Ref.current) {
      if (!canDirection) {
        return
      }
      setArrow2(direction)
      arrow2Ref.current = direction
    }

    const angle1Value = angle1Ref.current.value
    const angle2Value = angle2Ref.current.value
    const length1Value = length1Ref.current.value
    const length2Value = length2Ref.current.value

    const arrow1Value = arrow1Ref.current
    const arrow2Value = arrow2Ref.current

    if (angle1Value !== 0 && length1Value !== 0 && angle2Value !== 0 && arrow1Value !== '' && arrow2Value !== '') {
      if (arrow1Value === '↓' && arrow2Value === '→') {
        setPoints((prev) => {
          if (prev.length === 0) {
            return []
          }
          return [
            ...prev,
            {
              x: prev[prev.length - 1].x + length1Value / 10,
              y: prev[prev.length - 1].y + length2Value / 10,
            },
          ]
        })
      } else if (arrow1Value === '↓' && arrow2Value === '←') {
        setPoints((prev) => {
          if (prev.length === 0) {
            return []
          }
          return [
            ...prev,
            {
              x: prev[prev.length - 1].x - length1Value / 10,
              y: prev[prev.length - 1].y + length2Value / 10,
            },
          ]
        })
      } else if (arrow1Value === '↑' && arrow2Value === '→') {
        setPoints((prev) => {
          if (prev.length === 0) {
            return []
          }
          return [
            ...prev,
            {
              x: prev[prev.length - 1].x + length1Value / 10,
              y: prev[prev.length - 1].y - length2Value / 10,
            },
          ]
        })
      } else if (arrow1Value === '↑' && arrow2Value === '←') {
        setPoints((prev) => {
          if (prev.length === 0) {
            return []
          }
          return [
            ...prev,
            {
              x: prev[prev.length - 1].x - length1Value / 10,
              y: prev[prev.length - 1].y - length2Value / 10,
            },
          ]
        })
      } else if (arrow1Value === '→' && arrow2Value === '↓') {
        setPoints((prev) => {
          if (prev.length === 0) {
            return []
          }
          return [
            ...prev,
            {
              x: prev[prev.length - 1].x + length2Value / 10,
              y: prev[prev.length - 1].y + length1Value / 10,
            },
          ]
        })
      } else if (arrow1Value === '→' && arrow2Value === '↑') {
        setPoints((prev) => {
          if (prev.length === 0) {
            return []
          }
          return [
            ...prev,
            {
              x: prev[prev.length - 1].x + length2Value / 10,
              y: prev[prev.length - 1].y - length1Value / 10,
            },
          ]
        })
      } else if (arrow1Value === '←' && arrow2Value === '↓') {
        setPoints((prev) => {
          if (prev.length === 0) {
            return []
          }
          return [
            ...prev,
            {
              x: prev[prev.length - 1].x - length2Value / 10,
              y: prev[prev.length - 1].y + length1Value / 10,
            },
          ]
        })
      } else if (arrow1Value === '←' && arrow2Value === '↑') {
        setPoints((prev) => {
          if (prev.length === 0) {
            return []
          }
          return [
            ...prev,
            {
              x: prev[prev.length - 1].x - length2Value / 10,
              y: prev[prev.length - 1].y - length1Value / 10,
            },
          ]
        })
      }

      angle1Ref.current.focus()
    }
  }

  //대각선 완료될 경우 확인
  const checkDiagonal = (direction) => {
    const activeElem = document.activeElement
    const diagonalLength = outerLineDiagonalLengthRef.current.value // 대각선 길이

    const length1Value = length1Ref.current.value

    if (diagonalLength <= length1Value) {
      // alert('대각선 길이는 직선 길이보다 길어야 합니다.')
      return
    }

    const canDirection =
      direction === '↓' || direction === '↑'
        ? arrow1Ref.current === '←' || arrow1Ref.current === '→'
        : arrow1Ref.current === '↓' || arrow1Ref.current === '↑'

    if (activeElem === length1Ref.current) {
      setArrow1(direction)
      arrow1Ref.current = direction
    } else if (activeElem === length2Ref.current || activeElem === angle2Ref.current) {
      if (!canDirection) {
        return
      }
      setArrow2(direction)
      arrow2Ref.current = direction
    }

    const arrow1Value = arrow1Ref.current
    const arrow2Value = arrow2Ref.current

    const getLength2 = () => {
      return Math.floor(Math.sqrt(diagonalLength ** 2 - length1Value ** 2))
    }

    const length2Value = getLength2()

    if (diagonalLength !== 0 && length1Value !== 0 && arrow1Value !== '') {
      setLength2(getLength2())
      length2Ref.current.focus()
    }

    if (length1Value !== 0 && length2Value !== 0 && arrow1Value !== '' && arrow2Value !== '') {
      if (arrow1Value === '↓' && arrow2Value === '→') {
        setPoints((prev) => {
          if (prev.length === 0) {
            return []
          }
          return [
            ...prev,
            {
              x: prev[prev.length - 1].x + length2Value / 10,
              y: prev[prev.length - 1].y + length1Value / 10,
            },
          ]
        })
      } else if (arrow1Value === '↓' && arrow2Value === '←') {
        setPoints((prev) => {
          if (prev.length === 0) {
            return []
          }
          return [
            ...prev,
            {
              x: prev[prev.length - 1].x - length2Value / 10,
              y: prev[prev.length - 1].y + length1Value / 10,
            },
          ]
        })
      } else if (arrow1Value === '↑' && arrow2Value === '→') {
        setPoints((prev) => {
          if (prev.length === 0) {
            return []
          }
          return [
            ...prev,
            {
              x: prev[prev.length - 1].x + length2Value / 10,
              y: prev[prev.length - 1].y - length1Value / 10,
            },
          ]
        })
      } else if (arrow1Value === '↑' && arrow2Value === '←') {
        setPoints((prev) => {
          if (prev.length === 0) {
            return []
          }
          return [
            ...prev,
            {
              x: prev[prev.length - 1].x - length2Value / 10,
              y: prev[prev.length - 1].y - length1Value / 10,
            },
          ]
        })
      } else if (arrow1Value === '→' && arrow2Value === '↓') {
        setPoints((prev) => {
          if (prev.length === 0) {
            return []
          }
          return [
            ...prev,
            {
              x: prev[prev.length - 1].x + length1Value / 10,
              y: prev[prev.length - 1].y + length2Value / 10,
            },
          ]
        })
      } else if (arrow1Value === '→' && arrow2Value === '↑') {
        setPoints((prev) => {
          if (prev.length === 0) {
            return []
          }
          return [
            ...prev,
            {
              x: prev[prev.length - 1].x + length1Value / 10,
              y: prev[prev.length - 1].y - length2Value / 10,
            },
          ]
        })
      } else if (arrow1Value === '←' && arrow2Value === '↓') {
        setPoints((prev) => {
          if (prev.length === 0) {
            return []
          }
          return [
            ...prev,
            {
              x: prev[prev.length - 1].x - length1Value / 10,
              y: prev[prev.length - 1].y + length2Value / 10,
            },
          ]
        })
      } else if (arrow1Value === '←' && arrow2Value === '↑') {
        setPoints((prev) => {
          if (prev.length === 0) {
            return []
          }
          return [
            ...prev,
            {
              x: prev[prev.length - 1].x - length1Value / 10,
              y: prev[prev.length - 1].y - length2Value / 10,
            },
          ]
        })
      }
    }
  }

  const keydown = {
    outerLine: (e) => {
      if (points.length === 0) {
        return
      }
      enterCheck(e)
      // 포커스가 length1에 있지 않으면 length1에 포커스를 줌
      const activeElem = document.activeElement

      if (activeElem !== length1Ref.current) {
        length1Ref.current?.focus()
      }

      const key = e.key

      if (!length1Ref.current) {
        return
      }

      const lengthNum = Number(length1Ref.current?.value) / 10
      if (lengthNum === 0) {
        return
      }
      switch (key) {
        case 'Down': // IE/Edge에서 사용되는 값
        case 'ArrowDown': {
          setArrow1('↓')
          setPoints((prev) => {
            if (prev.length === 0) {
              return []
            }
            return [...prev, { x: prev[prev.length - 1].x, y: prev[prev.length - 1].y + lengthNum }]
          })
          break
        }
        case 'Up': // IE/Edge에서 사용되는 값
        case 'ArrowUp':
          setArrow1('↑')
          setPoints((prev) => {
            if (prev.length === 0) {
              return []
            }
            return [...prev, { x: prev[prev.length - 1].x, y: prev[prev.length - 1].y - lengthNum }]
          })
          break
        case 'Left': // IE/Edge에서 사용되는 값
        case 'ArrowLeft':
          setArrow1('←')
          setPoints((prev) => {
            if (prev.length === 0) {
              return []
            }
            return [...prev, { x: prev[prev.length - 1].x - lengthNum, y: prev[prev.length - 1].y }]
          })
          break
        case 'Right': // IE/Edge에서 사용되는 값
        case 'ArrowRight':
          setArrow1('→')
          setPoints((prev) => {
            if (prev.length === 0) {
              return []
            }
            return [...prev, { x: prev[prev.length - 1].x + lengthNum, y: prev[prev.length - 1].y }]
          })
          break
      }
    },
    rightAngle: (e) => {
      if (points.length === 0) {
        return
      }
      enterCheck(e)
      const key = e.key

      const activeElem = document.activeElement
      if (activeElem !== length1Ref.current && activeElem !== length2Ref.current) {
        length1Ref.current.focus()
      }

      switch (key) {
        case 'Down': // IE/Edge에서 사용되는 값
        case 'ArrowDown': {
          checkRightAngle('↓')
          break
        }
        case 'Up': // IE/Edge에서 사용되는 값
        case 'ArrowUp':
          checkRightAngle('↑')
          break
        case 'Left': // IE/Edge에서 사용되는 값
        case 'ArrowLeft':
          checkRightAngle('←')
          break
        case 'Right': // IE/Edge에서 사용되는 값
        case 'ArrowRight':
          checkRightAngle('→')
          break
        case 'Enter':
          break
      }
    },
    doublePitch: (e) => {
      if (points.length === 0) {
        return
      }
      enterCheck(e)
      const key = e.key
      switch (key) {
        case 'Down': // IE/Edge에서 사용되는 값
        case 'ArrowDown': {
          checkDoublePitch('↓')
          break
        }
        case 'Up': // IE/Edge에서 사용되는 값
        case 'ArrowUp':
          checkDoublePitch('↑')
          break
        case 'Left': // IE/Edge에서 사용되는 값
        case 'ArrowLeft':
          checkDoublePitch('←')
          break
        case 'Right': // IE/Edge에서 사용되는 값
        case 'ArrowRight':
          checkDoublePitch('→')
          break
      }
    },
    angle: (e) => {
      if (points.length === 0) {
        return
      }
      // enterCheck(e)
      const key = e.key
      switch (key) {
        case 'Enter': {
          setPoints((prev) => {
            if (prev.length === 0) {
              return []
            }
            const lastPoint = prev[prev.length - 1]
            const length = length1Ref.current.value / 10
            const angle = angle1Ref.current.value
            //lastPoint로부터 angle1만큼의 각도로 length1만큼의 길이를 가지는 선을 그림
            const radian = (angle * Math.PI) / 180

            const x = lastPoint.x + length * Math.cos(radian)
            const y = lastPoint.y - length * Math.sin(radian)
            return [...prev, { x, y }]
          })
        }
      }
    },
    diagonalLine: (e) => {
      if (points.length === 0) {
        return
      }
      enterCheck(e)

      const key = e.key
      switch (key) {
        case 'Down': // IE/Edge에서 사용되는 값
        case 'ArrowDown': {
          checkDiagonal('↓')
          break
        }
        case 'Up': // IE/Edge에서 사용되는 값
        case 'ArrowUp':
          checkDiagonal('↑')
          break
        case 'Left': // IE/Edge에서 사용되는 값
        case 'ArrowLeft':
          checkDiagonal('←')
          break
        case 'Right': // IE/Edge에서 사용되는 값
        case 'ArrowRight':
          checkDiagonal('→')
          break
      }
    },
  }

  /**
   * 일변전으로 돌아가기
   */
  const handleRollback = () => {
    //points의 마지막 요소를 제거
    setPoints((prev) => prev.slice(0, prev.length - 1))
  }

  const handleFix = () => {
    if (points.length < 3) {
      return
    }

    let isAllRightAngle = true

    const firstPoint = points[0]

    /*points.forEach((point, idx) => {
      if (idx === 0 || !isAllRightAngle) {
        return
      }

      const angle = calculateAngle(point, firstPoint)
      if (angle % 90 !== 0) {
        isAllRightAngle = false
      }
    })

    if (isAllRightAngle) {
      // alert('부정확한 다각형입니다.')
      return
    }*/

    setPoints((prev) => {
      return [...prev, { x: prev[0].x, y: prev[0].y }]
    })

    isFix.current = true
  }

  const enterCheck = (e) => {
    if (e.key === 'Enter') {
      swalFire({
        type: 'confirm',
        text: getMessage('modal.cover.outline.fix.confirm'),
        confirmFn: handleFix,
      })
    }
  }

  return {
    points,
    setPoints,
    length1,
    setLength1,
    length2,
    setLength2,
    length1Ref,
    length2Ref,
    arrow1,
    setArrow1,
    arrow2,
    setArrow2,
    arrow1Ref,
    arrow2Ref,
    angle1,
    setAngle1,
    angle1Ref,
    angle2,
    setAngle2,
    angle2Ref,
    outerLineDiagonalLength,
    setOuterLineDiagonalLength,
    outerLineDiagonalLengthRef,
    type,
    setType,
    handleFix,
    handleRollback,
  }
}