import { Select } from "antd";
import { electronicsSubCats } from "apiCalls/apiEndpoints";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { useQuery } from "react-query";
import { SyncLoader } from "react-spinners";
import { isEmpty } from "utilFuncs/utilFunctions";

const { Option } = Select;

function ElectronicsFilterMobile() {
  const router = useRouter();
  const [queryObj, setqueryObj] = useState<any>({});

  useEffect(() => {
    if (!isEmpty(queryObj)) {
      router.push({
        pathname: "electronics",
        query: queryObj,
      });
    }
  }, [queryObj]);

  //get the categories
  const { data, isSuccess, isLoading } = useQuery(
    ["electronics-filter-fields"],
    electronicsSubCats,
    {
      refetchOnWindowFocus: false,
    }
  );

  //set the electronics category
  const [electronics, setElectronicsCate] = useState<any>([]);

  useEffect(() => {
    if (isSuccess) {
      setElectronicsCate(data?.data.data.subclassifieds);
    }
  }, [data?.data.data.subclassifieds, isSuccess]);

  useEffect(() => {
    console.log("electronics", electronics[0]?.name);
  }, [electronics]);

  //when a category is selected
  const onChange = (value: string) => {
    setqueryObj((prev: any) => {
      return { ...prev, type: value };
    });
  };

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

  return (
    <>
      {isLoading ? (
        <div className="overflow-hidden center">
          <SyncLoader color="green" size={5} />
        </div>
      ) : (
        <Select
          showSearch
          placeholder={isLoading ? "loading, please wait" : "Select a category"}
          optionFilterProp="children"
          className="w-full"
          onChange={onChange}
          onSearch={onSearch}
          disabled={isLoading}
          filterOption={(input, option) =>
            (option!.children as unknown as string)
              .toLowerCase()
              .includes(input.toLowerCase())
          }
        >
          {electronics.map((sbc: any) => (
            <Option key={sbc.id} value={sbc.slug}>
              {sbc.name}
            </Option>
          ))}
        </Select>
      )}
    </>
  );
}

export default ElectronicsFilterMobile;