import { FC } from 'react';

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

import useRules from 'src/hooks/useRules';
import { PolicyTypes } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type DescriptionInputProps = {
  name: string;
  policyType?: PolicyTypes;
  disabled?: boolean;
};

const LIMIT_LETTERS = 250;

const DescriptionInput: FC<DescriptionInputProps> = props => {
  const { name, policyType, disabled } = props;
  const { t } = useLokaliseTranslation('time_off');
  const requiredDescription = policyType?.descriptionRequired;

  const rules = useRules({
    required: requiredDescription,
  });

  return (
    <HuCardContainer
      fullWidth
      color="grey"
    >
      <HuFormInputClassic
        name={name}
        inputProps={{
          multiline: true,
          label: t('OBSERVATIONS'),
          placeholder: t('ENTER_DESCRIPTION'),
          maxLength: LIMIT_LETTERS,
          disabled,
        }}
        rules={rules}
      />
    </HuCardContainer>
  );
};

export default DescriptionInput;