/* eslint-disable no-restricted-syntax */
/* eslint-disable no-unused-vars */
/* eslint-disable import/prefer-default-export */
/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useState } from 'react'
import { useTranslation } from 'react-i18next'
import i18n from '../plugins/i18n'
import TranslationServices from '../services/translation'

export const useTranslationData = () => {
  const userLang = localStorage.getItem('i18nextLng')
  const [langLoading, setLangLoading] = useState<boolean>(false)
  const [selectedLang, setSelectedLang] = useState<string>(userLang || 'en')
  const { t } = useTranslation()

  const fetchTranslations = async () => {
    setLangLoading(true)
    const data = await TranslationServices.getTranslations()
    for (const [key, value] of Object.entries(data.data.data)) {
      i18n.addResources(key, 'common', value)
    }
    await i18n.changeLanguage(selectedLang)
    setLangLoading(false)
  }

  const handleLangChanged = async (lang: string) => {
    setLangLoading(true)
    setSelectedLang(lang)
    await i18n.changeLanguage(lang)
    setLangLoading(false)
  }

  return {
    selectedLang,
    langLoading,
    fetchTranslations,
    i18n,
    t,
    handleLangChanged,
  }
}