import React from "react";
import { useDispatch } from "react-redux";
import { setFilter, applyFilters } from "./catalogSlice";
import styles from "./Catalog.module.css";
import type { Category } from "../../types/categories";
import type { CategoryAtributes } from "../../types/categories";
import type { CategoryAtrVals } from "../../types/categories";

interface Props{
  categories: Category[];
  atributes: CategoryAtributes[]
  atrVals: CategoryAtrVals[];
}

const CatalogSidebar: React.FC<Props> = ({categories, atributes, atrVals}) => {
  const dispatch = useDispatch();

  const handleFilterChange = (name: string, value: string) => {
    dispatch(setFilter({ name, value }));
    dispatch(applyFilters());
  };

  return (
    <aside className={styles.sidebar}>
      <h3>ПАРАМЕТРЫ</h3>
      <div className={styles.filterGroup}>
        <p>размер:</p>
        {atributes.map((a) => (
          <>
            <p>{a.name}</p>
              {atrVals.map((b) => (
                <label>
                  <input type="checkbox" onChange={() => handleFilterChange(`${a.name}`, `${b.val}`)} /> <p>{b.val}</p>
                </label>
              ))}
          </>
        ))}


        <label>
          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х500")} /> 110х2,2х500
        </label>
        <label>
          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х1000")} /> 110х2,2х1000
        </label>
        <label>
          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х1500")} /> 110х2,2х1500
        </label>
        <label>
          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х2000")} /> 110х2,2х2000
        </label>
        <label>
          <input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х3000")} /> 110х2,2х3000
        </label>
      </div>
      <div className={styles.filterGroup}>
        <p>Форма выпуска:</p>
        <label>
          <input type="checkbox" onChange={() => handleFilterChange("form", "Наборы")} /> Наборы
        </label>
        <label>
          <input type="checkbox" onChange={() => handleFilterChange("form", "Поштучно")} /> Поштучно
        </label>
      </div>
    </aside>
  );
};

export default CatalogSidebar;