"use client";

import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus, faMinus } from "@fortawesome/free-solid-svg-icons";
import "./Product_Filter.css";

const Product_Filter = ({
  category,
  allsizes,
  allcolours,

  price,
  setPrice,

  selectedSizes,
  setSelectedSizes,

  selectedColours,
  setSelectedColours,

  selectedCategories,
  setSelectedCategories,

  onReset,

  minPriceLimit,
  maxPriceLimit,
}) => {
  const [openFilter, setOpenFilter] = useState("category");

  const toggleFilter = (filterName) => {
    setOpenFilter((prev) => (prev === filterName ? null : filterName));
  };

  const toggleSelection = (id, setter) => {
    setter((prev) =>
      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id],
    );
  };

  return (
    <div className="Product_Filter">
      {/* ================= CATEGORY ================= */}
      <div className="filter_item">
        <div className="filter_header" onClick={() => toggleFilter("category")}>
          <span>Category</span>

          <FontAwesomeIcon
            icon={openFilter === "category" ? faMinus : faPlus}
            className="filter_icon"
          />
        </div>

        {openFilter === "category" && (
          <div className="filter_options">
            {category?.length > 0 ? (
              category.map((item) => (
                <label className="filter_option" key={item?.id}>
                  <input
                    type="checkbox"
                    checked={selectedCategories?.includes(item?.id)}
                    onChange={() =>
                      toggleSelection(item?.id, setSelectedCategories)
                    }
                  />

                  <span>{item?.name}</span>
                </label>
              ))
            ) : (
              <p className="no_filter_data">No categories found</p>
            )}
          </div>
        )}
      </div>

      {/* ================= SIZE ================= */}
      <div className="filter_item">
        <div className="filter_header" onClick={() => toggleFilter("size")}>
          <span>Size</span>

          <FontAwesomeIcon
            icon={openFilter === "size" ? faMinus : faPlus}
            className="filter_icon"
          />
        </div>

        {openFilter === "size" && (
          <div className="filter_options">
            {allsizes?.length > 0 ? (
              allsizes.map((item) => (
                <label className="filter_option" key={item?.id}>
                  <input
                    type="checkbox"
                    checked={selectedSizes?.includes(item?.id)}
                    onChange={() => toggleSelection(item?.id, setSelectedSizes)}
                  />

                  <span>{item?.name}</span>
                </label>
              ))
            ) : (
              <p className="no_filter_data">No sizes found</p>
            )}
          </div>
        )}
      </div>

      {/* ================= COLOUR ================= */}
      <div className="filter_item">
        <div className="filter_header" onClick={() => toggleFilter("colour")}>
          <span>Colour</span>

          <FontAwesomeIcon
            icon={openFilter === "colour" ? faMinus : faPlus}
            className="filter_icon"
          />
        </div>

        {openFilter === "colour" && (
          <div className="filter_options">
            {allcolours?.length > 0 ? (
              allcolours.map((item) => (
                <label className="filter_option" key={item?.id}>
                  <input
                    type="checkbox"
                    checked={selectedColours?.includes(item?.id)}
                    onChange={() =>
                      toggleSelection(item?.id, setSelectedColours)
                    }
                  />

                  <span>{item?.name}</span>
                </label>
              ))
            ) : (
              <p className="no_filter_data">No colours found</p>
            )}
          </div>
        )}
      </div>

      {/* ================= PRICE ================= */}
      <div className="filter_item">
        <div className="filter_header" onClick={() => toggleFilter("price")}>
          <span>Price Range</span>

          <FontAwesomeIcon
            icon={openFilter === "price" ? faMinus : faPlus}
            className="filter_icon"
          />
        </div>

        {openFilter === "price" && (
          <div className="filter_options price_filter">
            <div className="range_value">
              <span>₹{minPriceLimit ?? 0}</span>

              <span>₹{price ?? maxPriceLimit ?? 0}</span>
            </div>

            <input
              type="range"
              className="custom_range_slider"
              min={minPriceLimit ?? 0}
              max={maxPriceLimit ?? 100000}
              step="500"
              value={price ?? maxPriceLimit ?? 100000}
              onChange={(e) => setPrice(Number(e.target.value))}
            />
          </div>
        )}
      </div>

      {/* ================= RESET ================= */}
      <div className="filter_buttons">
        <button type="button" className="filter_reset_btn" onClick={onReset}>
          Reset
        </button>
      </div>
    </div>
  );
};

export default Product_Filter;
