import React, { useEffect, useRef, useState } from "react";
import { Button, Breadcrumb, Modal, Select, Input, AutoComplete, } from "antd";
import type { SelectProps } from "antd/es/select";
import { SyncLoader } from "react-spinners";
import { useMutation } from "react-query";
import { searchQuery, searchUserQuery } from "apiCalls/apiEndpoints";
import Link from "next/link";
import { searchForCategoryType } from "types/PropInterfaces";
import SuggestionsComp from "./SuggestionsComp";

const { Option } = Select;
const { Search } = Input;

function OnpageSearch({ category, unReplacedString }: searchForCategoryType) {
  const [modal1Visible, setModal1Visible] = useState(false);
  const [queryRes, setQueryRes] = useState<any>([]);
  const [query, setQuery] = useState<string>("");

  const input = useRef(null);

  useEffect(() => {
    // input?.current?.click();
  }, []);

  //search user
  /* const { mutate, isLoading } = useMutation(searchQuery, {
    onSuccess: (data) => {
      if (data.data?.length > 0) {
        if (
          data.data[0]?.title === "Ads" &&
          data.data[0]?.options?.length > 0
        ) {
          // setshowSuggestion(true)
          setQueryRes(data.data);
          console.log(data.data[0]?.options);
        } else {
          // setshowSuggestion(false)
        }
      }
    },
    onError: (err) => {
      console.log("query err", err);
    },
  });*/
  const [showSuggestion, setshowSuggestion] = useState(false)

  //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);
          setQueryRes(data.data);
        } else {
          //   setshowSuggestion(false);
        }
      }
    },
    onError: (err) => {
      console.log("query err", err);
    },
  });

  //when a search query is made
  const onSearch = (value: string) => {
    console.log("search:", value);
  };

  //show modal when the search is clicked
  const handleSearchFocus = () => {
    setModal1Visible(true);
  };

  const handleSearchChange = (e: any) => {
    // console.log(e.target.value);
    setQuery(e.target.value);
    if (e.target.value.length > 0) {
      mutate([e.target.value, unReplacedString]);
    } else {
    }
  };

  const handleDecoyChange = (e) => {
    // setModal1Visible(true);
    console.log(e.target.value)
    setQuery(e.target.value)
    mutate(e.target.value)
  };

  const [options, setOptions] = useState<SelectProps<object>["options"]>([]);

  const handleSearch = (value: string) => {
    // setOptions(value ? searchResult(value) : []);
    setOptions([]);
  };

  const onSelect = (value: string) => {
    console.log("onSelect", value);
  };

  const onChangeSelect = (value: string) => {
    console.log(`selected ${value}`);
  };
  
  const onSearchSelect = (value: string) => {
    console.log('search:', value);
    mutate([value, unReplacedString])
  };

  return (
    <div className="my-2 md:hidden">
      {/* <Select
        showSearch
        placeholder="Select a person"
        optionFilterProp="children"
        onChange={onChangeSelect}
        onSearch={onSearchSelect}
        filterOption={(input, option) =>
          (option?.label ?? "").toLowerCase().includes(input.toLowerCase())
        }
        options={queryRes.map((res : any) => {
            return {
                label: res.name,
                value: res.name
            }
        })}
      /> */}
      <Search
        ref={input}
        // onClick={handleSearchFocus}
        onChange={handleDecoyChange}
        placeholder={`Search in ${category}`}
        onSearch={onSearch}
        enterButton
        allowClear
      />
      <SuggestionsComp
        showSuggestion={showSuggestion}
        setshowSuggestion={setshowSuggestion}
        query={query}
        queryRes={queryRes}
        isLoading={isLoading}
      />
      <Modal
        title="Search"
        style={{ top: 5 }}
        visible={modal1Visible}
        onOk={() => setModal1Visible(false)}
        onCancel={() => setModal1Visible(false)}
      >
        <Search
          autoFocus={true}
          onChange={handleSearchChange}
          placeholder={`Search in ${category}`}
          onSearch={onSearch}
          enterButton
          allowClear
        />
        {queryRes.length > 0
          ? queryRes.map((opt: any, i: number) => (
              <div key={i} className={query.length > 0 ? "block" : "hidden"}>
                <Link href={`/search?query=${opt?.name}`}>
                  <li className="z-10 bg-white font-normal text-gray-500 py-3 pl-2 cursor-pointer hover:bg-gray-500">
                    {opt?.name}{" "}
                  </li>
                </Link>
              </div>
            ))
          : "Nothing found"}

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

export default OnpageSearch;