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

import { coursesRoutes } from 'src/pages/dashboard/Learning/Courses/routes';
import { formatTitle } from 'src/utils/helmetUtils';
import { LogEvents, logEvent } from 'src/utils/logging';

import { LearningContainer } from '../../common/components/LearningContainer';
import { COURSES_PAGE_ID } from '../constants';
import useCoursesTitle from '../hooks/useCoursesTitle';

import { CourseHeader } from './components/CourseHeader';
import { CourseMetrics } from './components/CourseMetrics';
import CoursesTable from './components/CoursesTable';

export const CoursesList = () => {
  const navigate = useNavigate();
  const title = useCoursesTitle();

  const handleCreate = () => navigate(coursesRoutes.newCourse());

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

  return (
    <>
      <Helmet>
        <title>{formatTitle(title)}</title>
      </Helmet>
      <LearningContainer id={COURSES_PAGE_ID}>
        <CourseHeader onCreate={handleCreate} />
        <CourseMetrics />
        <CoursesTable onCreate={handleCreate} />
      </LearningContainer>
    </>
  );
};

export default CoursesList;