import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useAppDispatch, useAppSelector } from '../hooks';
import { setLocale, SupportedLocale } from '../slice/locale';

export const useLocale = () => {
  const { i18n, t } = useTranslation();
  const dispatch = useAppDispatch();
  const currentLocale = useAppSelector((state) => state.locale.currentLocale);

  // Sync Redux state with i18next on mount
  useEffect(() => {
    if (currentLocale && i18n.language !== currentLocale) {
      i18n.changeLanguage(currentLocale);
    }
  }, [currentLocale, i18n]);

  // Function to change language
  const changeLanguage = (locale: SupportedLocale) => {
    dispatch(setLocale(locale));
    i18n.changeLanguage(locale);
  };

  return {
    currentLocale,
    changeLanguage,
    t,
    i18n,
  };
};