import { useEffect, useState } from "react";
import { Icon } from "@iconify/react";

import InputComponent from "./InputComponent";
import { useForm } from "react-hook-form";
import Dropdown from "../../icons/Dropdown";

// import MemoMoney from "@/public/aside nav/Money"

const SelectPriceRange = ({
  formInputs,
  name,
  label,
  color,
  className,
}: {
  formInputs: any;
  color?: string;
  name: { min: string; max: string };
  label: string;
  className?: string;
}) => {
  // const {
  //     register,
  //     handleSubmit,
  //     watch,
  //     control,
  //     formState: { errors },
  // } = useForm()
  // const [priceFrom, setPriceFrom] = useState<string | number>("")
  // const [priceTo, setPriceTo] = useState<string | number>("")
  const [open, setOpen] = useState(false);
  const DropDownTrigger = () => {
    return (
      <div
        className={`bg-[#FAF9F6] text-[#6B7280]  rounded-[8px] w-full py-[13px] px-[6px] lg:h-[50px] flex items-center   ${className}`}
        onClick={() => {
          setOpen(!open);
        }}
      >
        <div className="flex h-full relative gap-2 justify-start  items-center px-1 w-full">
          {!formInputs.watch(name.min) ? (
            <>
              <div className="flex items-center">
                <svg
                  width="20"
                  height="18"
                  viewBox="0 0 20 18"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M15 0.5H5C2 0.5 0 2 0 5.5V12.5C0 16 2 17.5 5 17.5H15C18 17.5 20 16 20 12.5V5.5C20 2 18 0.5 15 0.5ZM4.25 11.5C4.25 11.91 3.91 12.25 3.5 12.25C3.09 12.25 2.75 11.91 2.75 11.5V6.5C2.75 6.09 3.09 5.75 3.5 5.75C3.91 5.75 4.25 6.09 4.25 6.5V11.5ZM10 12C8.34 12 7 10.66 7 9C7 7.34 8.34 6 10 6C11.66 6 13 7.34 13 9C13 10.66 11.66 12 10 12ZM17.25 11.5C17.25 11.91 16.91 12.25 16.5 12.25C16.09 12.25 15.75 11.91 15.75 11.5V6.5C15.75 6.09 16.09 5.75 16.5 5.75C16.91 5.75 17.25 6.09 17.25 6.5V11.5Z"
                    fill="#CEA768"
                  />
                </svg>
              </div>
              <span className="line-clamp-1">{label} range</span>
            </>
          ) : (
            <div className="flex items-center gap-2">
              <svg
                width="20"
                height="18"
                viewBox="0 0 20 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M15 0.5H5C2 0.5 0 2 0 5.5V12.5C0 16 2 17.5 5 17.5H15C18 17.5 20 16 20 12.5V5.5C20 2 18 0.5 15 0.5ZM4.25 11.5C4.25 11.91 3.91 12.25 3.5 12.25C3.09 12.25 2.75 11.91 2.75 11.5V6.5C2.75 6.09 3.09 5.75 3.5 5.75C3.91 5.75 4.25 6.09 4.25 6.5V11.5ZM10 12C8.34 12 7 10.66 7 9C7 7.34 8.34 6 10 6C11.66 6 13 7.34 13 9C13 10.66 11.66 12 10 12ZM17.25 11.5C17.25 11.91 16.91 12.25 16.5 12.25C16.09 12.25 15.75 11.91 15.75 11.5V6.5C15.75 6.09 16.09 5.75 16.5 5.75C16.91 5.75 17.25 6.09 17.25 6.5V11.5Z"
                  fill="#CEA768"
                />
              </svg>
              <p className="line-clamp-1">
                Min: {formInputs?.watch(name.min)?.slice(0,6) || 0}
              </p>
              <span>-</span>
              <p className=" line-clamp-1">
                Max: {formInputs?.watch(name.max)?.slice(0,7) || 0}
              </p>
            </div>
          )}
        </div>

        <div className="flex me-2 justify-end">
          {" "}
          <Icon icon="fe:arrow-down" className="size-5 " />
        </div>
      </div>
    );
  };
  // close dropdown menu on click any where but inputs

  useEffect(() => {
    if (typeof window !== "undefined") {
      const body = document.querySelector("body");
      body?.addEventListener("click", () => {
        setOpen(false);
        // const min_price = form.watch().min_price || ""
        // const max_price = form.watch().max_price || ""
        // setPriceFrom(min_price)
        // setPriceTo(max_price)
      });
      const inputs = document.querySelectorAll(".custom_dropDown");
      inputs.forEach((item) => {
        item.addEventListener("click", (e) => {
          e.stopPropagation();
        });
      });
    }
  }, [open]);
  // close dropdown menu on click any where but inputs
  return (
    <div className=" w-full h-full relative">
      {/* <SelectWithIcon
        form={form}
        name="price"
        options={(options as any) || []}
        icon={
          <div className="flex items-center relative md:static">
            <Image
              className="w-3 h-3 md:w-4 md:h-4 lg:w-5 lg:h-5"
              src={images.AED}
              width={20}
              height={20}
              alt="currency"
            />
            <p className="text-grayFont capitalize opacity-70 font-bold md:ms-2 md:static absolute left-0 w-[90px] md:w-full text-[12px]">{locale?.price_range}</p>
          </div>
        }
      /> */}

      <h3 className={`mb-[5px] ${color ? `${color}` : "white"}`}>{label}</h3>
      <div className="flex !max-h-[50px] items-center justify-center cursor-pointer">
        <DropDownTrigger />
        <div className="text-xs flex relative ltr:right-6 rtl:left-6">
          {/* <ArrowIcon /> */}
        </div>
      </div>

      {open ? (
        <div
          id="22"
          className="w-full h-[60px]  bg-white absolute text-grayFont  gap-0 top-[82px] flex items-center justify-start  px-[5px] rounded z-[60]"
        >
          <InputComponent
            type="text"
            className="custom_dropDown capitalize w-full max-h-full !py-2   focus:!bg-white focus:!outline-primary"
            placeholder={"from"}
            {...formInputs.register(name.min, {
              required: "Full name is required",
            })}
          />
          -
          <InputComponent
            type="text"
            className="custom_dropDown capitalize w-full    !py-2 focus:!bg-white focus:!outline-primary"
            placeholder={"to"}
            {...formInputs.register(name.max, {
              required: "Full name is required",
            })}
          />
        </div>
      ) : null}
    </div>
  );
};

export default SelectPriceRange;