import React, { useEffect, useRef, useState, useMemo, } from "react";
import FacetValueRow from "./FacetValueRow";
import Icon from "../../Icon/Icon";
import IconProp from "../../../../Types/Icon/IconProp";
const DEFAULT_VISIBLE_COUNT = 5;
const SEARCH_THRESHOLD = 6;
const SEARCH_DEBOUNCE_MS = 300;
const FacetSection = (props) => {
    var _a;
    const [isExpanded, setIsExpanded] = useState(true);
    const [showAll, setShowAll] = useState(false);
    const [searchText, setSearchText] = useState("");
    const showSearch = props.onSearchChange !== undefined ||
        props.values.length >= SEARCH_THRESHOLD;
    const onSearchChange = props.onSearchChange;
    const lastEmittedRef = useRef(null);
    useEffect(() => {
        if (!onSearchChange) {
            return;
        }
        const trimmed = searchText.trim();
        if (lastEmittedRef.current === trimmed) {
            return;
        }
        const handle = setTimeout(() => {
            lastEmittedRef.current = trimmed;
            onSearchChange(trimmed);
        }, SEARCH_DEBOUNCE_MS);
        return () => {
            clearTimeout(handle);
        };
    }, [searchText, onSearchChange]);
    const filteredValues = useMemo(() => {
        if (!searchText.trim()) {
            return props.values;
        }
        const query = searchText.toLowerCase().trim();
        return props.values.filter((facet) => {
            var _a, _b, _c;
            const displayName = (_c = (_a = facet.displayName) !== null && _a !== void 0 ? _a : (_b = props.valueDisplayMap) === null || _b === void 0 ? void 0 : _b[facet.value]) !== null && _c !== void 0 ? _c : facet.value;
            return displayName.toLowerCase().includes(query);
        });
    }, [props.values, props.valueDisplayMap, searchText]);
    const visibleCount = (_a = props.initialVisibleCount) !== null && _a !== void 0 ? _a : DEFAULT_VISIBLE_COUNT;
    const displayedValues = searchText.trim()
        ? filteredValues
        : showAll
            ? filteredValues
            : filteredValues.slice(0, visibleCount);
    const hasMore = !searchText.trim() && filteredValues.length > visibleCount;
    const maxCount = props.values.length > 0
        ? Math.max(...props.values.map((v) => {
            return v.count;
        }))
        : 0;
    const activeCount = props.activeValues ? props.activeValues.size : 0;
    return (React.createElement("div", { className: "border-b border-gray-100 py-2" },
        React.createElement("button", { type: "button", className: "flex w-full items-center justify-between px-2 py-1 text-left", onClick: () => {
                setIsExpanded(!isExpanded);
            } },
            React.createElement("div", { className: "flex items-center gap-1.5" },
                React.createElement("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-gray-500" }, props.title),
                activeCount > 0 && (React.createElement("span", { className: "inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-indigo-100 px-1 text-[10px] font-semibold text-indigo-600" }, activeCount))),
            React.createElement(Icon, { icon: isExpanded ? IconProp.ChevronDown : IconProp.ChevronRight, className: "h-3 w-3 text-gray-400" })),
        isExpanded && (React.createElement("div", { className: "mt-1 px-1" },
            showSearch && (React.createElement("div", { className: "mb-1 px-1" },
                React.createElement("input", { type: "text", placeholder: `Search ${props.title.toLowerCase()}...`, value: searchText, onChange: (e) => {
                        setSearchText(e.target.value);
                    }, className: "w-full rounded border border-gray-200 bg-gray-50 px-2 py-1 text-[11px] text-gray-700 placeholder-gray-400 outline-none focus:border-indigo-300 focus:bg-white focus:ring-1 focus:ring-indigo-200" }))),
            displayedValues.map((facet) => {
                var _a, _b, _c, _d;
                return (React.createElement(FacetValueRow, { key: facet.value, value: facet.value, displayValue: (_a = facet.displayName) !== null && _a !== void 0 ? _a : (_b = props.valueDisplayMap) === null || _b === void 0 ? void 0 : _b[facet.value], count: facet.count, maxCount: maxCount, color: (_c = props.valueColorMap) === null || _c === void 0 ? void 0 : _c[facet.value], isActive: ((_d = props.activeValues) === null || _d === void 0 ? void 0 : _d.has(facet.value)) || false, onInclude: (value) => {
                        props.onIncludeValue(props.facetKey, value);
                    }, onExclude: (value) => {
                        props.onExcludeValue(props.facetKey, value);
                    } }));
            }),
            displayedValues.length === 0 && (React.createElement("p", { className: "px-1 py-2 text-[11px] text-gray-400" }, searchText.trim() ? "No matches found" : "No values found")),
            hasMore && (React.createElement("button", { type: "button", className: "mt-1 px-1 text-[11px] font-medium text-indigo-500 hover:text-indigo-600", onClick: () => {
                    setShowAll(!showAll);
                } }, showAll
                ? "Show less"
                : `+${props.values.length - visibleCount} more`))))));
};
export default FacetSection;
//# sourceMappingURL=FacetSection.js.map