"use client";
import { objectToQueryString } from "@/utils/lib/helpers";
import dynamic from "next/dynamic";
import { FC, useRef } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { HiSearch } from "react-icons/hi";
import { MdClose } from "react-icons/md";
import Button from "../Button";
import { Datepicker, InputField } from "../forms/Inputs";
import { DateRangePicker } from "../forms/input-fields/DateRangePicker";
import { Filter } from "../forms/schema/filter";
import { twMerge } from "tailwind-merge";
const DropdownList = dynamic(() => import("./Dropdown"));

type FilterProps = {
  schema: Filter[];
  setFilter?: (x: string | null) => void;
  grids?: number;
  label?: boolean;
  searchButton?: boolean;
  className?: string;
};

const FilterForm: FC<FilterProps> = ({
  schema,
  setFilter = () => { },
  grids = 6,
  label = false,
  searchButton = true,
  className = ""
}) => {
  const filterForms = useForm<any>();
  const { control, setValue, handleSubmit, getValues } = filterForms;
  const submitRef = useRef<HTMLInputElement>(null);

  const getQuerySting = (params: any) => {
    console.log(params)
    const query = objectToQueryString(params);
    setFilter(query);

    return query;
  };

  const clearInput = (inputName: string) => {
    setValue(inputName, "");
    submitRef.current?.click();
  };
  const filterInputs = (field: Filter) => {
    if (field?.type === "dropdown") {
      return (
        <>
          {label && (
            <label className="block mb-1 capitalize">{field?.name}</label>
          )}
          <div className="mt-2">
            {field?.initialData !== undefined ? (
              <DropdownList
                name={field.name}
                isMulti={false}
                idName={field?.idName as string}
                getLabel={(option: any) => option.name}
                filter={field?.filter}
                placeholder={field.placeholder}
                isEnabled={false}
                initialData={field.initialData}
                onChange={(option) => submitRef.current?.click()}
              />
            ) : (
              <DropdownList
                name={field.name}
                isMulti={false}
                idName={field?.idName as string}
                getLabel={(option: any) => option.name}
                filter={field?.filter}
                placeholder={field.placeholder}
                onChange={(option) => submitRef.current?.click()}
              />
            )}
          </div>
        </>
      );
    }
    if (field.type === "date") {
      const labelName = field.name;
      return (
        <>
          {label && <label className="capitalize">{labelName}</label>}
          <Datepicker
            name={field.name}
            isClearable={true}
            placeholder={field.placeholder}
            defaultDate={null}
          />
        </>
      );
    }
    if (field.type === "date_range") {
      const labelName = field.name;
      return (
        <>
          {label && <label className="capitalize">{labelName}</label>}
          <DateRangePicker
            name={field.name}
            isClearable={true}
            placeholder={field.placeholder}
            onChange={(date) => submitRef.current?.click()}
          />
        </>
      );
    }
    if (field?.type === "text") {
      return (
        <div className="relative">
          {label && <label className="capitalize">{field.name}</label>}
          <InputField name={field?.name} placeholder={field.placeholder} />
          <div
            className="absolute top-1 right-0 cursor:pointer p-2 cursor-pointer"
            onClick={() => clearInput(field?.name)}
          >
            <MdClose className="font-extrabold text-md text-gray-400" />
          </div>
        </div>
      );
    }
  };

  const gridStyle: { [key: number]: string } = {
    1: "md:grid-cols-1 lg:grid-cols-1 sm:grid-cols-1",
    2: "md:grid-cols-2 lg:grid-cols-2 sm:grid-cols-2",
    3: "md:grid-cols-3 lg:grid-cols-3 sm:grid-cols-3",
    4: "md:grid-cols-4 lg:grid-cols-4 sm:grid-cols-4",
    5: "md:grid-cols-5 lg:grid-cols-5 sm:grid-cols-4",
    6: "md:grid-cols-6 lg:grid-cols-6 sm:grid-cols-4",
    7: "md:grid-cols-7 lg:grid-cols-7 sm:grid-cols-4",
    8: "md:grid-cols-8 lg:grid-cols-8 sm:grid-cols-4",
  };
  return (
    <div className={twMerge("bg-white py-2 pb-3 dark:bg-gray-800", className)}>
      <FormProvider {...filterForms}>
        <div className="md:flex sm:flex h-auto md:h-12">
          <form onSubmit={handleSubmit(getQuerySting)} className="w-full">
            <div
              className={`grid gap-2 m-auto ${gridStyle[grids]} dark:bg-gray-800 w-full`}
            >
              {schema?.map((fieldName: Filter, index) => (
                <div className="w-full" key={`${index}`}>{filterInputs(fieldName)}</div>
              ))}
            </div>
            <input className="opacity-0" type="submit" ref={submitRef} />
          </form>
          {searchButton && (
            <div className="md:mt-2 md:ml-2 h-12">
              <Button
                size="sm"
                buttonType={"submit"}
                className="bg-gray-100 hover:!bg-gray-300 focus:none w-full rounded-md focus:ring-0 darK:!bg-gray-700"
                onClick={() => submitRef.current?.click()}
              >
                <HiSearch className="text-gray-900 text-2xl" />
              </Button>
            </div>
          )}
        </div>
      </FormProvider>
    </div>
  );
};

export default FilterForm;