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

import useRules from 'src/hooks/useRules';
import { LearningCard } from 'src/pages/dashboard/Learning/common/components/LearningCard';
import {
  newSessionFields,
  newSessionRules,
} from 'src/pages/dashboard/Learning/Sessions/New/form';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useSessionStatus } from '../../../hooks/useSessionStatus';

const SessionDescription = () => {
  const { t } = useLokaliseTranslation('learning');
  const { blockSessionEdition } = useSessionStatus();
  const descriptionRules = useRules(
    newSessionRules.basic_information.description(),
  );
  return (
    <LearningCard id="session-basic-information-description-card">
      <HuFormInputClassic
        name={newSessionFields.basic_information.description()}
        rules={descriptionRules}
        inputProps={{
          id: 'session-basic-information-description-input',
          label: t('general:inputs.optional', {
            label: t('general:inputs.description.label'),
          }),
          disabled: blockSessionEdition,
          placeholder: t('general:inputs.description.label'),
          maxLength: newSessionRules.basic_information.description().maxString!,
          multiline: true,
          minRows: 3,
          maxRows: 10,
          showClear: false,
          sx: {
            '& .MuiInputAdornment-root': { ml: 0 },
            '& textarea': { pr: 1.5 },
          },
        }}
      />
    </LearningCard>
  );
};

export default SessionDescription;
