import { useEffect } from 'react'
import { useRecoilValue } from 'recoil'
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'

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

const SESSION_STORAGE_MESSAGE_KEY = 'QCAST_MESSAGE_STORAGE'

export const useMessage = () => {
  // const globalLocale = useRecoilValue(globalLocaleState)
  // const appMessageState = useRecoilValue(appMessageStore)
  const globalLocale = useRecoilValue(globalLocaleStore)
  const appMessageState = globalLocale === 'ko' ? KO : JA

  const getMessage = (key, args = []) => {
    // if (sessionStorage.getItem(SESSION_STORAGE_MESSAGE_KEY) === null) {
    //   if (globalLocale === 'ko') {
    //     setSessionMessage(JSON.stringify(KO))
    //   } else {
    //     setSessionMessage(JSON.stringify(JA))
    //   }
    // }

    // const sessionMessage = getSessionMessage()
    // const message = sessionMessage[key] || key
    const message = appMessageState[key] || key

    return args.reduce((acc, arg, i) => {
      return acc.replaceAll(`{${i}}`, arg)
    }, message)
  }

  const setSessionMessage = (sessionMessage) => {
    sessionStorage.setItem(SESSION_STORAGE_MESSAGE_KEY, sessionMessage)
  }

  const getSessionMessage = () => {
    return JSON.parse(sessionStorage.getItem(SESSION_STORAGE_MESSAGE_KEY))
  }

  return { getMessage }
}