'use client'

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

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

export default function LocaleLayout({ children }) {
  const locale = useCurrentLocale()
  const globalLocale = useRecoilValue(globalLocaleStore)
  const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)

  useEffect(() => {
    console.log(globalLocale)
    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 />}>
        <LocaleProvider locale={locale} fallback={<ServerError />}>
          {children}
        </LocaleProvider>
      </ErrorBoundary>
    </>
  )
}