"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";
export type SelectTypes = {
  value: string;
  label: string;
};
const options: SelectTypes[] = Array.from({ length: 18 }, (_, i) => ({
  value: i.toString(),
  label: i.toString(),
}));
const BathroomsAndBedrooms = ({
  watch,
  setValue,
  getValues,
}: {
  getValues: any;
  watch: any;
  setValue: any;
}) => {
  const t = useTranslations("filter");
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const [isError, setIsError] = useState(false);
  //   const [adultCount, setAdultCount] = useState(2);
  // const [childCount, setChildCount] = useState(1);
  //   const [ages, setAges] = useState<string[]>(["2", "12"])
  // useEffect(()=>{

  //     setAges(getValues('ages'))
  // },[])
  // useEffect(()=>{

  // setValue("ages", ages)
  // },[ages])
  const toggleDropdown = () => {
    // const isVal = getValues("ages")?.includes("0");
    // if (isDropdownOpen === true && isVal) {
    //   setIsError(true);
    //   return;
    // }
    setIsDropdownOpen(!isDropdownOpen);
    // setIsError(false);
  };

  const incrementBedrooms = () => {
    // setAdultCount((prev) => prev + 1);
    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 = () => {
    // Get current ages and make sure they are all strings
    // const currentAges = getValues("ages").map((age: any) => String(age));
    // Add new age as string
    // const newAges = [...currentAges, "0"];

    // setValue("ages", newAges);
    // setIsError(false);

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

  const decrementChild = () => {
    // Get current ages and ensure they're all strings
    // const currentAges = getValues("ages").map((age: any) => String(age));
    // Remove the last age
    // currentAges.pop();
    // setValue("ages", currentAges);

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

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

    // if (watch("bedrooms") > 0) {
    //   text += `${watch("bedrooms")} `;
    // }

    // if (watch("bedrooms") > 0) {
    //   if (watch("bedrooms") > 0) {
    //     text += " ";
    //   }
    //   text += `${watch("bedrooms")} bedrooms`;
    // }

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

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

    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="flex flex-col border border-[#ffffff20] bg-white bg-opacity-5 rounded-3xl">

    //   <div className=" p-4">
    <div className="relative z-50 overflow-visible">
      {/* Guest Count Dropdown Button */}
      <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">
          {/* <FaUser className="text-[#CAB16C]" /> */}
          {/* <Image src={users} alt="users" className="w-5 h-5" /> */}
          <span
            // className={`text-sm font-medium  text-dark ${
            //   watch("bedrooms") >= "0" ||
            //   watch("bathrooms") >= "0" ||
            //   watch("bedrooms") == "" ||
            //   watch("bathrooms") == ""
            //     ? ""
            //     : "text-gray-400"
            // }`}
            className={`text-sm font-light  text-dark ${
              (watch("bedrooms") == 0 || watch("bedrooms") == "") &&
              (watch("bathrooms") == 0 || watch("bathrooms") == "")
                ? "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`}
            // className={`transform transition-transform duration-300 text-[#5A0816] ${
            //   isDropdownOpen ? "rotate-180" : ""
            // }`}
          />
        </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 z-[9999] shadow-lg border border-white">
          <div className="flex flex-col gap-4 relative overflow-visible">
            <div className="flex justify-between items-center rounded-full py-2">
              <span className=" text-right">bedrooms</span>
              <div className="flex gap-5">
                <button
                  className=" text-xl bg-transparent rounded-full w-6 h-6 flex justify-center items-center border border-white"
                  onClick={incrementBedrooms}
                >
                  <span>+</span>
                </button>

                <span className="">
                  {watch("bedrooms") === "" ? 0 : watch("bedrooms")}
                </span>
                <button
                  className=" text-xl bg-transparent rounded-full w-6 h-6 flex justify-center items-center border border-white"
                  onClick={decrementBedrooms}
                >
                  <span>-</span>
                </button>
              </div>
            </div>
            <hr className="w-full" />
            <div className="flex justify-between items-center rounded-full py-2">
              <span className=" text-right">bathrooms</span>
              <div className="flex gap-5">
                <button
                  className=" text-xl bg-transparent rounded-full w-6 h-6 flex justify-center items-center border border-white"
                  onClick={incrementChild}
                >
                  <span>+</span>
                </button>
                <span className="">
                  {watch("bathrooms") === "" ? 0 : watch("bathrooms")}
                </span>
                <button
                  className=" text-xl bg-transparent rounded-full w-6 h-6 flex justify-center items-center border border-white"
                  onClick={decrementChild}
                >
                  <span>-</span>
                </button>
              </div>
            </div>
          </div>
          {/* <div className="grid grid-cols-3 gap-4 mt-3">
            {getValues("bathrooms")?.map((item: any, index: string) => {
              return (
                <div key={index} className=" w-full">
                  <AgeSelect
                    onChange={agesHandler}
                    error={isError}
                    value={age}
                    index={index}
                    options={options}
                  />
                </div>
              );
            })}
          </div> */}
        </div>
      )}
    </div>
    //   </div>
    // </div>
  );
};
export default BathroomsAndBedrooms;