"use client";
import React, { useContext, useEffect, useState } from "react";
import { Switch } from "@headlessui/react";
import RangeSlider from "plugins/RangeSlider/page";
import PersianNumber from "plugins/PersianNumber";
import AppContext from "@ctx/AppContext";

const FilterCategory = ({
  id,
  setSelectedBrands,
  selectedBrands,
  setIsChecked,
  isChecked,
  rangePrice,
  setRangePrice,
  sortBy,
  isRangePrice,
  theme,
}) => {
  const CTX = useContext(AppContext);
  const brands = CTX.state.brands;

  const handleCheckboxChange = () => {
    setIsChecked(!isChecked);
  };

  const handleRangeChange = (values) => {
    setRangePrice(values);
  };

  const handleFilterBrand = (name, id) => {
    // Check if the brand is already selected
    const isBrandSelected = selectedBrands.some((brand) => brand.id === id);

    if (!isBrandSelected) {
      // If the brand is not already selected, add it to the state
      setSelectedBrands((prevBrands) => [...prevBrands, { name, id }]);
    } else {
      // If the brand is already selected, remove it from the state
      setSelectedBrands((prevBrands) =>
        prevBrands.filter((brand) => brand.id !== id)
      );
    }
  };

  useEffect(() => {
    CTX.fetchProducts(
      id,
      selectedBrands,
      isChecked,
      rangePrice[0],
      rangePrice[1],
      sortBy,
      isRangePrice
    );
  }, [selectedBrands, isChecked]);

  return (
    <div
      className={` rtl  ${
        theme == 2 ? "col-span-full" : "lg:col-span-2 xl:col-span-1 ml-4"
      }`}
    >
      <div className="sticky top-20  ...">
        <div className=" w-full">
          <div
            className={` border-gray-300 rounded-lg  ${
              theme == 2 ? "bg-gray-100" : "bg-gray-50"
            } `}
          >
            <div className=" p-5 flex justify-between">
              <p className="mb-0 lg:text-sm xl:text-base">برند</p>
              <div>
                <svg
                  width="15"
                  height="15"
                  viewBox="0 0 151 89"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  className="mt-1"
                >
                  <path
                    d="M13.1436 14.2219L76.3596 75.9976L138.135 12.7815"
                    stroke="black"
                    stroke-width="25"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
              </div>
            </div>

            <div className="h-[300px] overflow-y-auto p-5 scroll-1 overflow-hidden">
              {brands?.map((e) => (
                <div onClick={() => handleFilterBrand(e.name, e.id)}>
                  <div className="flex my-2 cursor-pointer">
                    <div
                      className={` w-[30px] h-[30px] rounded-lg border ml-3 tr03 ${
                        selectedBrands.find((d) => d.id == e.id)
                          ? "bg-primary-200 p-1"
                          : ""
                      } `}
                    ></div>
                    <p className="mb-0 text-gray-600 text-sm mt-1">{e.name}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div
            className={`p-5 border-gray-300 rounded-lg mt-3 flex justify-between  ${
              theme == 2 ? "bg-gray-100" : "bg-gray-50"
            } `}
          >
            <p className="mb-0 lg:text-sm xl:text-base">فقط محصولات موجود </p>
            <Switch
              checked={isChecked}
              onChange={handleCheckboxChange}
              className={`${
                isChecked ? "bg-primary-500" : "bg-gray-400"
              } relative inline-flex h-6 w-[50px] items-center rounded-full`}
            >
              <span className="sr-only">Enable notifications</span>
              <span
                className={`${
                  isChecked ? "translate-x-[-5px]" : "translate-x-[-30px]"
                } inline-block h-4 w-4 transform rounded-full bg-white transition`}
              />
            </Switch>
          </div>
          <div
            className={` p-5  border-gray-300 rounded-lg mt-3  ${
              theme == 2 ? "bg-gray-100" : "bg-gray-50"
            } `}
          >
            <div className="flex justify-between ">
              <p className="mb-0">محدوده قیمت</p>
              <div>
                <svg
                  width="15"
                  height="15"
                  viewBox="0 0 151 89"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  className="mt-1"
                >
                  <path
                    d="M13.1436 14.2219L76.3596 75.9976L138.135 12.7815"
                    stroke="black"
                    stroke-width="25"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
              </div>
            </div>
            <div className="mt-10 px-5">
              <RangeSlider min={0} max={100} onChange={handleRangeChange} />
            </div>

            <div className="flex mt-5">
              <div className="w-full text-center">
                <p className="mb-0 text-sm">تا قیمت</p>
                <p className="mb-0">
                  <PersianNumber number={rangePrice[0]} style="font-bold" />
                </p>
              </div>
              <div className="w-full text-center">
                <p className="mb-0 text-sm">از قیمت</p>
                <p className="mb-0">
                  <PersianNumber number={rangePrice[1]} style="font-bold" />
                </p>
              </div>
            </div>

            <div className="mt-4">
              <button className="btn btn-primary w-full rounded-full text-sm ">
                اعمال فیلتر
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default FilterCategory;
