import { Button, Input } from '@nextui-org/react'
import { useState } from 'react'
import { useRecoilValue, useSetRecoilState } from 'recoil'
import { modalState } from '@/store/modalAtom'
import { QPolygon } from '@/components/fabric/QPolygon'
import { fontSizeState, roofMaterialState } from '@/store/canvasAtom'
import { degreesToRadians } from '@turf/turf'
import { getIntersectionPoint } from '@/util/canvas-util'

/**
 * 면형상 배치 모달
 * @returns {JSX.Element}
 * @constructor
 */
export const SurfaceShapeModal = ({ canvas }) => {
  const [type, setType] = useState(0)
  const setOpen = useSetRecoilState(modalState)
  const fontSize = useRecoilValue(fontSizeState)
  //지붕재
  const roofMaterial = useRecoilValue(roofMaterialState)

  /**
   * 최대 5개의 length
   */
  const [length1, setLength1] = useState(0)
  const [length2, setLength2] = useState(0)
  const [length3, setLength3] = useState(0)
  const [length4, setLength4] = useState(0)
  const [length5, setLength5] = useState(0)

  // 방향
  const [direction, setDirection] = useState('south')

  /**
   * 최대 5개의 length
   */
  const onChangeType = (e) => {
    setType(Number(e.target.value))
  }

  const closeModal = () => {
    setOpen(false)
  }

  const onSave = () => {
    if (!checkValid()) {
      alert('안됨')
      return
    }
    let isDrawing = true
    let obj = null
    let points = []
    canvas?.on('mouse:move', (e) => {
      if (!isDrawing) {
        return
      }
      const pointer = canvas?.getPointer(e.e)
      canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'guideTriangle'))
      switch (type) {
        case 1: {
          let newLength2 = length2

          if (length3 !== 0) {
            newLength2 = Math.sqrt(length3 ** 2 - (length1 / 2) ** 2)
          }

          points = [
            { x: pointer.x, y: pointer.y - parseInt(newLength2) / 2 },
            { x: pointer.x - parseInt(length1) / 2, y: pointer.y + parseInt(newLength2) / 2 },
            { x: pointer.x + parseInt(length1) / 2, y: pointer.y + parseInt(newLength2) / 2 },
          ]

          break
        }
        case 2: {
          points = [
            { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
            { x: pointer.x + length1 / 2, y: pointer.y - length2 / 2 },
            { x: pointer.x - length1 / 2, y: pointer.y - length2 / 2 },
          ]

          break
        }
        case 3: {
          points = [
            { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
            { x: pointer.x + length3 / 2, y: pointer.y - length2 / 2 },
            { x: pointer.x - length3 / 2, y: pointer.y - length2 / 2 },
          ]

          break
        }
        case 4: {
          points = [
            { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
            { x: pointer.x + length1 / 2, y: pointer.y - length2 / 2 },
          ]

          break
        }
        case 5: {
          points = [
            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
            { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
            { x: pointer.x - length1 / 2, y: pointer.y - length2 / 2 },
          ]

          break
        }

        case 6: {
          points = [
            { x: pointer.x - length1 / 2, y: pointer.y - length3 / 2 },
            { x: pointer.x - length1 / 2, y: pointer.y + length3 / 2 },
            { x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 },
            { x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 - length2 },
          ]

          break
        }

        case 7: {
          points = [
            { x: pointer.x - length1 / 2, y: pointer.y - length2 / 2 },
            { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 - length3 },
          ]

          break
        }
        case 8: {
          const angleInRadians = Math.asin(length2 / length3)
          points = [
            { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
            { x: pointer.x - length1 / 2 + length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
            { x: pointer.x + length1 / 2 + length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
          ]

          break
        }
        case 9: {
          const angleInRadians = Math.asin(length2 / length3)
          points = [
            { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
            { x: pointer.x + length1 / 2 - length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
            { x: pointer.x - length1 / 2 - length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
            { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
          ]

          break
        }
        case 10: {
          points = [
            { x: pointer.x - (length1 + length2 + length3) / 2, y: pointer.y - (length4 + length5) / 2 },
            { x: pointer.x - (length1 + length2 + length3) / 2, y: pointer.y + (length4 + length5) / 2 },
            { x: pointer.x - (length1 + length2 + length3) / 2 + length1, y: pointer.y + (length4 + length5) / 2 },
            { x: pointer.x - (length1 + length2 + length3) / 2 + length1, y: pointer.y + (length4 + length5) / 2 - length5 },
            { x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2, y: pointer.y + (length4 + length5) / 2 - length5 },
            { x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2, y: pointer.y + (length4 + length5) / 2 - length5 + length5 },
            {
              x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2 + length3,
              y: pointer.y + (length4 + length5) / 2 - length5 + length5,
            },
            {
              x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2 + length3,
              y: pointer.y + (length4 + length5) / 2 - length5 + length5 - (length4 + length5),
            },
          ]

          break
        }
        case 11: {
          points = [
            { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length3 },
            { x: pointer.x - length1 / 2 + length1 - (length1 - length2), y: pointer.y + length4 / 2 - length3 },
            { x: pointer.x - length1 / 2 + length1 - (length1 - length2), y: pointer.y + length4 / 2 - length3 + (length3 - length4) },
            { x: pointer.x - length1 / 2 + length1 - (length1 - length2) - length2, y: pointer.y + length4 / 2 - length3 + (length3 - length4) },
          ]

          break
        }
        case 12: {
          points = [
            { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
            { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length4 },
            { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length4 - (length3 - length4) },
            { x: pointer.x - length1 / 2 + length1 - length2 - (length1 - length2), y: pointer.y + length4 / 2 - length4 - (length3 - length4) },
          ]

          break
        }
        case 13: {
          points = [
            { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
            { x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 },
            { x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
            { x: pointer.x - length1 / 2 + length1 - length3 - length2, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
          ]
          break
        }
        case 14: {
          points = [
            { x: pointer.x + length1 / 2, y: pointer.y + length4 / 2 },
            { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
            { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 - length4 },
            { x: pointer.x + length1 / 2 - length1 + length3, y: pointer.y + length4 / 2 - length4 },
            { x: pointer.x + length1 / 2 - length1 + length3, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
            { x: pointer.x + length1 / 2 - length1 + length3 + length2, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
          ]
          break
        }
        case 15: {
          points = [
            { x: pointer.x + length1 / 2, y: pointer.y + length4 / 2 },
            { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
            { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 - length5 },
            { x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 },
            { x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
            { x: pointer.x + length1 / 2 - length1 + length2 + length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
          ]
          break
        }
        case 16: {
          points = [
            { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length5 },
            { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 },
            { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
            { x: pointer.x - length1 / 2 + length1 - length2 - length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
          ]
          break
        }
        case 17: {
          points = [
            { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length5 },
            { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 },
            { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
            { x: pointer.x - length1 / 2 + length1 - length2 - length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
          ]
          break
        }
        case 18: {
          points = [
            { x: pointer.x + length1 / 2, y: pointer.y + length4 / 2 },
            { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
            { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 - length5 },
            { x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 },
            { x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
            { x: pointer.x + length1 / 2 - length1 + length2 + length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
          ]
          break
        }

        case 19: {
          const leftHypotenuse = Math.sqrt(((length1 - length2) / 2) ** 2 + length3 ** 2)
          const rightHypotenuse = (length4 / length3) * leftHypotenuse

          const leftAngle = Math.acos((length1 - length2) / 2 / leftHypotenuse)

          points = [
            { x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(leftAngle), y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(leftAngle) },
            { x: pointer.x - length1 / 2, y: pointer.y + length3 / 2 },
            { x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 },
            {
              x: pointer.x + length1 / 2 - rightHypotenuse * Math.cos(leftAngle),
              y: pointer.y + length3 / 2 - rightHypotenuse * Math.sin(leftAngle),
            },
            {
              x: pointer.x + length1 / 2 - rightHypotenuse * Math.cos(leftAngle) - length2,
              y: pointer.y + length3 / 2 - rightHypotenuse * Math.sin(leftAngle),
            },
          ]

          break
        }
        case 20: {
          // 좌측 빗변
          const rightHypotenuse = Math.sqrt(((length1 - length2) / 2) ** 2 + length3 ** 2)
          const leftHypotenuse = (length4 / length3) * rightHypotenuse

          const rightAngle = Math.acos((length1 - length2) / 2 / rightHypotenuse)
          points = [
            {
              x: pointer.x + length1 / 2 - rightHypotenuse * Math.cos(rightAngle),
              y: pointer.y + length3 / 2 - rightHypotenuse * Math.sin(rightAngle),
            },
            { x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 },
            { x: pointer.x - length1 / 2, y: pointer.y + length3 / 2 },
            {
              x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(rightAngle),
              y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(rightAngle),
            },
            {
              x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(rightAngle) + length2,
              y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(rightAngle),
            },
          ]
          break
        }
        case 21: {
          const pointsArray = [
            { x: 0, y: 0 },
            { x: 0, y: 0 },
            { x: 0, y: 0 },
            { x: 0, y: 0 },
            { x: 0, y: 0 },
          ]

          const tmpPolygon = new QPolygon(
            [
              { x: 0, y: length3 },
              { x: length1 - length2, y: length3 },
              { x: (length1 - length2) / 2, y: length3 - length3 },
            ],
            {
              fill: 'transparent',
              stroke: 'black', //black
              strokeWidth: 2,
              selectable: true,
              fontSize: 0,
            },
          )

          const coord = getIntersectionPoint(tmpPolygon.lines[1].startPoint, tmpPolygon.lines[2].startPoint, length3 - length4)
          const scale = (length1 - length2) / coord.x

          tmpPolygon.set({ scaleX: scale })

          pointsArray[0].x = 0
          pointsArray[0].y = length3 //바닥면부터 시작하게
          pointsArray[1].x = pointsArray[0].x + length1
          pointsArray[1].y = pointsArray[0].y
          pointsArray[2].x = pointsArray[1].x
          pointsArray[2].y = pointsArray[1].y - length4
          pointsArray[3].x = pointsArray[2].x - length2
          pointsArray[3].y = pointsArray[2].y
          pointsArray[4].x = tmpPolygon.getCurrentPoints()[2].x
          pointsArray[4].y = tmpPolygon.getCurrentPoints()[2].y

          points = [
            {
              x: pointer.x - length1 / 2,
              y: pointer.y + length4 / 2,
            },
            {
              x: pointer.x + length1 / 2,
              y: pointer.y + length4 / 2,
            },
            {
              x: pointer.x + length1 / 2,
              y: pointer.y - length4 / 2,
            },
            {
              x: pointer.x - (length2 - length1 / 2),
              y: pointer.y - length4 / 2,
            },
            {
              x: pointer.x - length1 / 2 + pointsArray[4].x,
              y: pointer.y - length3 + length4 / 2,
            },
          ]

          break
        }
        case 22: {
          const pointsArray = [
            { x: 0, y: 0 },
            { x: 0, y: 0 },
            { x: 0, y: 0 },
            { x: 0, y: 0 },
            { x: 0, y: 0 },
          ]

          const tmpPolygon = new QPolygon(
            [
              { x: 0, y: length3 },
              { x: length1 - length2, y: length3 },
              { x: (length1 - length2) / 2, y: length3 - length3 },
            ],
            {
              fill: 'transparent',
              stroke: 'black', //black
              strokeWidth: 2,
              selectable: true,
              fontSize: 0,
            },
          )

          const coord = getIntersectionPoint(tmpPolygon.lines[1].startPoint, tmpPolygon.lines[2].startPoint, length3 - length4)
          const scale = (length1 - length2) / coord.x

          tmpPolygon.set({ scaleX: scale })

          pointsArray[0].x = 0
          pointsArray[0].y = length3 //바닥면부터 시작하게
          pointsArray[1].x = pointsArray[0].x + length1
          pointsArray[1].y = pointsArray[0].y
          pointsArray[2].x = pointsArray[1].x
          pointsArray[2].y = pointsArray[1].y - length4
          pointsArray[3].x = pointsArray[2].x - length2
          pointsArray[3].y = pointsArray[2].y
          pointsArray[4].x = tmpPolygon.getCurrentPoints()[2].x
          pointsArray[4].y = tmpPolygon.getCurrentPoints()[2].y

          points = [
            {
              x: pointer.x - length1 / 2,
              y: pointer.y + length4 / 2,
            },
            {
              x: pointer.x + length1 / 2,
              y: pointer.y + length4 / 2,
            },
            {
              x: pointer.x + length1 / 2,
              y: pointer.y - length4 / 2,
            },
            {
              x: pointer.x - (length2 - length1 / 2),
              y: pointer.y - length4 / 2,
            },
            {
              x: pointer.x - length1 / 2 + pointsArray[4].x,
              y: pointer.y - length3 + length4 / 2,
            },
          ]

          break
        }
        case 23: {
          points = [
            { x: pointer.x - length1 / 2 + length2, y: pointer.y + length4 / 2 },
            { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
            { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 - length4 },
            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
            { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 + length4 },
            { x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + length4 },
            { x: pointer.x - length1 / 2 + length2 + (length1 - length2 - length3) / 2, y: pointer.y + length4 / 2 - length4 + length5 },
          ]
          break
        }

        case 24: {
          points = [
            { x: pointer.x - length1 / 2, y: pointer.y + length2 - length2 / 2 },
            { x: pointer.x - length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 },
            { x: pointer.x, y: pointer.y + length2 - length2 / 2 - length3 - (length2 - length3) },
            { x: pointer.x + length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 },
            { x: pointer.x + length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 + length3 },
          ]
          break
        }

        case 25: {
          points = [
            {
              x: pointer.x - length1 / 2,
              y: pointer.y + length3 / 2,
            },
            {
              x: pointer.x - length1 / 2 + (length1 - length2) / 2,
              y: pointer.y + length3 / 2 - (length3 - length4),
            },
            {
              x: pointer.x - length1 / 2 + (length1 - length2) / 2,
              y: pointer.y + length3 / 2 - (length3 - length4) - length4,
            },
            {
              x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2,
              y: pointer.y + length3 / 2 - (length3 - length4) - length4,
            },
            {
              x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2,
              y: pointer.y + length3 / 2 - (length3 - length4) - length4 + length4,
            },
            {
              x: pointer.x - length1 / 2 + length1,
              y: pointer.y + length3 / 2,
            },
          ]
          break
        }
        case 26: {
          const angle = (Math.asin(length3 / length4) * 180) / Math.PI // 높이와 빗변으로 먼저 각도구하기

          const topL = (length1 - length2) / 2 / Math.cos((angle * Math.PI) / 180) // 꺽이는부분 윗쪽 길이

          points = [
            {
              x: pointer.x - length1 / 2 + length1,
              y: pointer.y + length3 / 2,
            },
            {
              x: pointer.x - length1 / 2,
              y: pointer.y + length3 / 2,
            },
            {
              x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)),
              y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
            },
            {
              x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)) + length2,
              y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
            },
            {
              x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)) + length2 + topL * Math.cos(degreesToRadians(angle)),
              y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)) + topL * Math.sin(degreesToRadians(angle)),
            },
          ]
          break
        }
        case 27: {
          const angle = (Math.asin(length3 / length4) * 180) / Math.PI // 높이와 빗변으로 먼저 각도구하기

          const topL = (length1 - length2) / 2 / Math.cos((angle * Math.PI) / 180) // 꺽이는부분 윗쪽 길이
          points = [
            {
              x: pointer.x - length1 / 2,
              y: pointer.y + length3 / 2,
            },
            {
              x: pointer.x - length1 / 2 + length1,
              y: pointer.y + length3 / 2,
            },
            {
              x: pointer.x - length1 / 2 + length1 - length4 * Math.cos(degreesToRadians(angle)),
              y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
            },
            {
              x: pointer.x - length1 / 2 + length1 - length4 * Math.cos(degreesToRadians(angle)) - length2,
              y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
            },
            {
              x: pointer.x - length1 / 2 + length1 - length4 * Math.cos(degreesToRadians(angle)) - length2 - topL * Math.cos(degreesToRadians(angle)),
              y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)) + topL * Math.sin(degreesToRadians(angle)),
            },
          ]
          break
        }
        case 28: {
          const a = Math.sqrt(length3 * length3 - length2 * length2) // 입력된 밑변과 높이

          const sinA = a / length3
          const angleInRadians = Math.asin(sinA)
          const angleInDegrees = angleInRadians * (180 / Math.PI)
          const b = a - length1 / 2

          const c = b / Math.tan(angleInRadians)
          const d = Math.sqrt(b * b + c * c)
          const newAngleInRadians = (90 - angleInDegrees) * (Math.PI / 180)
          points = [
            { x: pointer.x - (length1 + b) / 2, y: pointer.y + length2 / 2 },
            { x: pointer.x + length1 / 2 - b / 2, y: pointer.y + length2 / 2 },
            {
              x: pointer.x + length1 / 2 - b / 2 + d * Math.cos(newAngleInRadians),
              y: pointer.y + length2 / 2 - d * Math.sin(newAngleInRadians),
            },
            {
              x: pointer.x - (length1 + b) / 2 + length3 * Math.cos(newAngleInRadians),
              y: pointer.y + length2 / 2 - length3 * Math.sin(newAngleInRadians),
            },
          ]
          break
        }
        case 29: {
          const a = Math.sqrt(length3 * length3 - length2 * length2) // 입력된 밑변과 높이

          const sinA = a / length3
          const angleInRadians = Math.asin(sinA)
          const angleInDegrees = angleInRadians * (180 / Math.PI)
          const b = a - length1 / 2

          const c = b / Math.tan(angleInRadians)
          const d = Math.sqrt(b * b + c * c)
          const newAngleInRadians = (90 - angleInDegrees) * (Math.PI / 180)
          points = [
            {
              x: pointer.x + length1 / 2 - b / 2 - length3 * Math.cos(newAngleInRadians),
              y: pointer.y + length2 / 2 - length3 * Math.sin(newAngleInRadians),
            },
            { x: pointer.x + length1 / 2 - b / 2, y: pointer.y + length2 / 2 },
            { x: pointer.x - (length1 + b) / 2, y: pointer.y + length2 / 2 },
            { x: pointer.x - (length1 + b) / 2 - d * Math.cos(newAngleInRadians), y: pointer.y + length2 / 2 - d * Math.sin(newAngleInRadians) },
          ]
          break
        }
      }

      const options = {
        fill: 'transparent',
        stroke: 'black',
        strokeWidth: 2,
        selectable: true,
        fontSize: fontSize,
        lockMovementX: true, // X 축 이동 잠금
        lockMovementY: true, // Y 축 이동 잠금
        lockRotation: true, // 회전 잠금
        lockScalingX: true, // X 축 크기 조정 잠금
        lockScalingY: true, // Y 축 크기 조정 잠금
        name: 'guideTriangle',
        flipX: type === 22 ? true : false,
      }

      obj = new QPolygon(points, options)
      obj.setCoords() //좌표 변경 적용

      canvas?.add(obj)
      obj.set({ direction: direction })
      setCurrentPattern(obj)
      canvas?.renderAll()
    })

    canvas?.on('mouse:down', (e) => {
      isDrawing = false
      obj.set('name', 'roof')
    })
    setOpen(false)
  }

  const checkValid = () => {
    let result = true
    switch (type) {
      case 1: {
        if (length3 !== 0 && length1 > length3) {
          return
        }
        break
      }
      case 3: {
        if (length3 > length1) {
          return
        }
        break
      }
      case 6: {
        if (length3 > length1) {
          return
        }
        break
      }
      case 7: {
        if (length3 > length1) {
          return
        }
        break
      }
      case 8: {
        if (length2 > length3) {
          return
        }
        break
      }
      case 9: {
        if (length2 > length3) {
          return
        }
        break
      }
      case 21: {
        if (length1 < length2) {
          alert('1번보다 작게 입력해주세요.')
          return
        }

        if (length3 < length4) {
          alert('3번보다 작게 입력해주세요.')
          return
        }
      }
      case 22: {
        if (length1 < length2) {
          alert('1번보다 작게 입력해주세요.')
          return
        }

        if (length3 < length4) {
          alert('3번보다 작게 입력해주세요.')
          return
        }
      }
    }

    return result
  }

  const setLength = (e) => {
    let { name, value } = e.target
    value = value.replace(/[^-0-9]/g, '')
    switch (name) {
      case 'length1':
        setLength1(Number(value))
        break
      case 'length2':
        setLength2(Number(value))
        break
      case 'length3':
        setLength3(Number(value))
        break
      case 'length4':
        setLength4(Number(value))
        break
      case 'length5':
        setLength5(Number(value))
        break
      default:
        break
    }
  }

  const setCurrentPattern = (polygon) => {
    const { width, height, roofStyle } = roofMaterial
    const roofRatio = window.devicePixelRatio || 1
    const patternSourceCanvas = document.createElement('canvas')

    if (roofStyle === 1) {
      patternSourceCanvas.width = width * roofRatio
      patternSourceCanvas.height = height * roofRatio
    } else if (roofStyle === 2) {
      patternSourceCanvas.width = width * 2
      patternSourceCanvas.height = height * 2
    }

    const ctx = patternSourceCanvas.getContext('2d')

    ctx.scale(roofRatio, roofRatio)
    ctx.strokeStyle = 'green'
    ctx.lineWidth = 0.4
    // 벽돌 패턴 그리기
    if (roofStyle === 1) {
      ctx.strokeRect(0, 0, 50, 30)
    } else if (roofStyle === 2) {
      // 지그재그
      ctx.strokeRect(0, 0, 200, 100)
      ctx.strokeRect(100, 100, 200, 100)
    }

    // 패턴 생성
    const pattern = new fabric.Pattern({
      source: patternSourceCanvas,
      repeat: 'repeat',
    })
    polygon.set('fill', null)

    polygon.set('fill', pattern)
    canvas?.renderAll()
  }

  const ButtonComp = () => {
    // Generate 29 buttons
    const buttons = []
    for (let i = 1; i <= 29; i++) {
      buttons.push(
        <Button key={i} className="m-1 p-2" value={i} onClick={onChangeType}>
          {i}번 추가
        </Button>,
      )
    }

    return <div>{buttons}</div>
  }

  return (
    <>
      <div>
        <div>면형상배치{type}</div>
        <ButtonComp></ButtonComp>
      </div>
      {type === 1 ? (
        <div>
          길이1
          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
          {length3 === 0 && (
            <>
              길이2
              <Input type="text" name={'length2'} value={length2} onChange={setLength} />
            </>
          )}
          대각선 <Input type="text" name={'length3'} value={length3} onChange={setLength} />
        </div>
      ) : [2, 4, 5].includes(type) ? (
        <div>
          길이1
          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
          길이2
          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
        </div>
      ) : [3, 6, 7, 8, 9, 24, 28, 29].includes(type) ? (
        <>
          길이1
          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
          길이2
          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
          길이3
          <Input type="text" name={'length3'} value={length3} onChange={setLength} />
        </>
      ) : [11, 12, 19, 20, 21, 22, 25, 26, 27].includes(type) ? (
        <>
          길이1
          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
          길이2
          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
          길이3
          <Input type="text" name={'length3'} value={length3} onChange={setLength} />
          길이4
          <Input type="text" name={'length4'} value={length4} onChange={setLength} />
        </>
      ) : [10, 13, 14, 15, 16, 17, 18, 23].includes(type) ? (
        <>
          길이1
          <Input type="text" name={'length1'} value={length1} onChange={setLength} />
          길이2
          <Input type="text" name={'length2'} value={length2} onChange={setLength} />
          길이3
          <Input type="text" name={'length3'} value={length3} onChange={setLength} />
          길이4
          <Input type="text" name={'length4'} value={length4} onChange={setLength} />
          길이5
          <Input type="text" name={'length5'} value={length5} onChange={setLength} />
        </>
      ) : (
        <></>
      )}
      <div className="flex flex-col items-center">
        <div className="flex">
          <Button
            className={`p-4 border rounded-lg ${direction === 'north' ? 'bg-blue-200' : ''} flex items-center justify-center`}
            onClick={() => setDirection('north')}
          >
            북
          </Button>
        </div>
        <div className="flex space-x-4">
          <Button
            className={`p-4 border rounded-lg ${direction === 'west' ? 'bg-blue-200' : ''} flex items-center justify-center`}
            onClick={() => setDirection('west')}
          >
            서
          </Button>
          <Button
            className={`p-4 border rounded-lg ${direction === 'east' ? 'bg-blue-200' : ''} flex items-center justify-center`}
            onClick={() => setDirection('east')}
          >
            동
          </Button>
        </div>
        <div className="mt-4">
          <Button
            className={`p-4 border rounded-lg ${direction === 'south' ? 'bg-blue-200' : ''} flex items-center justify-center`}
            onClick={() => setDirection('south')}
          >
            남
          </Button>
        </div>
      </div>
      <div>
        <Button className="m-1 p-2" color={'primary'} onClick={closeModal}>
          닫기
        </Button>
        <Button className="m-1 p-2" color={'primary'} onClick={onSave}>
          저장
        </Button>
      </div>
    </>
  )
}