import { useFormContext, useWatch } from 'react-hook-form';

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

import { type NewPathFormValues } from 'src/pages/dashboard/Learning/Paths/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CoursesListEmpty from './CoursesListEmpty';
import { CoursesListFooter } from './CoursesListFooter';
import CoursesListItems from './CoursesListItems';
import CoursesMinimumAlert from './CoursesMinimumAlert';

const CoursesList = () => {
  const { t } = useLokaliseTranslation('learning');
  const { control } = useFormContext<NewPathFormValues>();

  const selectedCourses = useWatch({
    name: 'content.courses',
    control,
  });

  const isEmpty = !selectedCourses.length;

  return (
    <>
      <CoursesMinimumAlert coursesCount={selectedCourses.length} />
      <HuCardContainer
        fullWidth
        sx={{
          '& .MuiCardContent-root': {
            display: 'flex',
            flexDirection: 'column',
            width: '100%',
            gap: 2,
          },
        }}
      >
        <HuTitle
          variant="S"
          title={t('path.courses.in_path')}
          description={t('path.courses.order.description')}
        />
        {isEmpty && <CoursesListEmpty />}
        {!isEmpty && <CoursesListItems courses={selectedCourses} />}
        {!isEmpty && <CoursesListFooter courses={selectedCourses} />}
      </HuCardContainer>
    </>
  );
};

export default CoursesList;
