import { SearchOutlined } from "@ant-design/icons";
import { Button, Modal, Input } from "antd";
import { searchQuery } from "apiCalls/apiEndpoints";
import React, { useState } from "react";
import { useMutation } from "react-query";
import { SyncLoader } from "react-spinners";
import Link from "next/link";
import { useSearch } from "context/SearchContext";
import useSearchEveryWhere from "./useSearchEveryWhere";

const SearchEveryWhere: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const {
    query,
    queryRes,
    showSuggestion,
    setQuery,
    setQueryRes,
    mutate,
    isLoading,
    setshowSuggestion,
    handleChange,
    handleKeyDown
  } = useSearchEveryWhere();
  

  

  const handleSearchClicked = () => {
    if (query.length > 1) {
      router.push(`/search?query=${query}`);
    } else {
      alert("No search query entered");
    }
  };

  return (
    <>
      {/* <Button type="primary" onClick={showModal}>
        Open Modal
      </Button> */}

      <Button
        shape="circle"
        type="dashed"
        color="#fff"
        icon={<SearchOutlined color="#fff" style={{
          color: "#fff"
        }}/>}
        onClick={showModal}
        style={{ background: "transparent" }}
      ></Button>
      <Modal
        title="Search Anything"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Input
          onChange={handleChange}
          onKeyDown={handleKeyDown}
          placeholder="Search Anything eg. Laptop"
        />

        {isLoading && (
          <div className="text-center">
            <SyncLoader color="green" size={5} />
          </div>
        )}

        <div
          className={`suggestions relative w-full ${
            showSuggestion && query.length > 0 ? "block" : "hidden"
          }`}
        >
          <ul className="w-full z-10 absolute rounded-md h-96 overflow-auto">
            <Link href={`/search?query=${query}`}>
              <li className="z-10 bg-white font-normal shadow-xl text-gray-700 py-3 drop-shadow-md pl-2 cursor-pointer hover:bg-gray-200 ">
                {query}
              </li>
            </Link>
            {queryRes.length > 0
              ? queryRes?.map((opt: any, index: any) => (
                  <Link href={`/search?query=${opt.name}`} key={index}>
                    <li className="z-10 bg-white font-normal shadow-xl text-gray-700 py-3 drop-shadow-md pl-2 cursor-pointer hover:bg-gray-200">
                      {opt?.name}
                    </li>
                  </Link>
                ))
              : ""}
          </ul>
        </div>
      </Modal>
    </>
  );
};

export default SearchEveryWhere;