import Head from "next/head"; import Header from "@/components/Header"; import Footer from "@/components/Footer"; import CatalogSubscribe from "@/components/CatalogSubscribe"; import MobileMenuBottomSection from "../components/MobileMenuBottomSection"; import FavoriteInfo from "@/components/FavoriteInfo"; import Filters, { FilterConfig } from "@/components/Filters"; import FiltersPanelMobile from "@/components/FiltersPanelMobile"; import React, { useState, useMemo } from "react"; import CartRecommended from "../components/CartRecommended"; import FavoriteList from "../components/FavoriteList"; import { useFavorites } from "@/contexts/FavoritesContext"; export default function Favorite() { const { favorites } = useFavorites(); const [showFiltersMobile, setShowFiltersMobile] = useState(false); const [searchQuery, setSearchQuery] = useState(''); const [filterValues, setFilterValues] = useState<{[key: string]: any}>({}); const [sortBy, setSortBy] = useState<'name' | 'brand' | 'date'>('date'); const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc'); // Создаем динамические фильтры на основе данных избранного const dynamicFilters: FilterConfig[] = useMemo(() => { const filters: FilterConfig[] = []; if (favorites.length === 0) { return filters; } // Фильтр по производителю const brands = [...new Set(favorites.map(item => item.brand).filter(Boolean))].sort(); if (brands.length > 1) { filters.push({ type: "dropdown", title: "Производитель", options: brands, multi: true, showAll: true, }); } // Фильтр по цене const prices = favorites .map(item => item.price) .filter((price): price is number => typeof price === 'number' && price > 0); if (prices.length > 0) { const minPrice = Math.min(...prices); const maxPrice = Math.max(...prices); if (maxPrice > minPrice) { filters.push({ type: "range", title: "Цена (₽)", min: Math.floor(minPrice), max: Math.ceil(maxPrice), }); } } return filters; }, [favorites]); const handleFilterChange = (type: string, value: any) => { setFilterValues(prev => ({ ...prev, [type]: value })); }; const handleSearchChange = (value: string) => { setSearchQuery(value); }; const handleApplyFilters = () => { setShowFiltersMobile(false); }; const handleClearFilters = () => { setFilterValues({}); setSearchQuery(''); }; // Подсчитываем количество активных фильтров const activeFiltersCount = useMemo(() => { let count = 0; if (searchQuery.trim()) count++; Object.entries(filterValues).forEach(([key, value]) => { if (Array.isArray(value) && value.length > 0) count++; else if (value && !Array.isArray(value)) count++; }); return count; }, [searchQuery, filterValues]); return ( <> Избранное - Protek Auto
setShowFiltersMobile((v) => !v)}>
Фильтры
{activeFiltersCount > 0 && (
{activeFiltersCount}
)}
{activeFiltersCount > 0 && ( )}
setShowFiltersMobile(false)} onApply={handleApplyFilters} searchQuery={searchQuery} onSearchChange={handleSearchChange} filterValues={filterValues} onFilterChange={handleFilterChange} />