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

import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';

import { RevisionAccordion } from 'src/pages/dashboard/Learning/common/components/RevisionAccordion';
import { PathSteps } from 'src/pages/dashboard/Learning/Paths/constants';
import CoursesListItem from 'src/pages/dashboard/Learning/Paths/New/components/PathContent/CoursesListItem';
import { type NewPathFormValues } from 'src/pages/dashboard/Learning/Paths/types';

const RevisionContent = () => {
  const { getValues } = useFormContext<NewPathFormValues>();
  const courses = getValues('content.courses');

  return (
    <RevisionAccordion step={PathSteps.CONTENT}>
      <>
        <Stack
          sx={{
            gap: 2,
            maxHeight: '430px',
            overflowY: 'auto',
            overscrollBehavior: 'contain',
            pr: 2,
            mr: -2,
          }}
        >
          {courses.map(course => (
            <CoursesListItem
              key={course.id}
              isRevision
              course={course}
            />
          ))}
        </Stack>
        <Divider sx={{ my: 2 }} />
      </>
    </RevisionAccordion>
  );
};

export default RevisionContent;