import React from "react";
import { Checkbox } from "antd";
import type { CheckboxProps } from "antd";
import { useFilterStateState } from "../../zustand/Filter";
import { languageObject } from "../Utils/languageObject";
import { useGetCategory } from "../../api/category";

const BrandFilter = ({id}:{id:any}) => {
  const { setFilter, Filter } = useFilterStateState();
  
  const onChange =
    (Category: any): CheckboxProps["onChange"] =>
    (e) => {
      const checked = e.target.checked;

      if (checked) {
        setFilter([...Filter, { name:Category?.name,id:Category?.id,type:"category", index: Filter.length }]);
      } else {
        const newArray = Filter?.filter((item: any) => item.name !== Category?.name);
        setFilter(newArray);
      }
    };
    const data = useGetCategory({
      parent_id:id
    })
  const product = data?.data?.data;
  console.log(product);
  
  return (
    <div className="CheckboxFilter">
      {product?.map((brand:any) => {
        console.log(brand?.children);
        
      return  (
        <Checkbox
          checked={Filter.some((item: any) => item.name === brand?.name)}
          key={brand?.id}
          onChange={onChange(brand)}           
        >
          {languageObject(brand?.name)}
        </Checkbox>
      )})}
    </div>
  );
};

export default BrandFilter;
