"use client";

import trash from "@/public/trash.svg";
import Image from "next/image";
import { useEffect, useState } from "react";
import { IoChevronDown } from "react-icons/io5";
import { FaUser } from "react-icons/fa";
import CustomSelect from "./CustomSelect";
// import AgeSelect, { SelectTypes } from "../reusableComponent/AgesSelect";
import users from "@/public/users.svg";
import { useTranslations } from "next-intl";

type SelectTypes = {
  value: string;
  label: string;
};
const options: SelectTypes[] = Array.from({ length: 18 }, (_, i) => ({
  value: i.toString(),
  label: i.toString(),
}));
const PriceRange = ({
  watch,
  setValue,
  getValues,
}: {
  getValues: any;
  watch: any;
  setValue: any;
}) => {
  const t = useTranslations("filter");
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const [isError, setIsError] = useState(false);

  const toggleDropdown = () => {
    setIsDropdownOpen(!isDropdownOpen);
    // setIsError(false);
  };

  const incrementBedrooms = () => {
    if (watch("bedrooms") < 17) {
      setValue("bedrooms", +getValues("bedrooms") + 1);
    }
  };

  const decrementBedrooms = () => {
    // setAdultCount((prev) => (prev > 0 ? prev - 1 : 0));
    if (watch("bedrooms") > 0) {
      setValue("bedrooms", +getValues("bedrooms") - 1);
    }
  };

  const incrementChild = () => {
    if (watch("bathrooms") < 17) {
      setValue("bathrooms", +getValues("bathrooms") + 1);
    }
  };

  const decrementChild = () => {
    if (watch("bathrooms") > 0) {
      setValue("bathrooms", +getValues("bathrooms") - 1);
    }
  };

  // Format the guest display text
  const getGuestText = () => {
    let text = "";

    if (watch("price_from") > 0) {
      if (watch("price_from") > 0) {
        text += " ";
      }
      text += `${watch("price_from")}K`;
    }

    if (watch("price_to") > 0) {
      if (watch("price_to") > 0) {
        text += " ";
      }
      text += `- ${watch("price_to")}K AED`;
    }

    return text || "0 ";
  };

  const bathroomsHandler = (value: string, index: number) => {
    // Get current ages and ensure they're all strings
    // const currentBathrooms = getValues("bathrooms")?.map((item: any) => String(item));
    // Update the age at the specified index
    // currentBathrooms[index] = String(value);
    // setValue("bathrooms", currentBathrooms);
  };

  return (
    <div className="relative">
      <button
        className="flex items-center px-1 pt-[9px] pb-[10px] justify-between w-full bg-[#FFFFFF1A] bg-opacity-40 border-b-[.5px] !border-dark"
        onClick={toggleDropdown}
      >
         <div className="flex items-center gap-2">
          <span
            className={`text-sm font-light text-dark ${
              (watch("price_from") == "" && watch("price_to") == "") ? "text-gray-400" : ""
            }`}
          >
            {getGuestText()}
          </span>
        </div>
        <div className="flex items-center gap-2">
          <IoChevronDown
            className={`transform transition-transform duration-300 text-dark hover:text-primary`}
          />
        </div>
      </button>

      {/* Dropdown Content */}
      {isDropdownOpen && (
        <div className="absolute top-full bg-white backdrop-blur-sm w-full left-0 right-0 mt-2 rounded-[7px] p-4  shadow-lg border border-white z-[9999]">
          <div className="flex flex-col relative overflow-visible">
            <div className="flex justify-between items-center rounded-full py-2 gap-2">
              {/* <span className=" w-[70px]">from: </span> */}
              <div className="flex gap-5">
                <input
                  className="w-full bg-white bg-opacity-10 rounded-lg px-1 py-1 text-black placeholder-gray-300 border border-gray-400 focus:outline-none"
                  type="number"
                  placeholder="from"
                  value={watch("price_from")}
                  onChange={(e) => setValue("price_from", e.target.value)}
                />
              </div>
            </div>
            {/* <hr className="w-full" /> */}
            <div className="flex justify-between items-center rounded-full py-2 gap-2">
              {/* <span className=" w-[70px]">to: </span> */}
              <div className="flex gap-5">
                <input
                  className="w-full bg-white bg-opacity-10 rounded-lg px-1 py-1 text-black placeholder-gray-300 border border-gray-400 focus:outline-none"
                  type="number"
                  placeholder="to"
                  value={watch("price_to")}
                  onChange={(e) => setValue("price_to", e.target.value)}
                />
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};
export default PriceRange;