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

import useRules from 'src/hooks/useRules';
import { MAX_TEXT_LENGTH } from 'src/pages/dashboard/learning/courses/constants';
import { useLokaliseTranslation } from 'src/utils/i18n';

const TextChoiceInput = ({ questionIndex }: { questionIndex: number }) => {
  const { t } = useLokaliseTranslation('learning');

  const rules = useRules({
    required: true,
    minLength: 1,
    maxLength: MAX_TEXT_LENGTH,
  });

  return (
    <HuFormInputClassic
      name={`formValues.${questionIndex}`}
      rules={rules}
      inputProps={{
        placeholder: t('common.your_answer'),
        multiline: true,
        minRows: 7,
        maxLength: MAX_TEXT_LENGTH,
        hasCounter: true,
        sx: {
          '& .MuiInputBase-root': {
            backgroundColor: ({ palette }) =>
              palette.new.background.elements.default,
          },
        },
      }}
    />
  );
};

export default TextChoiceInput;
