/**
 * ClearRefinements Component
 *
 * A standalone button to clear all active refinements/filters
 * Integrates with SearchStateManager for automatic state sync
 */
import React, { useEffect, useMemo } from "react";
import { useSearchState } from "../hooks/useSearchState";
import { clsx } from "clsx";
import { ensureSeekoraStyles } from "../styles/inject";
export const ClearRefinements = ({ clearsQuery = false, resetLabel = "Clear all filters", disabledLabel = "No filters applied", variant = "button", includedFields, excludedFields = [], onClear, renderButton, className, style, theme: customTheme, hideWhenEmpty = false, }) => {
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    const { query, refinements, clearRefinements, setQuery, removeRefinement } = useSearchState();
    const clearTheme = customTheme || {};
    // Filter refinements based on included/excluded fields
    const relevantRefinements = useMemo(() => {
        return refinements.filter((r) => {
            if (excludedFields.includes(r.field))
                return false;
            if (includedFields && !includedFields.includes(r.field))
                return false;
            return true;
        });
    }, [refinements, includedFields, excludedFields]);
    const canClear = relevantRefinements.length > 0 || (clearsQuery && query.length > 0);
    const handleClick = () => {
        if (!canClear)
            return;
        // Clear relevant refinements
        if (includedFields || excludedFields.length > 0) {
            // Clear only specific refinements
            relevantRefinements.forEach((r) => {
                removeRefinement(r.field, r.value, false);
            });
            // Trigger search after all removals
            if (relevantRefinements.length > 0) {
                clearRefinements(false); // This will trigger the search
            }
        }
        else {
            // Clear all refinements
            clearRefinements(!clearsQuery); // Trigger search if not also clearing query
        }
        // Clear query if requested
        if (clearsQuery && query.length > 0) {
            setQuery("", true);
        }
        // Call the callback
        if (onClear) {
            onClear();
        }
    };
    // Hide when empty if requested
    if (hideWhenEmpty && !canClear) {
        return null;
    }
    // Custom render function
    if (renderButton) {
        return (React.createElement("div", { className: clsx(clearTheme.root, className), style: style }, renderButton({
            canClear,
            onClick: handleClick,
            disabled: !canClear,
        })));
    }
    return (React.createElement("div", { className: clsx(clearTheme.root, className), style: style },
        React.createElement("button", { type: "button", onClick: handleClick, disabled: !canClear, "data-variant": variant !== "button" ? variant : undefined, className: clsx("seekora-clear-refinements", clearTheme.button, !canClear && clearTheme.buttonDisabled), "aria-label": canClear ? resetLabel : disabledLabel }, resetLabel)));
};
