import { useEffect, useState } from 'react';
import { I18nProvider, LanguageSwitcher, useTranslations } from '@platform-modules/i18n-react';
import { i18n } from '../messages';

function SwitcherNav({
  hydrated,
  onChange,
}: {
  hydrated: boolean
  onChange: (locale: string) => void
}) {
  const t = useTranslations();

  return (
    <nav aria-label={t('switch_label')} data-hydrated={hydrated ? 'true' : 'false'}>
      <LanguageSwitcher
        locales={['he', 'en']}
        onChange={onChange}
        render={({ locale: l, name, active, select }) => (
          <button
            key={l}
            type="button"
            data-testid={`multi-lang-${l}`}
            lang={l}
            aria-pressed={active}
            disabled={!hydrated}
            onClick={select}
          >
            {name}
          </button>
        )}
      />
    </nav>
  );
}

export default function Switcher({ locale: initialLocale }: { locale: string }) {
  const [locale, setLocale] = useState(initialLocale);
  const [hydrated, setHydrated] = useState(false);

  useEffect(() => {
    setHydrated(true);
  }, []);

  return (
    <I18nProvider i18n={i18n} locale={locale}>
      <SwitcherNav hydrated={hydrated} onChange={setLocale} />
    </I18nProvider>
  );
}