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

export const useCanvasMenu = () => {
  const [menuNumber, setMenuNumber] = useRecoilState(menuNumberState)
  const canvas = useRecoilValue(canvasState)
  const { drawDirectionArrow } = usePolygon()

  useEffect(() => {
    /*
     * 모듈,회로 구성을 벗어나면 방향 표시 초기화 필요
     * */
    if (!canvas) return
    if (![4, 5].includes(menuNumber)) {
      canvas
        .getObjects()
        .filter((obj) => obj.name === POLYGON_TYPE.ROOF)
        .forEach((obj) => {
          obj.set('moduleCompass', null)
          drawDirectionArrow(obj)
        })
    }
  }, [menuNumber])

  return {
    menuNumber,
    setMenuNumber,
  }
}