import { searchQuery } from "apiCalls/apiEndpoints";
import React, { useState } from "react";
import { useMutation } from "react-query";

function useSearchEveryWhere() {
  const [showSuggestion, setshowSuggestion] = useState<boolean>(false);
  const [query, setQuery] = useState<string>("");
  const [queryRes, setQueryRes] = useState<any>([]);

  //when the enter key is pressed
  const handleKeyDown = (e: any) => {
    const key = e.keyCode || e.which;
    if (key === 13 && e.target.value.length > 1) {
      setQuery(e.target.value);
      router.push(`/search?query=${e.target.value}`);
    } else {
      setQuery(e.target.value);
    }
  };

  //handle search input change
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // console.log(e.target.value)
    if (e.target.value.length > 0) {
      setQuery(e.target.value);
      mutate(e.target.value);
      console.log(e.target.value);
    } else {
      setshowSuggestion(false);
      setQueryRes([]);
    }

    if (e.target.value === "") {
      setshowSuggestion(false);
      setQueryRes([]);
    }
  };

  //search user
  const { mutate, isLoading } = useMutation(searchQuery, {
    onSuccess: (data) => {
      //console.log(data);
      setQueryRes(data.data);
      if (data.data?.length > 0) {
        if (data.data.length > 0) {
          setshowSuggestion(true);
        } else {
          setshowSuggestion(false);
        }
      }
    },
    onError: (err) => {
      console.log("query err", err);
    },
  });

  return {
      query,
      queryRes,
      showSuggestion,
      setshowSuggestion,
      setQuery,
      setQueryRes,
      mutate,
      isLoading,
      handleChange,
      handleKeyDown
    };
}

export default useSearchEveryWhere;