/**
 * MobileFilters Component
 *
 * A full-screen filter drawer optimized for mobile devices.
 * Slides in from the side or bottom to display facets and filters.
 * Styles are driven by BEM CSS classes in components.css (no inline styles).
 */
import React, { useEffect, useCallback, useRef } from "react";
import { useSearchContext } from "./SearchProvider";
import { useSearchState } from "../hooks/useSearchState";
import { clsx } from "clsx";
import { ensureSeekoraStyles } from "../styles/inject";
const DefaultCloseIcon = () => (React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" },
    React.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
    React.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })));
export const MobileFilters = ({ isOpen, onClose, onApply, title = "Filters", applyButtonText = "Apply", clearButtonText = "Clear all", position = "right", children, className, theme: customTheme, showHeader = true, showFooter = true, showFilterCount = true, closeOnBackdropClick = true, closeOnEscape = true, renderCloseIcon, }) => {
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    const { theme } = useSearchContext();
    const { refinements, clearRefinements } = useSearchState();
    const mobileFiltersTheme = customTheme || {};
    const drawerRef = useRef(null);
    // Lock body scroll when open
    useEffect(() => {
        if (typeof document === "undefined")
            return;
        if (isOpen) {
            document.body.style.overflow = "hidden";
        }
        else {
            document.body.style.overflow = "";
        }
        return () => {
            document.body.style.overflow = "";
        };
    }, [isOpen]);
    // Handle escape key
    useEffect(() => {
        if (!closeOnEscape || typeof document === "undefined")
            return;
        const handleKeyDown = (e) => {
            if (e.key === "Escape" && isOpen) {
                onClose();
            }
        };
        document.addEventListener("keydown", handleKeyDown);
        return () => document.removeEventListener("keydown", handleKeyDown);
    }, [isOpen, onClose, closeOnEscape]);
    // Focus trap
    useEffect(() => {
        if (typeof document === "undefined")
            return;
        if (isOpen && drawerRef.current) {
            const focusableElements = drawerRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
            const firstElement = focusableElements[0];
            const lastElement = focusableElements[focusableElements.length - 1];
            const handleTab = (e) => {
                if (e.key !== "Tab")
                    return;
                if (e.shiftKey) {
                    if (document.activeElement === firstElement) {
                        e.preventDefault();
                        lastElement?.focus();
                    }
                }
                else {
                    if (document.activeElement === lastElement) {
                        e.preventDefault();
                        firstElement?.focus();
                    }
                }
            };
            document.addEventListener("keydown", handleTab);
            firstElement?.focus();
            return () => document.removeEventListener("keydown", handleTab);
        }
    }, [isOpen]);
    const handleBackdropClick = useCallback(() => {
        if (closeOnBackdropClick) {
            onClose();
        }
    }, [closeOnBackdropClick, onClose]);
    const handleApply = useCallback(() => {
        if (onApply) {
            onApply();
        }
        onClose();
    }, [onApply, onClose]);
    const handleClear = useCallback(() => {
        clearRefinements(true);
    }, [clearRefinements]);
    if (!isOpen)
        return null;
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: clsx("seekora-mobile-filters-backdrop", mobileFiltersTheme.overlay), onClick: handleBackdropClick, "aria-hidden": "true" }),
        React.createElement("div", { ref: drawerRef, className: clsx("seekora-mobile-filters-drawer", mobileFiltersTheme.drawer, className), "data-position": position, "data-open": isOpen ? "true" : "false", role: "dialog", "aria-modal": "true", "aria-label": title },
            showHeader && (React.createElement("div", { className: clsx("seekora-mobile-filters-drawer__header", mobileFiltersTheme.header) },
                React.createElement("div", { className: "seekora-mobile-filters-drawer__title-row" },
                    React.createElement("h2", { className: clsx("seekora-mobile-filters-drawer__title", mobileFiltersTheme.title) }, title),
                    showFilterCount && refinements.length > 0 && (React.createElement("span", { className: clsx("seekora-mobile-filters-drawer__count", mobileFiltersTheme.filterCount) }, refinements.length))),
                React.createElement("button", { type: "button", onClick: onClose, className: clsx("seekora-mobile-filters-drawer__close", mobileFiltersTheme.closeButton), "aria-label": "Close filters" }, renderCloseIcon ? renderCloseIcon() : React.createElement(DefaultCloseIcon, null)))),
            React.createElement("div", { className: clsx("seekora-mobile-filters-drawer__body", mobileFiltersTheme.content) }, children),
            showFooter && (React.createElement("div", { className: clsx("seekora-mobile-filters-drawer__footer", mobileFiltersTheme.footer) },
                React.createElement("button", { type: "button", onClick: handleClear, className: clsx("seekora-mobile-filters-drawer__clear-btn", mobileFiltersTheme.clearButton) }, clearButtonText),
                React.createElement("button", { type: "button", onClick: handleApply, className: clsx("seekora-mobile-filters-drawer__apply-btn", mobileFiltersTheme.applyButton) },
                    applyButtonText,
                    showFilterCount &&
                        refinements.length > 0 &&
                        ` (${refinements.length})`))))));
};
export const MobileFiltersButton = ({ onClick, text = "Filters", showCount = true, className, style, facetsAvailable = true, }) => {
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    const { refinements } = useSearchState();
    if (!facetsAvailable)
        return null;
    return (React.createElement("button", { type: "button", onClick: onClick, className: clsx("seekora-mobile-filters-button", className), style: style, "aria-label": showCount && refinements.length > 0
            ? `${text} (${refinements.length} active)`
            : text },
        React.createElement("span", { className: "seekora-mobile-filters-button__icon", "aria-hidden": "true" }, "\u2630"),
        React.createElement("span", { className: "seekora-mobile-filters-button__label" }, text),
        showCount && refinements.length > 0 && (React.createElement("span", { className: "seekora-mobile-filters-button__badge", "aria-hidden": "true" }, refinements.length))));
};
