import { useEffect } from 'react';
import { Helmet } from 'react-helmet-async';

import Title from '@material-hu/components/design-system/Title';

import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { LogEvents, logEvent } from 'src/utils/logging';

import { LearningContainer } from '../../common/components/LearningContainer';
import useSettingsTitle from '../hooks/useSettingsTitle';

import SettingOptionList from './components/SettingOptionList';

const Settings = () => {
  const title = useSettingsTitle();
  const { t } = useLokaliseTranslation('apps');

  useEffect(() => {
    logEvent(LogEvents.LEARNING_SETTINGS_ENTERED);
  }, []);

  return (
    <>
      <Helmet>
        <title>{formatTitle(title)}</title>
      </Helmet>
      <LearningContainer>
        <Title
          variant="L"
          title={title}
          description={t('description_view_learning_settings')}
        />
        <SettingOptionList />
      </LearningContainer>
    </>
  );
};

export default Settings;