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

function GreetingContent({
  hydrated,
  onLocaleChange,
}: {
  hydrated: boolean
  onLocaleChange: (locale: string) => void
}) {
  const t = useTranslations();
  const current = useLocale();

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

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

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

  useEffect(() => {
    document.documentElement.lang = locale;
    document.documentElement.dir = dir(locale);
  }, [locale]);

  return (
    <I18nProvider i18n={i18n} locale={locale}>
      <GreetingContent hydrated={hydrated} onLocaleChange={setLocale} />
    </I18nProvider>
  );
}