"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { createPortal } from "react-dom";
import * as __rspack_external_react from "react";
const DropDownContext = /*#__PURE__*/ __rspack_external_react.createContext(null);
function DropDownItem({ children, className, onClick, title }) {
    const ref = (0, __rspack_external_react.useRef)(null);
    const dropDownContext = __rspack_external_react.useContext(DropDownContext);
    if (null === dropDownContext) throw new Error('DropDownItem must be used within a DropDown');
    const { registerItem } = dropDownContext;
    (0, __rspack_external_react.useEffect)(()=>{
        if (ref?.current != null) registerItem(ref);
    }, [
        registerItem
    ]);
    return /*#__PURE__*/ jsx("button", {
        className: className,
        onClick: onClick,
        ref: ref,
        title: title,
        type: "button",
        children: children
    });
}
function DropDownItems({ children, dropDownRef, onClose }) {
    const [items, setItems] = (0, __rspack_external_react.useState)();
    const [highlightedItem, setHighlightedItem] = (0, __rspack_external_react.useState)();
    const registerItem = (0, __rspack_external_react.useCallback)((itemRef)=>{
        setItems((prev)=>null != prev ? [
                ...prev,
                itemRef
            ] : [
                itemRef
            ]);
    }, []);
    const handleKeyDown = (event)=>{
        if (null == items) return;
        const key = event.key;
        if ([
            'Escape',
            'ArrowUp',
            'ArrowDown',
            'Tab'
        ].includes(key)) event.preventDefault();
        if ('Escape' === key || 'Tab' === key) onClose();
        else if ('ArrowUp' === key) setHighlightedItem((prev)=>{
            if (null == prev) return items[0];
            const index = items.indexOf(prev) - 1;
            return items[-1 === index ? items.length - 1 : index];
        });
        else if ('ArrowDown' === key) setHighlightedItem((prev)=>{
            if (null == prev) return items[0];
            return items[items.indexOf(prev) + 1];
        });
    };
    const contextValue = (0, __rspack_external_react.useMemo)(()=>({
            registerItem
        }), [
        registerItem
    ]);
    (0, __rspack_external_react.useEffect)(()=>{
        if (null != items && null == highlightedItem) setHighlightedItem(items[0]);
        if (highlightedItem?.current != null) highlightedItem.current.focus();
    }, [
        items,
        highlightedItem
    ]);
    return /*#__PURE__*/ jsx(DropDownContext.Provider, {
        value: contextValue,
        children: /*#__PURE__*/ jsx("div", {
            className: "dropdown",
            ref: dropDownRef,
            onKeyDown: handleKeyDown,
            role: "menu",
            tabIndex: -1,
            children: children
        })
    });
}
function DropDown({ disabled = false, buttonLabel, buttonAriaLabel, buttonClassName, buttonIconClassName, children, stopCloseOnClickSelf }) {
    const dropDownRef = (0, __rspack_external_react.useRef)(null);
    const buttonRef = (0, __rspack_external_react.useRef)(null);
    const [showDropDown, setShowDropDown] = (0, __rspack_external_react.useState)(false);
    const handleClose = ()=>{
        setShowDropDown(false);
        if (buttonRef?.current != null) buttonRef.current.focus();
    };
    (0, __rspack_external_react.useEffect)(()=>{
        const button = buttonRef.current;
        const dropDown = dropDownRef.current;
        if (showDropDown && null !== button && null !== dropDown) {
            const { top, left } = button.getBoundingClientRect();
            dropDown.style.top = `${top + 40}px`;
            dropDown.style.left = `${Math.min(left, window.innerWidth - dropDown.offsetWidth - 20)}px`;
        }
    }, [
        showDropDown
    ]);
    (0, __rspack_external_react.useEffect)(()=>{
        const button = buttonRef.current;
        if (null !== button && showDropDown) {
            const handle = (event)=>{
                const target = event.target;
                if (null != stopCloseOnClickSelf) {
                    if (dropDownRef?.current?.contains(target)) return;
                }
                if (!button.contains(target)) setShowDropDown(false);
            };
            document.addEventListener('click', handle);
            return ()=>{
                document.removeEventListener('click', handle);
            };
        }
    }, [
        showDropDown,
        stopCloseOnClickSelf
    ]);
    return /*#__PURE__*/ jsxs(Fragment, {
        children: [
            /*#__PURE__*/ jsxs("button", {
                type: "button",
                disabled: disabled,
                "aria-label": buttonAriaLabel ?? buttonLabel,
                className: buttonClassName,
                onClick: ()=>{
                    setShowDropDown(!showDropDown);
                },
                ref: buttonRef,
                children: [
                    null != buttonIconClassName && /*#__PURE__*/ jsx("span", {
                        className: buttonIconClassName
                    }),
                    null != buttonLabel && /*#__PURE__*/ jsx("span", {
                        className: "text dropdown-button-text",
                        children: buttonLabel
                    }),
                    /*#__PURE__*/ jsx("i", {
                        className: "chevron-down"
                    })
                ]
            }),
            showDropDown && /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(DropDownItems, {
                dropDownRef: dropDownRef,
                onClose: handleClose,
                children: children
            }), document.body)
        ]
    });
}
export { DropDown, DropDownItem };
