import { useState } from 'react';
import { useApolloClient } from '@apollo/client';
import { useDebounce } from 'react-use';
import { QUERY_PROFESSIONS } from './queries';
import { Profession, Query, QueryProfessionsArgs } from 'libs/graphql/types';

const useSuggestions = () => {
  const [suggestions, setSuggestions] = useState<Profession[]>([]);
  const [isLoadingSuggestions, setIsLoadingSuggestions] = useState<boolean>(
    false
  );
  const [search, setSearch] = useState<string>('');
  const client = useApolloClient();

  const loadSuggestions = async (search: string) => {
    setIsLoadingSuggestions(true);
    try {
      const { data } = await client.query<
        Pick<Query, 'professions'>,
        QueryProfessionsArgs
      >({
        query: QUERY_PROFESSIONS,
        fetchPolicy: 'no-cache',
        variables: {
          filter: {
            nameIEQ: '%' + search + '%',
          },
          limit: 10,
        },
      });
      if (data.professions?.items) {
        setSuggestions(data.professions.items);
      }
    } catch (e) {}
    setIsLoadingSuggestions(false);
  };

  useDebounce(
    () => {
      loadSuggestions(search);
    },
    500,
    [search]
  );

  return {
    isLoadingSuggestions,
    suggestions,
    setSearch,
    search,
  };
};

export default useSuggestions;