import { useDistricts } from "context/DistrictContext";
import { url } from "inspector";
import { useRouter } from "next/router";
import React, { useState } from "react";
import bg from "assets/images/main.jpg";
import pp from "public/main-side-right.png";
import nbg from "assets/images/main-bg-image.png";
import Link from "next/link";
import { useMutation, useQuery } from "react-query";
import { searchQuery } from "apiCalls/apiEndpoints";
import { SyncLoader } from "react-spinners";
import homeHeader from "assets/images/main-side-right.png";
import bannerSideRight from "assets/images/main-side-right.png";
import mainBgImage from "assets/images/main.jpg";
import Image from "next/image";
import Pointer from "../icons/Pointer";
import Search from "../icons/Search";
import { Spin } from "antd";

function SearchCompOld() {
  const styling = {
    backgroundImage: `url(${mainBgImage.src})`,
    };

    const router = useRouter();

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

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

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

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

  return (
    <div className="bg-white" style={styling}>
      <section className="my-own-banner relative">
       
        {/* <div className="w-[313px] h-[270px] hidden lg:block -mt-6 mr-2 absolute top-0 right-0">
          <Image src={pp.src} layout="fill" alt="for everyone" />
        </div> */}
        <div className="banner-content container">
          <form
            action="#"
            style={{ width: "100%", maxWidth: "500px" }}
            className="mb-16"
          >
            <div className="header-caption" style={{ fontSize: "27px" }}>
              <h1>Top Listings In Ashanti</h1>
            </div>
            <div className="header-form d-flex flex-wrap">
              {/* <SearchInput /> */}
              <div className="single-form" style={{ width: "100%" }}>
                <input
                  type="search"
                  onMouseDown={handleMouseDown}
                  onChange={handleChange}
                  onKeyDown={handleKeyDown}
                  placeholder="Enter Keyword Here -"
                />
                <button type="button" className="flex justify-center items-center " disabled={isLoading} onClick={handleSearchClicked}>
                  {isLoading ? (
                   <Spin />
                  ) : (
                    <Search/>
                  )}
                </button>
              </div>

              <div
                className={`suggestions relative w-full sm:w-[500px] md:w-[600px] lg:w-[750px] ${
                  showSuggestion && query.length > 0 ? "block" : "hidden"
                }`}
              >
                <ul className="w-full z-10 absolute rounded-md h-96 overflow-auto">
                  {isLoading && (
                    <div className="text-center">
                      <SyncLoader color="green" size={5} />
                    </div>
                  )}
                  <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>
            </div>
            <div className="header-location d-flex mt-10 mb-8">
              <p
                className="text-white text-sm flex"
                style={{
                  // background: '#fff',
                  fontSize: "14px",
                  // margin: '20px 0 0 0',
                  // padding: '6px',
                  // borderRadius: '3px'
                }}
              >
                Find News and Ads in{" "}
                <button className="bg-green-800 px-2 ml-2 flex items-center">
                  <Pointer /> {"Ashanti"}
                </button>
              </p>
              {/* <SelectDistrict>
                <Tag
                  color="#3db83a"
                  style={{ cursor: "pointer", fontSize: "15px" }}
                >
                  <i className="fas fa-map-marker pr-2"></i>
                  {currentDistrict?.name ?? "All of Ashanti"}
                </Tag>
              </SelectDistrict> */}
            </div>
          </form>
        </div>
      </section>
    </div>
  );
}

export default SearchCompOld;