import { canvasState } from '@/store/canvasAtom'
import { useRecoilValue } from 'recoil'
import { usePolygon } from '@/hooks/usePolygon'
import { useState } from 'react'
import { usePopup } from '@/hooks/usePopup'

export const FLOW_DIRECTION_TYPE = {
  EIGHT_AZIMUTH: 'eightAzimuth',
  TWENTY_FOUR_AZIMUTH: 'twentyFourAzimuth',
}

export function useFlowDirectionSetting(id) {
  const canvas = useRecoilValue(canvasState)
  const { drawDirectionArrow } = usePolygon()
  const { closePopup } = usePopup()

  const [type, setType] = useState(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)

  const changeSurfaceFlowDirection = (roof, direction, orientation) => {
    roof.set({
      direction: direction,
      surfaceCompass: orientation,
    })
    drawDirectionArrow(roof)
    canvas?.renderAll()
    closePopup(id)
  }

  return { changeSurfaceFlowDirection, type, setType }
}