"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToolbarListButton = ToolbarListButton;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const classname_1 = require("../classname.js");
const common_1 = require("../i18n/common/index.js");
const lodash_1 = require("../lodash.js");
const hooks_1 = require("../react-utils/hooks.js");
const PreviewTooltip_1 = require("./PreviewTooltip.js");
const ToolbarButton_1 = require("./ToolbarButton.js");
require("./ToolbarListButton.css");
const b = (0, classname_1.cn)('toolbar-list-button');
function ToolbarListButton({ className, editor, focus, onClick, icon, title, withArrow, data, alwaysActive, replaceActiveIcon, qa, qaMenu, qaActionDisabledPopover = 'g-md-toolbar-action-disabled-hint', disableHotkey, disablePreview, disableTooltip, }) {
    const [anchorElement, setAnchorElement] = (0, hooks_1.useElementState)();
    const [open, , hide, toggleOpen] = (0, hooks_1.useBooleanState)(false);
    const [popupItem, setPopupItem] = (0, react_1.useState)();
    const everyDisabled = alwaysActive ? false : data.every((item) => !item.isEnable(editor));
    const popupOpen = everyDisabled ? false : open;
    const shouldForceHide = open && !popupOpen;
    (0, react_1.useEffect)(() => {
        if (shouldForceHide) {
            hide();
        }
    }, [hide, shouldForceHide]);
    if (data.length === 0)
        return null;
    const activeItem = data.find((item) => item.isActive(editor) && !item.doNotActivateList);
    const someActive = alwaysActive ? false : Boolean(activeItem);
    if (replaceActiveIcon && someActive && activeItem) {
        icon = activeItem.icon;
    }
    const buttonContent = [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icon.data, size: icon.size ?? 16 }, 1)];
    if (withArrow) {
        buttonContent.push((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: '' }, 2));
        buttonContent.push((0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ChevronDown, size: 16 }, 3));
    }
    const titleText = (0, lodash_1.isFunction)(title) ? title() : title;
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolbarButton_1.ToolbarButtonView, { qa: qa, ref: setAnchorElement, active: someActive, enabled: !everyDisabled, title: title, className: b({ arrow: withArrow }, [className]), onClick: () => {
                    if (popupItem)
                        setPopupItem(undefined);
                    else
                        toggleOpen();
                }, disableTooltip: disableTooltip || popupOpen, children: buttonContent }), (0, jsx_runtime_1.jsx)(uikit_1.Popup, { anchorElement: anchorElement, open: popupOpen, onOpenChange: hide, children: (0, jsx_runtime_1.jsx)(uikit_1.Menu, { size: "l", className: b('menu'), qa: qaMenu, "data-toolbar-menu-for": titleText, children: data
                        .map((data) => {
                        const { id, title, icon, hotkey, isActive, isEnable, exec, hint, hintWhenDisabled, preview, } = data;
                        const titleText = (0, lodash_1.isFunction)(title) ? title() : title;
                        const hintText = (0, lodash_1.isFunction)(hint) ? hint() : hint;
                        const disabled = !isEnable(editor);
                        const hideHintWhenDisabled = hintWhenDisabled === false || !disabled;
                        const hintWhenDisabledText = typeof hintWhenDisabled === 'string'
                            ? hintWhenDisabled
                            : typeof hintWhenDisabled === 'function'
                                ? hintWhenDisabled()
                                : (0, common_1.i18n)('toolbar_action_disabled');
                        const handleClick = () => {
                            hide();
                            if (isPopupItem(data)) {
                                setPopupItem(data);
                            }
                            else {
                                setPopupItem(undefined);
                                focus();
                                exec(editor);
                                onClick?.(id);
                            }
                        };
                        return ((0, jsx_runtime_1.jsx)(uikit_1.Popover, { className: b('action-disabled-popover'), content: (0, jsx_runtime_1.jsx)("div", { className: b('action-disabled-tooltip'), children: hintWhenDisabledText }), placement: "left", modal: false, disabled: hideHintWhenDisabled, qa: qaActionDisabledPopover, children: (props, ref) => ((0, jsx_runtime_1.jsx)(PreviewTooltip_1.PreviewTooltip, { preview: preview, disabled: disablePreview, children: (0, jsx_runtime_1.jsx)(uikit_1.Menu.Item, { ref: ref, active: isActive(editor), disabled: !isEnable(editor), onClick: handleClick, iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icon.data, size: icon.size ?? 16 }), extraProps: {
                                        ...props,
                                        'aria-label': titleText,
                                    }, children: (0, jsx_runtime_1.jsxs)("div", { className: b('item'), children: [titleText, !disableHotkey && ((0, jsx_runtime_1.jsxs)("div", { className: b('extra'), children: [hotkey && (0, jsx_runtime_1.jsx)(uikit_1.Hotkey, { value: hotkey }), hintText && ((0, jsx_runtime_1.jsx)(uikit_1.HelpMark, { className: b('hint'), popoverProps: { modal: false }, children: hintText }))] }))] }) }, id) })) }, id));
                    })
                        .filter(Boolean) }) }), popupItem
                ? popupItem.renderPopup({
                    ...popupItem,
                    editor,
                    focus,
                    onClick,
                    anchorElement,
                    hide: () => setPopupItem(undefined),
                })
                : null] }));
}
function isPopupItem(item) {
    return Boolean(item.renderPopup);
}
//# sourceMappingURL=ToolbarListButton.js.map
