import {
  QueryKey,
  keepPreviousData,
  useInfiniteQuery,
  useQuery,
} from "@tanstack/react-query";

import { useDebouncedSearch } from "./use-debounced-search";

type ComboboxExternalData = {
  offset: number;
  limit: number;
  count: number;
};

type ComboboxQueryParams = {
  id?: string;
  q?: string;
  offset?: number;
  limit?: number;
  value?: string | string[];
};

export const useComboboxData = <
  TResponse extends ComboboxExternalData,
  TParams extends ComboboxQueryParams,
>({
  queryKey,
  queryFn,
  getOptions,
  defaultValue,
  defaultValueKey,
  selectedValue,
  pageSize = 10,
  enabled = true,
}: {
  queryKey: QueryKey;
  queryFn: (params: TParams) => Promise<TResponse>;
  getOptions: (data: TResponse) => { label: string; value: string }[];
  defaultValueKey?: keyof TParams;
  defaultValue?: string | string[];
  selectedValue?: string;
  pageSize?: number;
  enabled?: boolean;
}) => {
  const { searchValue, onSearchValueChange, query } = useDebouncedSearch();

  const queryInitialDataBy = defaultValueKey || "id";
  const { data: initialData } = useQuery({
    queryKey: [...queryKey, defaultValue].filter(Boolean) as QueryKey,
    queryFn: async () => {
      return queryFn({
        [queryInitialDataBy]: defaultValue,
        limit: Array.isArray(defaultValue) ? defaultValue.length : 1,
      } as TParams);
    },
    enabled: !!defaultValue && enabled,
  });

  // always load selected value in case current data dosn't contain the value
  const { data: selectedData } = useQuery({
    queryKey: [...queryKey, selectedValue].filter(Boolean) as QueryKey,
    queryFn: async () => {
      return queryFn({
        id: selectedValue,
        limit: 1,
      } as TParams);
    },
    enabled: !!selectedValue && enabled,
  });

  const { data, ...rest } = useInfiniteQuery({
    // prevent infinite query response shape beeing stored under regualr list reponse QKs
    queryKey: [...queryKey, "_cbx_", query].filter(Boolean) as QueryKey,
    queryFn: async ({ pageParam = 0 }) => {
      return await queryFn({
        q: query,
        limit: pageSize,
        offset: pageParam,
      } as TParams);
    },
    initialPageParam: 0,
    getNextPageParam: (lastPage) => {
      const moreItemsExist = lastPage.count > lastPage.offset + lastPage.limit;
      return moreItemsExist ? lastPage.offset + lastPage.limit : undefined;
    },
    placeholderData: keepPreviousData,
    enabled: enabled,
  });

  const options = data?.pages.flatMap((page) => getOptions(page)) ?? [];
  const defaultOptions = initialData ? getOptions(initialData) : [];
  const selectedOptions = selectedData ? getOptions(selectedData) : [];

  /**
   * If there are no options and the query is empty, then the combobox should be disabled,
   * as there is no data to search for.
   */
  const disabled =
    (!rest.isPending && !options.length && !searchValue) || !enabled;

  // make sure that the default value is included in the options
  if (defaultValue && defaultOptions.length && !searchValue) {
    defaultOptions.forEach((option) => {
      if (!options.find((o) => o.value === option.value)) {
        options.unshift(option);
      }
    });
  }

  if (selectedValue && selectedOptions.length) {
    selectedOptions.forEach((option) => {
      if (!options.find((o) => o.value === option.value)) {
        options.unshift(option);
      }
    });
  }

  return {
    options,
    searchValue,
    onSearchValueChange,
    disabled,
    ...rest,
  };
};