// FilterPanel — 9 filtergroepen, collapsible, met counters uit de server-facets.
// Filters zijn AND-gestapeld. URL-state via parent.
//
// Counters komen sinds de API-omzetting uit /v1/vergunningen/facets (props.facets).
// De facets respecteren ALLE actieve filters — een gedeselecteerde waarde uit
// dezelfde groep krijgt count=0 en verdwijnt uit de facet-array. Dat is een
// bewuste API-keuze (v1).
const { useState: useStateFP, useMemo: useMemoFP } = React;
function Section({ title, defaultOpen = true, count, action, loading, children }) {
const [open, setOpen] = useStateFP(defaultOpen);
return (
{open &&
{children}
}
);
}
function CountedCheckbox({ label, checked, onChange, count, maxCount, color, dim }) {
const pct = maxCount > 0 ? (count / maxCount) * 100 : 0;
return (
);
}
function DateInput({ value, onChange, label }) {
return (
);
}
function FilterPanel({ state, setState, facets, facetsLoading, filteredCount, onReset }) {
// Lookup-map per facet-groep voor snelle count-aflezing.
// Tijdens loading (facets===null) tonen we 0 en dimmen via `dim`.
const lookupMap = useMemoFP(() => {
const out = {};
if (!facets) return out;
for (const k of ['type_besluit', 'activiteit_code', 'bg_naam', 'organisatietype', 'subject_taxonomie', 'publicatieblad']) {
out[k] = {};
const arr = facets[k] || [];
for (const f of arr) out[k][f.value] = f.count;
}
return out;
}, [facets]);
const maxMap = useMemoFP(() => {
const out = {};
for (const k of Object.keys(lookupMap)) {
out[k] = Math.max(1, ...Object.values(lookupMap[k]));
}
return out;
}, [lookupMap]);
const countOf = (group, value) => (lookupMap[group] && lookupMap[group][value]) || 0;
const maxOf = (group) => maxMap[group] || 1;
const toggleArr = (key, val) => {
const next = state[key].includes(val) ? state[key].filter((x) => x !== val) : [...state[key], val];
setState({ ...state, [key]: next });
};
const setField = (k, v) => setState({ ...state, [k]: v });
// BG-lijst komt nu uit facets (top 100 server-side). Gefilterd op zoektypje
// en aangevuld met al-geselecteerde waardes die buiten top-100 vallen,
// zodat een selectie niet zomaar uit het scherm verdwijnt.
const [bgQuery, setBgQuery] = useStateFP('');
const bgList = useMemoFP(() => {
const fromFacets = (facets && facets.bg_naam) || [];
const known = new Set(fromFacets.map((f) => f.value));
const extras = state.bg.filter((v) => !known.has(v)).map((v) => ({ value: v, count: 0 }));
const all = fromFacets.concat(extras);
const needle = bgQuery.toLowerCase();
return needle ? all.filter((f) => f.value.toLowerCase().includes(needle)) : all;
}, [facets, state.bg, bgQuery]);
const dim = !facets;
return (
);
}
// matchesQ wordt sinds de API-omzetting niet meer client-side gebruikt
// (de server doet ILIKE). Behouden voor compat als de mock-fallback weer
// wordt aangezet.
function matchesQ(r, q) {
const needle = (q || '').toLowerCase().trim();
if (!needle) return true;
return (
(r.koop_id || '').toLowerCase().includes(needle) ||
(r.zaaknummer_bg || '').toLowerCase().includes(needle) ||
(r.postcode || '').toLowerCase().replace(/\s+/g, '').includes(needle.replace(/\s+/g, '')) ||
(r.titel || '').toLowerCase().includes(needle) ||
(r.straatnaam || '').toLowerCase().includes(needle) ||
(r.woonplaats || '').toLowerCase().includes(needle)
);
}
Object.assign(window, { FilterPanel, matchesQ });