/**
 * DropdownPanel – floating panel for suggestions (primitive)
 *
 * Shows when isOpen; handles click-outside and Escape to close. Children = any composition
 * of SuggestionList, ProductGrid, etc. Position and z-index configurable.
 */
import React, { useRef, useEffect, useCallback } from "react";
import { useSuggestionsContext } from "./SuggestionsContext";
import { clsx } from "clsx";
import { ensureSeekoraStyles } from "../../styles/inject";
// Z-index scale for consistent layering
const Z_INDEX = {
    dropdown: 100,
    modal: 200,
    overlay: 300,
    tooltip: 50,
};
export function DropdownPanel({ children, position = "absolute", top = "100%", left = 0, right, width = "100%", maxHeight = "80vh", zIndex = Z_INDEX.dropdown, className, style, closeOnClickOutside = true, closeOnEscape = true, }) {
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    const { isOpen, close } = useSuggestionsContext();
    const panelRef = useRef(null);
    useEffect(() => {
        if (!closeOnEscape || !isOpen)
            return;
        const handleKeyDown = (e) => {
            if (e.key === "Escape")
                close();
        };
        window.addEventListener("keydown", handleKeyDown);
        return () => window.removeEventListener("keydown", handleKeyDown);
    }, [closeOnEscape, isOpen, close]);
    const handleClickOutside = useCallback((e) => {
        if (!closeOnClickOutside || !panelRef.current)
            return;
        const target = e.target;
        if (!panelRef.current.contains(target))
            close();
    }, [closeOnClickOutside, close]);
    useEffect(() => {
        if (!isOpen)
            return;
        document.addEventListener("mousedown", handleClickOutside);
        return () => document.removeEventListener("mousedown", handleClickOutside);
    }, [isOpen, handleClickOutside]);
    if (!isOpen)
        return null;
    const positionStyle = {
        position,
        top,
        left,
        right,
        width,
        maxHeight,
        zIndex,
    };
    return (React.createElement("div", { ref: panelRef, role: "listbox", className: clsx("seekora-dropdown-panel", className), style: { ...positionStyle, ...style } },
        React.createElement("div", { className: "seekora-dropdown-panel__inner" }, children)));
}
