import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Fragment, useEffect, useState } from 'react';
import { ChevronDown } from '@gravity-ui/icons';
import { ActionTooltip, Button, HelpMark, Hotkey, Icon, Menu, Popover, Popup, } from '@gravity-ui/uikit';
import { cn } from "../classname.js";
import { i18n } from "../i18n/common/index.js";
import { isFunction } from "../lodash.js";
import { useBooleanState, useElementState } from "../react-utils/hooks.js";
import { PreviewTooltip } from "./PreviewTooltip.js";
import { ToolbarTooltipDelay } from "./const.js";
import "./ToolbarListButton.css";
const b = cn('toolbar-list-button');
export function ToolbarListButton({ className, editor, focus, onClick, icon, title, withArrow, data, alwaysActive, }) {
    const [anchorElement, setAnchorElement] = useElementState();
    const [open, , hide, toggleOpen] = useBooleanState(false);
    const [popupItem, setPopupItem] = useState();
    const someActive = alwaysActive
        ? false
        : data.some((item) => item.isActive(editor) && !item.doNotActivateList);
    const everyDisabled = alwaysActive ? false : data.every((item) => !item.isEnable(editor));
    const popupOpen = everyDisabled ? false : open;
    const shouldForceHide = open && !popupOpen;
    useEffect(() => {
        if (shouldForceHide) {
            hide();
        }
    }, [hide, shouldForceHide]);
    if (data.length === 0)
        return null;
    const buttonContent = [_jsx(Icon, { data: icon.data, size: icon.size ?? 16 }, 1)];
    if (withArrow) {
        buttonContent.push(_jsx(Fragment, { children: '' }, 2));
        buttonContent.push(_jsx(Icon, { data: ChevronDown, size: 16 }, 3));
    }
    const titleText = isFunction(title) ? title() : title;
    return (_jsxs(_Fragment, { children: [_jsx(Popover, { className: b('action-disabled-popover'), content: _jsx("div", { className: b('action-disabled-tooltip'), children: i18n('toolbar_action_disabled') }), placement: 'bottom', disabled: !everyDisabled, children: _jsx(ActionTooltip, { title: titleText, disabled: Boolean(popupItem) || popupOpen, openDelay: ToolbarTooltipDelay.Open, closeDelay: ToolbarTooltipDelay.Close, children: _jsx(Button, { size: "m", ref: setAnchorElement, view: someActive || popupOpen ? 'normal' : 'flat', selected: someActive, disabled: everyDisabled, className: b({ arrow: withArrow }, [className]), onClick: () => {
                            if (popupItem)
                                setPopupItem(undefined);
                            else
                                toggleOpen();
                        }, children: buttonContent }) }) }), _jsx(Popup, { anchorElement: anchorElement, open: popupOpen, onOpenChange: hide, children: _jsx(Menu, { size: "l", className: b('menu'), children: data
                        .map((data) => {
                        const { id, title, icon, hotkey, isActive, isEnable, exec, hint, hintWhenDisabled, preview, } = data;
                        const titleText = isFunction(title) ? title() : title;
                        const hintText = isFunction(hint) ? hint() : hint;
                        const disabled = !isEnable(editor);
                        const hideHintWhenDisabled = hintWhenDisabled === false || !disabled;
                        const hintWhenDisabledText = typeof hintWhenDisabled === 'string'
                            ? hintWhenDisabled
                            : typeof hintWhenDisabled === 'function'
                                ? hintWhenDisabled()
                                : i18n('toolbar_action_disabled');
                        const handleClick = () => {
                            hide();
                            if (isPopupItem(data)) {
                                setPopupItem(data);
                            }
                            else {
                                setPopupItem(undefined);
                                focus();
                                exec(editor);
                                onClick?.(id);
                            }
                        };
                        return (_jsx(Popover, { className: b('action-disabled-popover'), content: _jsx("div", { className: b('action-disabled-tooltip'), children: hintWhenDisabledText }), placement: "left", modal: false, disabled: hideHintWhenDisabled, children: (props, ref) => (_jsx(PreviewTooltip, { preview: preview, children: _jsx(Menu.Item, { ref: ref, active: isActive(editor), disabled: !isEnable(editor), onClick: handleClick, iconStart: _jsx(Icon, { data: icon.data, size: icon.size ?? 16 }), extraProps: {
                                        ...props,
                                        'aria-label': titleText,
                                    }, children: _jsxs("div", { className: b('item'), children: [titleText, _jsxs("div", { className: b('extra'), children: [hotkey && _jsx(Hotkey, { value: hotkey }), hintText && (_jsx(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
