import React from "react";
import { useTranslation } from "react-i18next";
import { TiTick } from "react-icons/ti";
import styles from "../CategoryPage.module.scss";

const CategoryFilters = ({
  filtersData,
  selectedFilterCategory,
  selectedFilterBrand,
  brandSearchQuery,
  searchQuery,
  minPrice,
  maxPrice,
  onMinPriceChange,
  onMaxPriceChange,
  onCategorySelect,
  onCategoryDeselect,
  onBrandSelect,
  onBrandDeselect,
  onBrandSearchChange,
  className,
}) => {
  const { t } = useTranslation();

  if (searchQuery) return null;

  return (
    <aside className={`${styles.filtersContainer} ${className}`}>
      {filtersData?.categories?.length > 0 && (
        <div className={styles.filterSection}>
          <h3>{t("category.subCategories")}</h3>
          <ul>
            {filtersData.categories.map((category) => (
              <li
                key={category.id}
                onClick={() => {
                  if (selectedFilterCategory === category.id) {
                    onCategoryDeselect();
                  } else {
                    onCategorySelect(category.id);
                  }
                }}
                className={
                  selectedFilterCategory === category.id
                    ? styles.activeSubcategory
                    : ""
                }
              >
                {category.name}
              </li>
            ))}
          </ul>
        </div>
      )}

      {filtersData?.brands?.length > 0 && (
        <div className={styles.filterSection}>
          <h3>{t("navbar.brands")}</h3>

          <input
            type="text"
            placeholder="Gözleg"
            value={brandSearchQuery}
            onChange={(e) => onBrandSearchChange(e.target.value)}
            className={styles.searchInput}
          />

          <ul>
            {filtersData.brands
              .filter((brand) =>
                brand.name
                  .toLowerCase()
                  .includes(brandSearchQuery.toLowerCase()),
              )
              .map((brand) => (
                <li key={brand.id}>
                  <label>
                    <input
                      type="checkbox"
                      checked={selectedFilterBrand === brand.id}
                      onChange={() => {
                        if (selectedFilterBrand === brand.id) {
                          onBrandDeselect();
                        } else {
                          onBrandSelect(brand.id);
                        }
                      }}
                    />
                    <span className={styles.customCheckbox}>
                      <TiTick className={styles.checkIcon} />
                    </span>
                    {brand.name}
                  </label>
                </li>
              ))}
          </ul>
        </div>
      )}
      <div className={styles.filterSection}>
        <h3>{t("category.price")}</h3>
        <div className={styles.priceFilterContainer}>
          <div className={styles.priceInputGroup}>
            <span className={styles.priceLabel}>{t("category.minPrice")}</span>
            <input
              type="number"
              min="0"
              placeholder={t("category.minPrice")}
              value={minPrice}
              onChange={(e) => onMinPriceChange(e.target.value)}
              className={styles.priceInput}
            />
          </div>
          <span className={styles.priceDivider}>-</span>
          <div className={styles.priceInputGroup}>
            <span className={styles.priceLabel}>{t("category.maxPrice")}</span>
            <input
              type="number"
              min="0"
              placeholder={t("category.maxPrice")}
              value={maxPrice}
              onChange={(e) => onMaxPriceChange(e.target.value)}
              className={styles.priceInput}
            />
          </div>
        </div>
      </div>
    </aside>
  );
};

export default CategoryFilters;
