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

import HuFormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import HuTitle from '@material-hu/components/design-system/Title';

import { DESCRIPTION_MAX_LENGTH } from 'src/pages/dashboard/learning/courses/constants';
import {
  QuestionType,
  type SurveyQuestion,
} from 'src/pages/dashboard/learning/courses/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import FormNumberRating from './FormNumberRating';
import FormThumbsRating from './FormThumbsRating';

type SatisfactionSurveyFormProps = {
  questions: SurveyQuestion[] | undefined;
};

const SatisfactionSurveyForm = ({ questions }: SatisfactionSurveyFormProps) => {
  const { t } = useLokaliseTranslation('learning');

  return (
    <Stack
      component="form"
      sx={{ gap: 3 }}
    >
      {(questions ?? []).map(question => (
        <Stack key={question.id}>
          {question.type === QuestionType.RATING && (
            <FormNumberRating question={question} />
          )}
          {question.type === QuestionType.MULTIPLE_CHOICE && (
            <FormThumbsRating question={question} />
          )}
          {question.type === QuestionType.TEXT && (
            <Stack sx={{ gap: 1.5 }}>
              <HuTitle
                variant="S"
                title={question.title}
              />
              <HuFormInputClassic
                name={question.id}
                inputProps={{
                  maxLength: DESCRIPTION_MAX_LENGTH,
                  placeholder: t('common.your_answer'),
                  multiline: true,
                  minRows: 3,
                }}
                rules={{ required: question.required }}
              />
            </Stack>
          )}
        </Stack>
      ))}
    </Stack>
  );
};

export default SatisfactionSurveyForm;
