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

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


  //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);
    },
  });

   //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([]);
    }
  };

  //this is getting complicated
  const handleMouseDown = () => {
    // if (window.innerWidth <= 723) {
    //     router.push('/search')
    // }
  };


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

export default useSearch;