import Alert from '@material-hu/mui/Alert';
import Grid from '@material-hu/mui/Grid';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { newCourseFields } from 'src/pages/dashboard/Learning/Courses/New/forms';
import { type Selected } from 'src/pages/dashboard/Learning/Courses/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import FormSelect from 'src/components/FormInputs/FormSelect';

export type ConfigurationProps = {
  disabled?: boolean;
  selected: Selected;
  info?: string;
};

const Configuration = ({
  disabled = false,
  selected,
  info,
}: ConfigurationProps) => {
  const { t } = useLokaliseTranslation('learning');

  const taskName = newCourseFields.content.modules.tasks;

  const passingGradeOptions = [
    {
      value: -1,
      label: t('general:no_grade'),
    },
    ...[40, 50, 60, 70, 80, 90, 100].map(grade => ({
      value: grade,
      label: t('general:percent', { value: grade }),
    })),
  ];

  const maximumAttemptsOptions = [
    {
      value: -1,
      label: t('general:no_limit'),
    },
    ...[1, 2, 3, 4, 5].map(maximum => ({
      value: maximum,
      label: `${maximum}`,
    })),
  ];

  const durationOptions = [
    {
      value: -1,
      label: t('general:no_limit'),
    },
    ...[1, 2, 5, 10, 15, 30, 45, 60, 90].map(duration => ({
      value: duration,
      label: `${duration} ${t('general:minute', { count: duration })}`,
    })),
  ];

  const showCorrectAnswersOptions = [
    {
      value: true,
      label: t('general:yes'),
    },
    {
      value: false,
      label: t('general:no'),
    },
  ];

  return (
    <Stack sx={{ gap: 3 }}>
      <Typography variant="h6">{t('common.configuration')}</Typography>
      {info && <Alert severity="info">{info}</Alert>}
      <Grid
        container
        spacing={2}
      >
        <Grid
          item
          md={6}
          xs={12}
        >
          <FormSelect
            label={t('common.passing_grade')}
            options={passingGradeOptions}
            name={taskName.passingGrade(selected.module, selected.task)}
            disabled={disabled}
            formControlProps={{ disabled, sx: { width: '100%' } }}
          />
        </Grid>
        <Grid
          item
          md={6}
          xs={12}
        >
          <FormSelect
            label={t('general:max_attempts')}
            options={maximumAttemptsOptions}
            name={taskName.maximumAttempts(selected.module, selected.task)}
            disabled={disabled}
            formControlProps={{ disabled, sx: { width: '100%' } }}
          />
        </Grid>
        <Grid
          item
          md={6}
          xs={12}
        >
          <FormSelect
            label={t('general:time_limit')}
            options={durationOptions}
            name={taskName.duration(selected.module, selected.task)}
            disabled={disabled}
            formControlProps={{ disabled, sx: { width: '100%' } }}
          />
        </Grid>
        <Grid
          item
          md={6}
          xs={12}
        >
          <FormSelect
            label={t('general:show_correct_answers')}
            options={showCorrectAnswersOptions}
            name={taskName.showCorrectAnswers(selected.module, selected.task)}
            disabled={disabled}
            formControlProps={{ disabled, sx: { width: '100%' } }}
          />
        </Grid>
      </Grid>
    </Stack>
  );
};

export default Configuration;