import { useEffect, useRef } from 'react'
import { distanceBetweenPoints } from '@/util/canvas-util'
import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
import {
  adsorptionPointAddModeState,
  adsorptionPointModeState,
  adsorptionRangeState,
  canvasState,
  dotLineIntervalSelector,
  verticalHorizontalModeState,
} from '@/store/canvasAtom'
import { useEvent } from '@/hooks/useEvent'
import { useMouse } from '@/hooks/useMouse'
import { useLine } from '@/hooks/useLine'
import { useTempGrid } from '@/hooks/useTempGrid'
import { usePolygon } from '@/hooks/usePolygon'
import {
  outerLineAngle1State,
  outerLineAngle2State,
  outerLineArrow1State,
  outerLineArrow2State,
  outerLineDiagonalState,
  outerLineFixState,
  outerLineLength1State,
  outerLineLength2State,
  outerLinePointsState,
  outerLineTypeState,
} from '@/store/outerLineAtom'
import { calculateAngle } from '@/util/qpolygon-utils'
import { fabric } from 'fabric'
import { outlineDisplaySelector } from '@/store/settingAtom'
import { usePopup } from '@/hooks/usePopup'
import Big from 'big.js'
import RoofShapeSetting from '@/components/floor-plan/modal/roofShape/RoofShapeSetting'
import { useObject } from '@/hooks/useObject'

//외벽선 그리기
export function useOuterLineWall(id, propertiesId) {
  const canvas = useRecoilValue(canvasState)
  const {
    initEvent,
    addCanvasMouseEventListener,
    addDocumentEventListener,
    removeAllMouseEventListeners,
    removeAllDocumentEventListeners,
    removeMouseEvent,
  } = useEvent()
  // const {
  //   initEvent,
  //   // addCanvasMouseEventListener,
  //   // addDocumentEventListener,
  //   removeAllMouseEventListeners,
  //   removeAllDocumentEventListeners,
  //   removeMouseEvent,
  // } = useContext(EventContext)
  const { getIntersectMousePoint } = useMouse()
  const { addLine, removeLine } = useLine()
  const { tempGridMode } = useTempGrid()
  const { addPolygonByLines } = usePolygon()
  const { handleSelectableObjects } = useObject()

  const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
  const adsorptionPointAddMode = useRecoilValue(adsorptionPointAddModeState)
  const adsorptionPointMode = useRecoilValue(adsorptionPointModeState)
  const adsorptionRange = useRecoilValue(adsorptionRangeState)
  const interval = useRecoilValue(dotLineIntervalSelector) // 가로 세로 간격

  const isOutlineDisplay = useRecoilValue(outlineDisplaySelector)

  const length1Ref = useRef(null)
  const length2Ref = useRef(null)
  const angle1Ref = useRef(null)
  const angle2Ref = useRef(null)
  const [length1, setLength1] = useRecoilState(outerLineLength1State)
  const [length2, setLength2] = useRecoilState(outerLineLength2State)
  const [arrow1, setArrow1] = useRecoilState(outerLineArrow1State)
  const [arrow2, setArrow2] = useRecoilState(outerLineArrow2State)
  const [points, setPoints] = useRecoilState(outerLinePointsState)
  const resetPoints = useResetRecoilState(outerLinePointsState)
  const [type, setType] = useRecoilState(outerLineTypeState)
  const [angle1, setAngle1] = useRecoilState(outerLineAngle1State)
  const [angle2, setAngle2] = useRecoilState(outerLineAngle2State)
  const [outerLineDiagonalLength, setOuterLineDiagonalLength] = useRecoilState(outerLineDiagonalState)
  const arrow1Ref = useRef(arrow1)
  const arrow2Ref = useRef(arrow2)
  const { addPopup, closePopup } = usePopup()

  const setOuterLineFix = useSetRecoilState(outerLineFixState)

  const outerLineDiagonalLengthRef = useRef(null)

  const isFix = useRef(false)

  useEffect(() => {
    addCanvasMouseEventListener('mouse:down', mouseDown)
    addDocumentEventListener('contextmenu', document, (e) => {
      handleRollback()
    })
    handleSelectableObjects(['lineGrid', 'tempGrid', 'adsorptionPoint'], false)

    clear()
    return () => {
      initEvent()
      handleSelectableObjects(['lineGrid', 'tempGrid', 'adsorptionPoint'], true)

      canvas
        .getObjects()
        .filter((obj) => obj.name === 'startPoint')
        .forEach((obj) => {
          canvas.remove(obj)
        })
    }
  }, [verticalHorizontalMode, points, adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, interval, tempGridMode])

  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 activeElem = document.activeElement

    if (activeElem) {
      activeElem.blur()
    }
  }

  const mouseDown = (e) => {
    let pointer = getIntersectMousePoint(e)
    pointer = { x: Big(pointer.x).toNumber(), y: Big(pointer.y).toNumber() }

    if (points.length === 0) {
      setPoints((prev) => [...prev, pointer])
    } else {
      const lastPoint = points[points.length - 1]
      let newPoint = { x: pointer.x, y: pointer.y }
      const length = distanceBetweenPoints(lastPoint, newPoint)
      if (verticalHorizontalMode) {
        const vector = {
          x: Big(pointer.x).minus(Big(points[points.length - 1].x)),
          y: Big(pointer.y).minus(Big(points[points.length - 1].y)),
        }
        const slope = vector.x.eq(0) ? Big(1) : vector.y.div(vector.x).abs() // 기울기 계산

        let scaledVector
        // if (slope >= 1) {
        if (slope.gte(1)) {
          // 기울기가 1 이상이면 x축 방향으로 그림
          scaledVector = {
            x: 0,
            y: vector.y.gte(0) ? Big(length).toNumber() : Big(length).neg().toNumber(),
          }
        } else {
          // 기울기가 1 미만이면 y축 방향으로 그림
          scaledVector = {
            x: vector.x.gte(0) ? Big(length).toNumber() : Big(length).neg().toNumber(),
            y: 0,
          }
        }

        const verticalLength = scaledVector.y
        const horizontalLength = scaledVector.x

        newPoint = {
          x: Big(lastPoint.x).plus(horizontalLength).toNumber(),
          y: Big(lastPoint.y).plus(verticalLength).toNumber(),
        }
      }
      setPoints((prev) => [...prev, newPoint])
    }
  }

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

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

    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: 'startPoint',
      })

      canvas?.add(point)
    } else {
      setOuterLineFix(false)
      canvas
        .getObjects()
        .filter((obj) => obj.name === 'outerLinePoint')
        .forEach((obj) => {
          canvas.remove(obj)
        })
      points.forEach((point, idx) => {
        const circle = new fabric.Circle({
          left: point.x,
          top: point.y,
          visible: false,
          name: 'outerLinePoint',
        })
        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()
        canvas?.renderAll()
        setOuterLineFix(true)
        canvas.outerLineFix = true
        closePopup(id)
        ccwCheck()
        addPopup(propertiesId, 1, <RoofShapeSetting id={propertiesId} pos={{ x: 50, y: 230 }} />)
      }

      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',
          visible: isOutlineDisplay,
        })
      } else {
        const guideLine1 = addLine([lastPoint.x, lastPoint.y, lastPoint.x, firstPoint.y], {
          stroke: 'grey',
          strokeWidth: 1,
          strokeDashArray: [1, 1, 1],
          name: 'helpGuideLine',
          visible: isOutlineDisplay,
        })

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

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

  // 직각 완료될 경우 확인
  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,
            },
          ]
        })
      }
    }
  }

  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') {
      handleFix()
    }
  }

  // 시계방향으로 그려진 경우 반시게방향으로 변경
  const ccwCheck = () => {
    let outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')

    if (outerLines.length < 2) {
      swalFire({ text: getMessage('wall.line.not.found') })
      return
    }

    /**
     * 외벽선이 시계방향인지 시계반대 방향인지 확인
     */
    const outerLinePoints = outerLines.map((line) => ({ x: line.x1, y: line.y1 }))
    let counterClockwise = true
    let signedArea = 0

    outerLinePoints.forEach((point, index) => {
      const nextPoint = outerLinePoints[(index + 1) % outerLinePoints.length]
      signedArea += point.x * nextPoint.y - point.y * nextPoint.x
    })

    if (signedArea > 0) {
      counterClockwise = false
    }
    /** 시계 방향일 경우 외벽선 reverse*/
    if (!counterClockwise) {
      outerLines.reverse().forEach((line, index) => {
        addLine([line.x2, line.y2, line.x1, line.y1], {
          stroke: line.stroke,
          strokeWidth: line.strokeWidth,
          idx: index,
          selectable: line.selectable,
          name: 'outerLine',
          x1: line.x2,
          y1: line.y2,
          x2: line.x1,
          y2: line.y1,
          visible: line.visible,
        })
        canvas.remove(line)
      })
      canvas.renderAll()
    }
  }

  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,
  }
}