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

import HuFormRadioInput from '@material-hu/components/composed-components/RadioInput/form';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { CourseSort, CourseTypes } from '../../types';

const CourseFilterForm = () => {
  const { t } = useLokaliseTranslation('learning');

  const typeOptions = [
    { value: CourseTypes.REQUIRED, label: t('course.required') },
    { value: CourseTypes.OPTIONAL, label: t('course.optional') },
  ];

  const sortOptions = [
    {
      value: CourseSort.CREATED_AT_ASC,
      label: t('course.sort.created_at_asc'),
    },
    { value: CourseSort.DUE_DATE_ASC, label: t('course.sort.due_date_asc') },
    { value: CourseSort.PROGRESS_DESC, label: t('course.sort.progress_desc') },
  ];

  return (
    <Stack sx={{ gap: 4 }}>
      <HuFormRadioInput
        name="type"
        inputProps={{
          label: t('common.type'),
          options: typeOptions,
        }}
      />
      <HuFormRadioInput
        name="sort"
        inputProps={{
          label: t('course.sort.title'),
          options: sortOptions,
        }}
      />
    </Stack>
  );
};

export default CourseFilterForm;
