'use client'

import { useEffect, useState } from 'react'
import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
import { useCommonCode } from '@/hooks/common/useCommonCode'
import { usePlan } from '@/hooks/usePlan'
import ServerError from './error'

import '@/styles/common.scss'

export const QcastProvider = ({ children }) => {
  const [planSave, setPlanSave] = useState(false)
  const { currentCanvasPlan, modifiedPlans, checkUnsavedCanvasPlan } = usePlan()
  const { commonCode, findCommonCode } = useCommonCode()

  useEffect(() => {
    const targetElement = document.getElementById('canvas')
    if (!targetElement && currentCanvasPlan?.id && planSave) {
        setPlanSave((prev) => !prev)
        checkUnsavedCanvasPlan(currentCanvasPlan.userId)
    } else if (targetElement && currentCanvasPlan?.id) {
      setPlanSave(true)
    }
  }, [modifiedPlans])

  // useEffect(() => {
  //   console.log('commonCode', commonCode)
  //   console.log(findCommonCode(113600))
  // }, [commonCode, findCommonCode])

  return (
    <>
      <ErrorBoundary fallback={<ServerError />}>{children}</ErrorBoundary>
    </>
  )
}