"use client";
import * as React from "react";
import { useSearchParams } from "next/navigation";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectTrigger,
  SelectValue,
} from "./ui/select";
import { ChevronDown } from "lucide-react";
import FilterAccordion from "./FilterAccordion";

export function FilterSelect({
  filterType,
  filterFunction,
  filterKey,
  filterName,
  setIsFilterApplied,
  resetTrigger,
  filterItemType = "checkbox",
  urlParamType = "id", // "id" или "value"
}) {
  const [checkedItems, setCheckedItems] = React.useState({});
  const [isOpen, setIsOpen] = React.useState(false);
  const searchParams = useSearchParams();

  // Reset filters
  React.useEffect(() => {
    setCheckedItems({});
  }, [resetTrigger]);

  // Set filters state based on URL
  React.useEffect(() => {
    const multipleValues = searchParams.getAll(filterKey);
    const singleValue = searchParams.get(filterKey);

    // Формируем массив для сравнения значений из URL
    const currentFilters =
      multipleValues.length > 0
        ? multipleValues
        : singleValue
          ? [singleValue]
          : [];

    const checkedState = filterType.reduce((acc, item) => {
      // Определяем, с чем сравнивать: с ID элемента или с его VALUE
      const valToCheck = (
        urlParamType === "value" ? item.value : item.id
      ).toString();

      acc[item.id.toString()] = currentFilters.includes(valToCheck);
      return acc;
    }, {});

    setCheckedItems(checkedState);
  }, [searchParams, filterType, filterKey, urlParamType]);

  const handleInputChange = (event) => {
    const { id, checked } = event.target;

    if (filterItemType === "radio") {
      setCheckedItems({ [id]: true });
    } else {
      setCheckedItems((prevState) => ({
        ...prevState,
        [id]: checked,
      }));
    }

    // Передаем ID в родительскую функцию,
    // она сама определит, нужно ли превращать ID в Value согласно конфигурации
    filterFunction(id);
  };

  const hasSelectedFilters = Object.values(checkedItems).some(
    (val) => val === true,
  );

  return (
    <div className="relative select-none">
      <Select open={isOpen} onOpenChange={setIsOpen}>
        <SelectTrigger
          onPointerDown={(e) => e.preventDefault()}
          onClick={() => setIsOpen((prev) => !prev)}
          className={`w-fit text-neutral600  px-4 py-2 font-medium text-sm lg:text-base rounded-[20px] gap-1 cursor-pointer transition-all duration-300 ${
            hasSelectedFilters
              ? "border-2 border-[#9380EC]"
              : "border-neutral400"
          }`}
        >
          <SelectValue placeholder={filterName} />
          <ChevronDown
            strokeWidth={1.5}
            className={`ml-auto h-6 w-6 transition-all duration-300 ${
              hasSelectedFilters ? "text-[#9380EC]" : "text-neutral600"
            } ${isOpen ? "rotate-180" : ""}`}
          />
        </SelectTrigger>
        <SelectContent className="relative bg-white transition-all">
          <SelectGroup className="flex w-full flex-col p-2 md:p-4">
            {filterType?.length > 0 &&
              filterType.map((item) => (
                <li
                  key={item.id}
                  className="flex w-full mb-2 cursor-pointer gap-3 uppercase font-semibold text-neutral700 list-none items-center justify-start"
                >
                  <div className="relative flex items-center justify-center">
                    <input
                      className={`
      peer appearance-none h-5 w-5 cursor-pointer border border-neutral-400 
      transition-all duration-200
      ${filterItemType === "radio" ? "rounded-full" : "rounded-sm"}
      checked:bg-[#9380EC] checked:border-[#9380EC]
    `}
                      type={filterItemType === "radio" ? "radio" : "checkbox"}
                      id={item.id.toString()}
                      name={filterKey}
                      checked={!!checkedItems[item.id.toString()]}
                      onChange={handleInputChange}
                    />

                    {filterItemType === "radio" ? (
                      <div className="absolute w-2.5 h-2.5 rounded-full bg-white hidden peer-checked:block pointer-events-none" />
                    ) : (
                      <svg
                        className="absolute w-4 h-4 text-white hidden peer-checked:block pointer-events-none"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        strokeWidth={3}
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M5 13l4 4L19 7"
                        />
                      </svg>
                    )}
                  </div>
                  <label
                    htmlFor={item.id.toString()}
                    className="-mb-0.75 cursor-pointer text-sm lg:text-base h-full"
                  >
                    {item.name}
                  </label>
                </li>
              ))}
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  );
}