import clsx from 'clsx';
import React, { useEffect } from 'react';

import InlineStyle from 'pl-fe/components/inline-style';
import { useLocale, useLocaleDirection } from 'pl-fe/hooks/use-locale';
import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config';
import { useTheme } from 'pl-fe/hooks/use-theme';
import { useThemeCss } from 'pl-fe/hooks/use-theme-css';
import { startSentry } from 'pl-fe/sentry';
import { useHasModals } from 'pl-fe/stores/modals';
import { useSettings } from 'pl-fe/stores/settings';

const Helmet = React.lazy(() => import('pl-fe/components/helmet'));

/** Injects metadata into site head with Helmet. */
const PlFeHead = () => {
  const locale = useLocale();
  const direction = useLocaleDirection(locale);
  const { reduceMotion, underlineLinks, demetricator, systemFont, theme: themeSettings } = useSettings();
  const plFeConfig = usePlFeConfig();
  const theme = useTheme();

  const withModals = useHasModals();

  const themeCss = useThemeCss();
  const dsn = plFeConfig.sentryDsn;

  const bodyClass = clsx({
    'no-reduce-motion': !reduceMotion,
    'underline-links': underlineLinks,
    'demetricator': demetricator,
    'system-font': systemFont,
    'with-modals': withModals,
  });

  useEffect(() => {
    if (dsn) {
      startSentry(dsn).catch(console.error);
    }
  }, [dsn]);

  return (
    <>
      <Helmet>
        <html
          lang={locale}
          className={clsx(`text-${themeSettings?.interfaceSize || 'md'}`, {
            'dark': theme === 'dark',
            'dark black': theme === 'black',
          })}
        />
        <body className={bodyClass} dir={direction} />
        <meta name='theme-color' content={plFeConfig.brandColor} />
      </Helmet>
      <InlineStyle>{`:root { ${themeCss} }`}</InlineStyle>
      {['dark', 'black'].includes(theme) && (
        <InlineStyle>{':root { color-scheme: dark; }'}</InlineStyle>
      )}
    </>
  );
};

export { PlFeHead as default };
