/**
 * 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';
const BORDER_RADIUS = {
    sm: 4,
    md: 6,
    lg: 8,
    full: 9999,
};
// 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, }) {
    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 panelStyle = {
        position,
        top,
        left,
        right,
        width,
        maxHeight,
        zIndex,
        overflow: 'auto',
        backgroundColor: 'var(--seekora-bg-surface, #fff)',
        border: '1px solid var(--seekora-border-color, #e5e7eb)',
        borderRadius: `var(--seekora-border-radius, ${BORDER_RADIUS.md}px)`,
        boxShadow: 'var(--seekora-shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05))',
        marginTop: 4,
    };
    return (React.createElement("div", { ref: panelRef, role: "listbox", className: clsx('seekora-suggestions-dropdown-panel', className), style: { ...panelStyle, ...style } }, children));
}
