import { useEffect } from 'react';
import { initReactI18next, useTranslation } from 'react-i18next';
import i18n from 'i18next';
import translationEN from '../translate/en.json';
import translationAR from '../translate/ar.json';
import translationDE from '../translate/de.json';

const language = localStorage.getItem('language') ?? 'en';

i18n.use(initReactI18next).init({
    resources: {
      en: {
        translation: translationEN
      },
      ar: {
        translation: translationAR
      },
      de: {
        translation: translationDE
      }
    },
    lng: language, 
    interpolation: {
      escapeValue: false
    }
  });


export function useLanguage() {
  useEffect(() => {
    changeLanguage(language);
  }, [language]);

  const changeLanguage = (newLanguage:any) => {
    i18n.changeLanguage(newLanguage);
    localStorage.setItem('language', newLanguage);
    applyLanguageStyles(newLanguage);
  };

  return { changeLanguage };
}

function applyLanguageStyles(language:any) {
  if (language === 'ar') {
    document.body.setAttribute('dir', 'rtl');
    document.body.classList.remove('de');
    document.body.classList.add('ar');
  } else if (language === 'en') {
    document.body.setAttribute('dir', 'ltr');
    document.body.classList.remove('ar', 'de');
    document.body.classList.add('en');
  } else if (language === 'de') {
    document.body.setAttribute('dir', 'ltr');
    document.body.classList.remove('ar');
    document.body.classList.add('de');
  }

}

export function useLanguageMenu() {
  const { t } = useTranslation();
  const { changeLanguage } = useLanguage();

  const languageOptions = [
    { code: 'ar', icon: '/language/ar.svg', label: t('Arabic') },
    { code: 'en', icon: '/language/en.svg', label: t('English') },
    { code: 'de', icon: '/language/de.svg', label: t('German') }  
  ];

  const handleLanguageChange = (code:any) => {
    changeLanguage(code);
  };

  return { languageOptions, handleLanguageChange };
}