import { type SyntheticEvent, useState } from 'react';
import { useQuery } from 'react-query';

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

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

import { usersKeys } from 'src/pages/dashboard/Users/queries';
import { getUserDepartments } from 'src/services/usersService';
import { type Department } from 'src/types/departments';
import { useLokaliseTranslation } from 'src/utils/i18n';

type DepartmentOption = Department & { label: string; value: number };

type Props = {
  name: string;
  autocompleteProps?: Partial<AutocompleteProps>;
};

function HugoDepartmentsAutocomplete({ name, autocompleteProps }: 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 } = useQuery(
    usersKeys.userDepartmentsList(debouncedParams),
    () => getUserDepartments(debouncedParams),
    {
      select: response =>
        response.data.items.map(d => ({
          ...d,
          label: d.name,
          value: d.id,
        })),
    },
  );

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

export default HugoDepartmentsAutocomplete;