import { useRecoilState, useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { usePolygon } from '@/hooks/usePolygon'
import { POLYGON_TYPE } from '@/common/common'
import { compasDegAtom } from '@/store/orientationAtom'
import { useEffect } from 'react'

// 모듈,회로 구성 탭 기본설정 > 방위설정 탭
export function useOrientation() {
  const canvas = useRecoilValue(canvasState)
  const [compasDeg, setCompasDeg] = useRecoilState(compasDegAtom)

  const { drawDirectionArrow } = usePolygon()

  /*useEffect(() => {
    const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
    roofs.forEach((roof) => {
      roof.set({
        moduleCompass: null,
      })
      drawDirectionArrow(roof)
    })
  }, [])*/

  const nextStep = (compas = compasDeg) => {
    if (isNaN(compas)) {
      setCompasDeg(0)
    }
    const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
    const hasModules = canvas.getObjects().some((obj) => obj.name === 'module')
    if (!hasModules) {
      roofs.forEach((roof) => {
        delete roof.directionText
      })
    }

    roofs.forEach((roof) => {
      roof.set({
        moduleCompass: isNaN(compas) ? 0 : compas,
      })
      drawDirectionArrow(roof)
    })
  }

  return { nextStep, compasDeg, setCompasDeg }
}