/* global React, SFIcons, SectionHead */
const { Filter, ChevronDown } = SFIcons;
const { ProductCard: PC2 } = window.MADECIDesignSystem_419fb1;
function FilterGroup({ title, children, selected, open = false }) {
const [o, setO] = React.useState(open);
// Al elegir una opción concreta, el grupo se cierra solo y deja ver solo lo elegido.
// Para cambiarla, el cliente vuelve a abrir el desplegable.
const prev = React.useRef(selected);
React.useEffect(() => {
if (selected !== prev.current) {
prev.current = selected;
if (selected) setO(false);
}
}, [selected]);
return (
{o &&
{children}
}
);
}
// Single-select radio row
function Radio({ label, count, selected, onSelect }) {
return (
);
}
// Convierte una capacidad ("600cc", "1.5L", "20L") a cc, solo para ordenar de menor a mayor.
const capCC = (s) => {
if (!s) return 0;
const m = String(s).match(/^([\d.,]+)\s*(cc|ml|l)$/i);
if (!m) return 0;
let v = parseFloat(m[1].replace(',', '.'));
if (/^l$/i.test(m[2])) v *= 1000;
return v;
};
// Orden lógico de las cepas en el filtro de Vinos: primero las cepas puras
// (tintas y luego blancas), después los estilos, y "Otras cepas" al final.
const CEPA_ORDEN = [
'Cabernet Sauvignon', 'Carmenere', 'Merlot', 'Syrah', 'Malbec', 'Pinot Noir', 'Ensamblaje',
'Sauvignon Blanc', 'Chardonnay',
'Tinto', 'Blanco', 'Rosé', 'Late Harvest', 'Sangría y cocteles', 'Pipeño y chicha', 'Otras cepas',
];
const cepaOrden = (v) => { const i = CEPA_ORDEN.indexOf(v); return i === -1 ? 999 : i; };
// Arma una selección variada de "destacados": prioriza los que tienen stock y
// mezcla categorías para que no salgan todos de la misma (mejor primera impresión).
function destacadosDe(lista, max) {
const enStock = lista.filter((p) => p.stockStatus === 'in');
const pool = enStock.length ? enStock : lista;
const porCat = {};
for (const p of pool) (porCat[p.category] = porCat[p.category] || []).push(p);
const cats = Object.keys(porCat);
const res = [];
let i = 0, restantes = pool.length;
while (res.length < max && restantes > 0) {
const arr = porCat[cats[i % cats.length]];
if (arr && arr.length) { res.push(arr.shift()); restantes--; }
i++;
}
return res;
}
function Sidebar({ categories, cat, setCat, formato, setFormato, cap, setCap, brand, setBrand, cepa, setCepa,
formatos, caps, marcas, cepas, optsFormato, optsCap, optsBrand, optsCepa }) {
// Cada opción muestra cuántos productos quedarían si se selecciona (según los otros filtros ya activos).
const countF = (v) => optsFormato.filter((p) => p.formato === v).length;
const countC = (v) => optsCap.filter((p) => p.capacidad === v).length;
const countB = (v) => optsBrand.filter((p) => p.brand === v).length;
const countCe = (v) => optsCepa.filter((p) => p.cepa === v).length;
return (
);
}
function CatalogView({ products, categories, onAdd, qtyEnCarrito, onView, query, setQuery, initialCat, loggedIn, onLogin }) {
const [sort, setSort] = React.useState('Relevancia');
const [cat, setCat] = React.useState(initialCat || 'all');
const [formato, setFormato] = React.useState('all');
const [brand, setBrand] = React.useState('all');
const [cap, setCap] = React.useState('all');
const [cepa, setCepa] = React.useState('all'); // solo aplica en Vinos
const [visibles, setVisibles] = React.useState(24); // cuántos productos se muestran (para "ver más")
// Sync when a category is chosen from the top nav
const prevInit = React.useRef(initialCat);
React.useEffect(() => {
if (initialCat !== prevInit.current) {
prevInit.current = initialCat;
setCat(initialCat || 'all'); setFormato('all'); setBrand('all'); setCap('all'); setCepa('all');
}
}, [initialCat]);
// When category changes, reset dependent filters so they reflect the new category
const setCategory = (c) => { setCat(c); setFormato('all'); setBrand('all'); setCap('all'); setCepa('all'); if (query) setQuery(''); };
// A new search should look across ALL categories, not stay pinned to the current one.
const prevQuery = React.useRef(query);
React.useEffect(() => {
if (query !== prevQuery.current) {
prevQuery.current = query;
if (query) { setCat('all'); setFormato('all'); setBrand('all'); setCap('all'); setCepa('all'); }
}
}, [query]);
const searched = query
? products.filter((p) => (p.name + p.brand + p.category).toLowerCase().includes(query.toLowerCase()))
: products;
const base = cat === 'all' ? searched : searched.filter((p) => p.category === cat);
// Filtros en cascada: las opciones de cada filtro dependen de los OTROS filtros activos.
// matchExcept(p, saltar) aplica todos los filtros menos el indicado (para poder cambiar dentro de ese).
const matchExcept = (p, saltar) =>
(saltar === 'formato' || formato === 'all' || p.formato === formato) &&
(saltar === 'cap' || cap === 'all' || p.capacidad === cap) &&
(saltar === 'brand' || brand === 'all' || p.brand === brand) &&
(saltar === 'cepa' || cepa === 'all' || p.cepa === cepa);
const optsFormato = base.filter((p) => matchExcept(p, 'formato'));
const optsCap = base.filter((p) => matchExcept(p, 'cap'));
const optsBrand = base.filter((p) => matchExcept(p, 'brand'));
const optsCepa = base.filter((p) => matchExcept(p, 'cepa'));
const filtered = base.filter((p) => matchExcept(p, null));
const formatos = [...new Set(optsFormato.map((p) => p.formato).filter(Boolean))].sort((a, b) => a.localeCompare(b));
const caps = [...new Set(optsCap.map((p) => p.capacidad).filter(Boolean))].sort((a, b) => capCC(a) - capCC(b));
const marcas = [...new Set(optsBrand.map((p) => p.brand).filter(Boolean))].sort((a, b) => a.localeCompare(b));
const cepas = [...new Set(optsCepa.map((p) => p.cepa).filter(Boolean))].sort((a, b) => cepaOrden(a) - cepaOrden(b));
// Si un filtro seleccionado deja de existir tras cambiar otro, se limpia solo (no quedan filtros "fantasma").
React.useEffect(() => {
if (formato !== 'all' && !formatos.includes(formato)) setFormato('all');
if (cap !== 'all' && !caps.includes(cap)) setCap('all');
if (brand !== 'all' && !marcas.includes(brand)) setBrand('all');
if (cepa !== 'all' && !cepas.includes(cepa)) setCepa('all');
}, [formato, cap, brand, cepa, cat, formatos.join('|'), caps.join('|'), marcas.join('|'), cepas.join('|')]);
// Sin ningún filtro ni búsqueda mostramos una SELECCIÓN de destacados (no los ~1900, sería lento).
const sinFiltros = cat === 'all' && formato === 'all' && cap === 'all' && brand === 'all' && cepa === 'all' && !query;
const destacados = React.useMemo(() => (sinFiltros ? destacadosDe(products, 24) : []), [sinFiltros, products]);
// Al cambiar de vista (categoría, filtro o búsqueda) reiniciamos el "ver más".
React.useEffect(() => { setVisibles(24); }, [cat, formato, cap, brand, cepa, query]);
const lista = sinFiltros ? destacados : filtered.slice(0, visibles);
const hayMas = !sinFiltros && filtered.length > visibles;
const titulo = query ? `Resultados para “${query}”` : (cat !== 'all' ? cat : 'Productos destacados');
const bajada = sinFiltros
? 'Una selección para empezar — elige una categoría, filtra o busca lo que necesitas'
: `${filtered.length} producto${filtered.length === 1 ? '' : 's'}${cat !== 'all' && !query ? ` en ${cat}` : ''} · precios con IVA incluido`;
const crumb = query ? 'Búsqueda' : (cat === 'all' ? 'Destacados' : cat);
return (
Inicio · Catálogo · {crumb}
{titulo}
{bajada}
Ordenar: {sort}
{filtered.length === 0 ? (
No hay productos que coincidan con estos filtros.
) : (
{lista.map((p) => loggedIn ? (
{ if (e.target.closest('button')) return; onView(p); }} style={{ cursor: 'pointer', height: '100%' }}>
onAdd(p, q, modo)} style={{ height: '100%' }} />
) : (
))}
{hayMas && (
)}
{sinFiltros && (
Estás viendo una selección. Elige una categoría o busca para ver el catálogo completo ({products.length} productos).