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

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 { PATHS_PAGE_ID } from '../constants';
import useNewFeatureModal from '../hooks/useNewFeatureModal';

import PathsHeader from './components/PathsHeader';
import PathsStats from './components/PathsStats';
import PathsTable from './components/PathsTable';

const Paths = () => {
  const { t } = useLokaliseTranslation('learning');
  const { newFeatureModal } = useNewFeatureModal();

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

  return (
    <>
      <Helmet>
        <title>{formatTitle(t('path.create'))}</title>
      </Helmet>
      <LearningContainer id={PATHS_PAGE_ID}>
        <PathsHeader />
        <PathsStats />
        <PathsTable />
        {newFeatureModal}
      </LearningContainer>
    </>
  );
};

export default Paths;
