import { jsx as _jsx } from "react/jsx-runtime";
import { cn } from "../../../classname.js";
import { Colors } from "../../../extensions/index.js";
import { i18n } from "../../../i18n/menubar/index.js";
import { icons } from "../../config/icons.js";
import { ToolbarButtonWithPopupMenu, } from "../ToolbarButtonWithPopupMenu.js";
import "./ToolbarColors.css";
const b = cn('toolbar-colors');
const textColorIcon = icons.textColor;
export const ToolbarColors = (props) => {
    const { exec, onClick, enable, currentColor, withDefault } = props;
    const isDefault = currentColor === undefined;
    const onItemClick = (color) => () => {
        // do not exec when current color is default and clicked to default item
        if (!(isDefault && color === ''))
            exec(color);
        onClick?.('colorify', { color: color === '' ? 'default' : color });
    };
    const items = [
        Colors.Gray,
        Colors.Yellow,
        Colors.Orange,
        Colors.Red,
        Colors.Green,
        Colors.Blue,
        Colors.Violet,
    ].map((color) => ({
        id: color,
        icon: textColorIcon.data,
        iconSize: textColorIcon.size ?? 16,
        text: i18n(`colorify__color_${color}`),
        iconClassname: b('item-icon', { color }),
        action: {
            run: onItemClick(color),
            isEnable: () => Boolean(enable),
            isActive: () => color === currentColor,
            meta() { },
        },
        group: i18n(`colorify__group_text`),
    }));
    if (withDefault) {
        items.unshift({
            id: 'default',
            icon: textColorIcon.data,
            iconSize: textColorIcon.size ?? 16,
            text: i18n(`colorify__color_default`),
            iconClassname: b('item-icon', { color: 'default' }),
            group: i18n(`colorify__group_text`),
            ignoreActive: true,
            action: {
                run: onItemClick(''),
                isEnable: () => Boolean(enable),
                isActive: () => isDefault,
                meta() { },
            },
        });
    }
    return (_jsx(ToolbarButtonWithPopupMenu, { qa: props.qa, focus: props.focus, onClick: props.onClick, className: props.className, qaMenu: "g-md-toolbar-menu", title: i18n('colorify'), menuItems: items, icon: textColorIcon, _selectionType: "light", iconClassName: b('menu-icon', { color: currentColor }), chevronIconClassName: b('chevron-icon', { color: currentColor }), "data-selected-color": currentColor ?? 'default' }));
};
//# sourceMappingURL=ToolbarColors.js.map
