import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useRef, useEffect } from "react";
import "./EditorDropdown.css";
// Editor dropdown component
const EditorDropdown = ({ options, editor, buttonStyle, label, }) => {
    const [isOpen, setIsOpen] = useState(false);
    const dropdownRef = useRef(null);
    const [buttonWidth, setButtonWidth] = useState(0); // Start with 0 to calculate
    const [menuWidth, setMenuWidth] = useState(0); // Start with 0 to calculate
    useEffect(() => {
        // Calculate based on text length
        const span = document.createElement("span");
        span.style.visibility = "hidden";
        span.style.position = "absolute";
        span.style.whiteSpace = "nowrap";
        span.style.font = "13px system-ui, -apple-system, sans-serif"; // More consistent font
        span.style.padding = "0";
        span.style.margin = "0";
        document.body.appendChild(span);
        let maxWidth = 0;
        // Calculate width for all options (both menu and button will use the same width)
        options.forEach((option) => {
            span.textContent = option.label || "";
            const labelWidth = span.getBoundingClientRect().width;
            const iconWidth = option.icon ? 20 : 0;
            const iconSpacing = option.icon ? 8 : 0;
            // Calculate width for menu option
            const menuOptionWidth = labelWidth + iconWidth + iconSpacing + 24; // Icon + text + spacing + menu padding
            // Calculate width for button option (considering label prefix if present)
            let buttonOptionWidth;
            if (label) {
                span.textContent = `${label}: ${option.label}`;
                const textWidth = span.getBoundingClientRect().width;
                buttonOptionWidth = textWidth + iconWidth + iconSpacing + 30; // Text + icon + spacing + arrow + padding
            }
            else {
                buttonOptionWidth = labelWidth + iconWidth + iconSpacing + 30; // Text + icon + spacing + arrow + padding
            }
            // Use the maximum of both menu and button widths
            maxWidth = Math.max(maxWidth, menuOptionWidth, buttonOptionWidth);
        });
        // Fallback if no options
        if (options.length === 0) {
            maxWidth = 100;
        }
        // Set minimum width
        const minWidth = 80;
        const finalWidth = Math.max(maxWidth, minWidth);
        // Both button and menu use the same width
        setButtonWidth(finalWidth);
        setMenuWidth(finalWidth);
        document.body.removeChild(span);
    }, [options, label]);
    useEffect(() => {
        const handleClickOutside = (event) => {
            if (dropdownRef.current &&
                !dropdownRef.current.contains(event.target)) {
                setIsOpen(false);
            }
        };
        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, []);
    const toggleDropdown = (event) => {
        event.preventDefault();
        setIsOpen(!isOpen);
    };
    const handleSelect = (option) => (event) => {
        event.preventDefault();
        option.onSelect(editor, event);
        setIsOpen(false);
    };
    const currentOption = options.find((option) => option.isActive(editor)) || options[0];
    return (_jsxs("div", { ref: dropdownRef, className: "editor-dropdown", children: [_jsx("button", { onMouseDown: toggleDropdown, className: "editor-dropdown-button", style: {
                    width: buttonWidth > 0 ? `${buttonWidth}px` : "auto",
                    ...buttonStyle,
                }, children: label ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "editor-dropdown-button-content", children: [currentOption?.icon && (_jsx("span", { className: "editor-dropdown-button-icon", children: currentOption.icon })), _jsxs("span", { className: "editor-dropdown-button-text", children: [label, ": ", currentOption?.label] })] }), _jsx("span", { className: "editor-dropdown-button-arrow", children: "\u25BC" })] })) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "editor-dropdown-button-content", children: [currentOption?.icon && (_jsx("span", { className: "editor-dropdown-button-icon", children: currentOption.icon })), _jsx("span", { className: "editor-dropdown-button-text", children: currentOption?.label })] }), _jsx("span", { className: "editor-dropdown-button-arrow", children: "\u25BC" })] })) }), isOpen && (_jsx("div", { className: "editor-dropdown-menu", style: {
                    width: `${menuWidth}px`,
                }, children: options.map((option, index) => (_jsxs("div", { onMouseDown: handleSelect(option), className: `editor-dropdown-option ${option.isActive(editor) ? "active" : ""}`, style: option.style, children: [option.icon && (_jsx("span", { className: "editor-dropdown-option-icon", children: option.icon })), _jsx("span", { className: "editor-dropdown-option-text", children: option.label })] }, index))) }))] }));
};
export default EditorDropdown;
//# sourceMappingURL=EditorDropdown.js.map