import FormAutocomplete from '@material-hu/components/design-system/Inputs/Autocomplete/form';

import useRules from 'src/hooks/useRules';
import { buildOptionsToDropDownCatalog } from 'src/utils/form';
import { useLokaliseTranslation } from 'src/utils/i18n';

type Props = {
  name: string;
  required?: boolean;
  choices: string[];
  formFilled?: boolean;
};

const DropdownInput = ({ name, required, choices, formFilled }: Props) => {
  const { t } = useLokaliseTranslation(['service_management', 'validations']);
  return (
    <FormAutocomplete
      name={name}
      rules={useRules({
        requiredWithMessage:
          required && !formFilled ? t('validations:required') : false,
      })}
      options={buildOptionsToDropDownCatalog(choices)}
      autocompleteProps={{
        disabled: formFilled,
        multiple: false,
        isServerFiltered: false,
        virtualized: true,
        placeholder: t('select'),
      }}
    />
  );
};

export default DropdownInput;