/**
 * Breadcrumb Component
 *
 * Displays the current hierarchical navigation path
 * Allows users to navigate back to parent categories
 */
import React, { useMemo, useCallback, useEffect } from "react";
import { useSearchContext } from "./SearchProvider";
import { useSearchState } from "../hooks/useSearchState";
import { clsx } from "clsx";
import { ensureSeekoraStyles } from "../styles/inject";
export const Breadcrumb = ({ attributes, separator = " > ", rootLabel = "Home", renderItem, renderSeparator, onNavigate, className, style, theme: customTheme, items: itemsProp, }) => {
    const { theme, stateManager } = useSearchContext();
    const { refinements, removeRefinement, clearRefinements } = useSearchState();
    const breadcrumbTheme = customTheme || {};
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    // Build breadcrumb items from refinements
    const items = useMemo(() => {
        if (itemsProp)
            return itemsProp;
        const breadcrumbItems = [];
        // Find hierarchical refinements
        attributes.forEach((attr, level) => {
            const refinement = refinements.find((r) => r.field === attr);
            if (refinement) {
                // Parse the hierarchical value
                const parts = refinement.value.split(separator);
                parts.forEach((part, partIndex) => {
                    const fullPath = parts.slice(0, partIndex + 1).join(separator);
                    // Only add if not already in the list
                    if (!breadcrumbItems.some((item) => item.value === fullPath)) {
                        breadcrumbItems.push({
                            label: part,
                            value: fullPath,
                        });
                    }
                });
            }
        });
        return breadcrumbItems;
    }, [attributes, refinements, separator, itemsProp]);
    // Handle click on breadcrumb item
    const handleClick = useCallback((item, index) => {
        if (item === null) {
            // Clicked on root - clear all hierarchical refinements
            attributes.forEach((attr) => {
                refinements
                    .filter((r) => r.field === attr)
                    .forEach((r) => removeRefinement(r.field, r.value, false));
            });
            stateManager.search();
        }
        else {
            // Navigate to this level - remove refinements below this level
            const currentLevel = items.findIndex((i) => i.value === item.value);
            attributes.forEach((attr, attrLevel) => {
                refinements
                    .filter((r) => r.field === attr)
                    .forEach((r) => {
                    // Remove if this is below the clicked level
                    if (attrLevel > currentLevel ||
                        (attrLevel === currentLevel && r.value !== item.value)) {
                        removeRefinement(r.field, r.value, false);
                    }
                });
            });
            stateManager.search();
        }
        if (onNavigate) {
            onNavigate(item, index);
        }
    }, [attributes, refinements, removeRefinement, stateManager, items, onNavigate]);
    // Default separator renderer
    const defaultRenderSeparator = () => (React.createElement("span", { className: clsx("seekora-breadcrumb__separator", breadcrumbTheme.separator), "aria-hidden": "true" }, "\u203A"));
    // Don't render if no items
    if (items.length === 0) {
        return null;
    }
    return (React.createElement("nav", { className: clsx("seekora-breadcrumb", breadcrumbTheme.root, className), style: style, "aria-label": "Breadcrumb" },
        React.createElement("ol", { className: clsx("seekora-breadcrumb__list", breadcrumbTheme.list) },
            React.createElement("li", { className: clsx("seekora-breadcrumb__item", breadcrumbTheme.item) },
                React.createElement("button", { type: "button", onClick: () => handleClick(null, -1), className: clsx("seekora-breadcrumb__link", breadcrumbTheme.link) }, rootLabel)),
            items.map((item, index) => {
                const isLast = index === items.length - 1;
                return (React.createElement(React.Fragment, { key: item.value },
                    renderSeparator ? renderSeparator() : defaultRenderSeparator(),
                    React.createElement("li", { className: clsx("seekora-breadcrumb__item", breadcrumbTheme.item, isLast && breadcrumbTheme.current) }, renderItem ? (renderItem(item, index, isLast)) : isLast ? (React.createElement("span", { className: "seekora-breadcrumb__current", "aria-current": "page" }, item.label)) : (React.createElement("button", { type: "button", onClick: () => handleClick(item, index), className: clsx("seekora-breadcrumb__link", breadcrumbTheme.link) }, item.label)))));
            }))));
};
