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

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

import { LearningContainer } from '../../common/components/LearningContainer';
import { SESSIONS_PAGE_ID } from '../constants';
import useSessionsTitle from '../hooks/useSessionsTitle';
import useSessionTutorialModal from '../hooks/useSessionTutorialModal';

import SessionsHeader from './components/SessionsHeader';
import SessionsStats from './components/SessionsStats';
import { SessionsTable } from './components/SessionsTable';

const Sessions = () => {
  const title = useSessionsTitle();
  const { sessionTutorialDialog } = useSessionTutorialModal();

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

  return (
    <>
      <Helmet>
        <title>{formatTitle(title)}</title>
      </Helmet>
      <LearningContainer id={SESSIONS_PAGE_ID}>
        <SessionsHeader />
        <SessionsStats />
        <SessionsTable />
        {sessionTutorialDialog}
      </LearningContainer>
    </>
  );
};

export default Sessions;
