import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from 'react';
import { ActionTooltip, Button, Icon, Popover, setRef } from '@gravity-ui/uikit';
import { cn } from "../classname.js";
import { i18n } from "../i18n/common/index.js";
import { isFunction } from "../lodash.js";
import { ToolbarTooltipDelay } from "./const.js";
import "./ToolbarButton.css";
const b = cn('toolbar-button');
const DEFAULT_ICON_SIZE = 16;
export const ToolbarButtonView = forwardRef(function ToolbarButtonView({ title, hint, hotkey, hintWhenDisabled, active, enabled, onClick, className, qa, id, disableTooltip, ...props }, ref) {
    const disabled = !active && !enabled;
    const titleText = isFunction(title) ? title() : title;
    const hintText = isFunction(hint) ? hint() : hint;
    const hideHintWhenDisabled = hintWhenDisabled === false || !disabled;
    const hintWhenDisabledText = typeof hintWhenDisabled === 'string'
        ? hintWhenDisabled
        : typeof hintWhenDisabled === 'function'
            ? hintWhenDisabled()
            : i18n('toolbar_action_disabled');
    return (_jsx(Popover, { content: _jsx("div", { className: b('action-disabled-tooltip'), children: hintWhenDisabledText }), disabled: hideHintWhenDisabled, placement: ['bottom'], children: (_, refForPopover) => (_jsx(ActionTooltip, { openDelay: ToolbarTooltipDelay.Open, closeDelay: ToolbarTooltipDelay.Close, description: hintText, title: titleText, hotkey: hotkey, disabled: disableTooltip, children: (__, refForTooltip) => (_jsx(Button, { qa: qa, size: "m", ref: (elem) => {
                    setRef(ref, elem);
                    setRef(refForPopover, elem);
                    setRef(refForTooltip, elem);
                }, selected: active, disabled: disabled, view: active ? 'normal' : 'flat', onClick: onClick, className: b(null, [className]), "aria-label": titleText, "data-toolbar-item": id, children: 'icon' in props ? (_jsx(Icon, { data: props.icon.data, size: props.icon.size ?? DEFAULT_ICON_SIZE })) : (props.children) })) })) }));
});
export function ToolbarButton(props) {
    const { id, editor, focus, isActive, isEnable, exec, onClick } = props;
    const active = isActive(editor);
    const enabled = isEnable(editor);
    const handleClick = () => {
        focus();
        exec(editor);
        onClick?.(id);
    };
    return _jsx(ToolbarButtonView, { ...props, active: active, enabled: enabled, onClick: handleClick });
}
//# sourceMappingURL=ToolbarButton.js.map
