import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useRef, useEffect } from "react";
export const SimpleDropdown = ({ options, label, showIconsOnly, isActive, title, }) => {
    const [isOpen, setIsOpen] = useState(false);
    const dropdownRef = useRef(null);
    // Close dropdown when clicking outside
    useEffect(() => {
        const handleClickOutside = (event) => {
            if (dropdownRef.current &&
                !dropdownRef.current.contains(event.target)) {
                setIsOpen(false);
            }
        };
        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, []);
    const activeOption = options.find((option) => option.isActive);
    const displayOption = activeOption || options[0];
    const handleToggle = (event) => {
        event.preventDefault();
        setIsOpen(!isOpen);
    };
    const handleOptionSelect = (option) => {
        option.onSelect();
        setIsOpen(false);
    };
    return (_jsxs("div", { className: "simple-dropdown", ref: dropdownRef, children: [_jsx("button", { className: `toolbar-dropdown-button ${isActive ? "active" : ""}`, onMouseDown: handleToggle, title: title || `${label || "Format"} options`, style: {
                    padding: "5px 10px",
                    margin: "0",
                    background: isActive ? "#ffffff" : "transparent",
                    border: "none",
                    borderRadius: "3px",
                    cursor: "pointer",
                    boxShadow: isActive ? "0 1px 2px rgba(0,0,0,0.1)" : "none",
                    display: "flex",
                    alignItems: "center",
                    minWidth: "120px",
                    justifyContent: "space-between",
                }, children: label ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "toolbar-dropdown-content", children: [label, ": ", displayOption?.label] }), _jsx("span", { className: "toolbar-dropdown-arrow", children: "\u25BC" })] })) : showIconsOnly ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "toolbar-dropdown-icon", children: displayOption?.icon }), _jsx("span", { className: "toolbar-dropdown-arrow", children: "\u25BC" })] })) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "toolbar-dropdown-icon", children: [displayOption?.icon && (_jsx("span", { className: "toolbar-dropdown-icon", children: displayOption.icon })), _jsx("span", { className: "toolbar-dropdown-content", children: displayOption?.label })] }), _jsx("span", { className: "toolbar-dropdown-arrow", children: "\u25BC" })] })) }), isOpen && (_jsx("div", { className: "dropdown-menu", style: {
                    position: "absolute",
                    top: "100%",
                    left: 0,
                    background: "white",
                    border: "1px solid #ddd",
                    borderRadius: "3px",
                    boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
                    zIndex: 1000,
                    minWidth: "120px",
                }, children: options.map((option) => (_jsxs("button", { className: `dropdown-item ${option.isActive ? "active" : ""}`, onClick: () => handleOptionSelect(option), style: {
                        display: "flex",
                        alignItems: "center",
                        width: "100%",
                        padding: "8px 12px",
                        border: "none",
                        background: option.isActive ? "#f0f0f0" : "transparent",
                        cursor: "pointer",
                        textAlign: "left",
                    }, onMouseEnter: (e) => {
                        if (!option.isActive) {
                            e.target.style.background = "#f8f8f8";
                        }
                    }, onMouseLeave: (e) => {
                        if (!option.isActive) {
                            e.target.style.background = "transparent";
                        }
                    }, children: [_jsx("span", { className: "dropdown-item-icon", style: { marginRight: "8px" }, children: option.icon }), _jsx("span", { className: "dropdown-item-label", children: option.label })] }, `${option.type}-${option.id}`))) }))] }));
};
export default SimpleDropdown;
//# sourceMappingURL=SimpleDropdown.js.map