"use client"
import { useTranslations } from "next-intl";
import { useParams, useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";

const CheckboxGroup = ({ title, items, selectedItem, onItemSelect }) => {
  return (
    <div className="mb-6">
      <h3 className="text-lg font-semibold mb-2">{title}</h3>
      {items.map((item) => (
        <div key={item.documentId} className="flex items-center mb-2">
          <input
            type="checkbox"
            id={item.documentId}
            checked={selectedItem === item.documentId}
            onChange={() => onItemSelect(item.documentId)}
            className="mx-2"
          />
          <label htmlFor={item.documentId} className="text-sm">
            {item.title}
          </label>
        </div>
      ))}
    </div>
  )
}

const Filters = ({ brands, categories,subCategories }) => {
  const [selectedCategory, setSelectedCategory] = useState(null)
  const [selectedBrand, setSelectedBrand] = useState(null)
  const [selectedSubcategoty, setSelectedSubcategory] = useState(null)
  const params = useParams()
  const router = useRouter()
  const handleCategorySelect = (documentId) => {
    setSelectedCategory((prevSelected) => (prevSelected === documentId ? null : documentId))
    router.push("/products/"+(documentId ? `${categories.find(c=>c.documentId === documentId)?.slug}` : ""))
  }

  const handleBrandSelect = (documentId) => {
    setSelectedBrand((prevSelected) => (prevSelected === documentId ? null : documentId))
    router.push("/products/"+(documentId ? `${brands.find(b=>b.documentId === documentId)?.slug}` : ""))  
  }


  const handleSubSelect = (documentId) => {
    setSelectedSubcategory((prevSelected) => (prevSelected === documentId ? null : documentId))
    router.push("/products/"+(documentId ? `${subCategories.find(b=>b.documentId === documentId)?.slug}` : ""))  
  }

 
  useEffect(()=>{
    
    const categoryOrBrand = params.category;
    console.log("paramssssssssssssss", params.category,brands.find(b=>b.slug === categoryOrBrand),brands)

    setSelectedBrand(brands.find(b=>b.slug === categoryOrBrand)?.documentId)
    setSelectedCategory(categories.find(c=>c.slug === categoryOrBrand)?.documentId)
    setSelectedSubcategory(subCategories.find(c=>c.slug === categoryOrBrand)?.documentId)
  },[params])
  const t = useTranslations("PLP.filter")
  return (
    <aside className="w-full md:w-2/5 p-6   md:mr-6 mb-6 md:mb-0">
      <h2 className="text-2xl font-bold mb-6 text-gray-800">{t("title")}</h2>



      <CheckboxGroup
        title="Categories"
        items={categories}
        selectedItem={selectedCategory}
        onItemSelect={handleCategorySelect}
      />
      <CheckboxGroup title="Brands" items={brands} selectedItem={selectedBrand} onItemSelect={handleBrandSelect} />
      <CheckboxGroup title="Use Case" items={subCategories} selectedItem={selectedSubcategoty} onItemSelect={handleSubSelect} />




    </aside>
  );
};

export default Filters;
