import { useMemo } from 'react';

import FormAutocomplete, {
  type FormAutocompleteProps,
} from '@material-hu/components/design-system/Inputs/Autocomplete/form';

import { useGetKudosCategories } from 'src/pages/dashboard/acknowledgements/hooks/useGetKudosCategories';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { acknowledgementFormNames } from '../form';

export const SelectCategoryInput = () => {
  const { t } = useLokaliseTranslation('acknowledgements');
  const { data: categories, isLoading } = useGetKudosCategories();

  const options: FormAutocompleteProps['options'] = useMemo(() => {
    if (!categories) return [];
    return categories.map(cat => ({ value: cat.id, label: cat.name }));
  }, [categories]);

  return (
    <FormAutocomplete
      name={acknowledgementFormNames.categoryId}
      options={options}
      autocompleteProps={{
        label: t('category_label'),
        placeholder: t('category_placeholder'),
        loading: isLoading,
        multiple: false,
        isServerFiltered: false,
      }}
    />
  );
};
