import { FC } from 'react';
import { useFormContext } from 'react-hook-form';

import HuFormAutocomplete from '@material-hu/components/design-system/Inputs/Autocomplete/form';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { OXXO_SEGMENTATION_OPTIONS } from '../../constants';

type Props = {
  name: string;
};

const CollaboratorTypeSelect: FC<Props> = ({ name }) => {
  const { t } = useLokaliseTranslation('service_management');
  const { watch } = useFormContext();
  const selectedValues = watch(name);

  const options = OXXO_SEGMENTATION_OPTIONS.items.map(item => ({
    value: item.id,
    label: item.title,
  }));

  const hasSelectedValues = selectedValues?.length > 0;

  return (
    <HuFormAutocomplete
      name={name}
      options={options}
      autocompleteProps={{
        multiple: true,
        noOptionsMessage: { title: t('empty_results') },
        placeholder: hasSelectedValues ? undefined : t('select_options'),
      }}
    />
  );
};

export default CollaboratorTypeSelect;
