import { type SyntheticEvent, useState } from 'react';

import { useDebounce } from '@material-hu/hooks/useDebounce';

import HuFormAutocomplete from '@material-hu/components/design-system/Inputs/Autocomplete/form';
import { type AutocompleteOption } from '@material-hu/components/design-system/Inputs/Autocomplete/types';

import useUserPositions from 'src/pages/dashboard/Users/hooks/useUserPositions';
import { type Position } from 'src/types/positions';
import { useLokaliseTranslation } from 'src/utils/i18n';

type PositionAutocompleteOption = Position & { label: string; value: number };

type Props = {
  name: string;
  autocompleteProps?: Record<string, unknown>;
  rules?: Record<string, unknown>;
};

function HugoPositionsAutocomplete({ name, autocompleteProps, rules }: Props) {
  const { t } = useLokaliseTranslation('general');
  const [search, setSearch] = useState('');

  const params = {
    q: search || undefined,
    page: 0,
    limit: 100,
  };

  const debouncedParams = useDebounce(params, 300);

  const { data, isLoading } = useUserPositions(debouncedParams, {
    select: response => {
      const payload = response.data;
      return {
        ...payload,
        items: payload.items.map(p => ({
          ...p,
          label: p.name,
          value: p.id,
        })),
      };
    },
  });

  return (
    <HuFormAutocomplete
      name={name}
      rules={rules}
      options={(data?.items as PositionAutocompleteOption[]) ?? []}
      autocompleteProps={
        {
          isOptionEqualToValue: (
            option: PositionAutocompleteOption,
            value: PositionAutocompleteOption,
          ) => option.id === value.id,
          /** Default values from the user only have `name`; options from the query add `label`. */
          getOptionLabel: (option: Position | AutocompleteOption | null) => {
            return (
              (option as AutocompleteOption)?.label ??
              (option as Position)?.name ??
              ''
            );
          },
          onInputChange: (_: SyntheticEvent, value: string) => setSearch(value),
          loading: isLoading,
          isServerFiltered: true,
          placeholder: t('write_here'),
          ...autocompleteProps,
          multiple: false,
        } as Record<string, unknown>
      }
    />
  );
}

export default HugoPositionsAutocomplete;