'use client'

import { useEffect } from 'react'
import useSWR from 'swr'
import useSWRMutation from 'swr/mutation'
import { useAxios } from '../useAxios'
import { useRecoilState } from 'recoil'
import { canvasPopupStatusStore } from '@/store/canvasPopupStatusAtom'

export function useCanvasPopupStatusController(popupType) {
  const [canvasPopupStatusState, setCanvasPopupStatusState] = useRecoilState(canvasPopupStatusStore)
  const { getFetcher, postFetcher } = useAxios()
  const {
    data: popupStatus,
    error,
    isLoading,
  } = useSWR(popupType ? 'canvas-popup-status--data' : null, () => getFetcher(`http://localhost:8080/api/tutorial?popupType=${popupType}`))

  useEffect(() => {
    if (popupStatus) {
      setCanvasPopupStatusState({ ...canvasPopupStatusState, [popupType]: popupStatus })
    }
  }, [popupStatus])

  const { trigger, isMutating } = useSWRMutation('canvas-popup-status-update', postFetcher)

  return { trigger }
}