'use client'

import { useEffect } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
import ServerError from './error'

import '@/styles/common.scss'

import KO from '@/locales/ko.json'
import JA from '@/locales/ja.json'

export const QcastProvider = ({ children }) => {
  const globalLocale = useRecoilValue(globalLocaleStore)
  const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)

  useEffect(() => {
    console.log(sessionStorage.getItem('hi'))
    console.log(Object.keys(appMessageState).length)
    // if (Object.keys(appMessageState).length === 0) {
    if (globalLocale === 'ko') {
      setAppMessageState(KO)
    } else {
      setAppMessageState(JA)
    }
    // }
  }, [globalLocale])

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