
import { localize } from '../../../../nls.js';
import { append, $ } from '../../../../base/browser/dom.js';
import { asCSSUrl } from '../../../../base/browser/cssValue.js';
import { Action } from '../../../../base/common/actions.js';
import { URI } from '../../../../base/common/uri.js';
import { ActionViewItem } from '../../../../base/browser/ui/actionbar/actionViewItems.js';

class ToggleReactionsAction extends Action {
    static {
        this.ID = "toolbar.toggle.pickReactions";
    }
    constructor(toggleDropdownMenu, title) {
        super(ToggleReactionsAction.ID, title || ( localize(7925, "Pick Reactions...")), "toggle-reactions", true);
        this._menuActions = [];
        this.toggleDropdownMenu = toggleDropdownMenu;
    }
    run() {
        this.toggleDropdownMenu();
        return Promise.resolve(true);
    }
    get menuActions() {
        return this._menuActions;
    }
    set menuActions(actions) {
        this._menuActions = actions;
    }
}
class ReactionActionViewItem extends ActionViewItem {
    constructor(action) {
        super(null, action, {});
    }
    updateLabel() {
        if (!this.label) {
            return;
        }
        const action = this.action;
        if (action.class) {
            this.label.classList.add(action.class);
        }
        if (!action.icon) {
            const reactionLabel = append(this.label, $("span.reaction-label"));
            reactionLabel.innerText = action.label;
        } else {
            const reactionIcon = append(this.label, $(".reaction-icon"));
            const uri = URI.revive(action.icon);
            reactionIcon.style.backgroundImage = asCSSUrl(uri);
        }
        if (action.count) {
            const reactionCount = append(this.label, $("span.reaction-count"));
            reactionCount.innerText = `${action.count}`;
        }
    }
    getTooltip() {
        const action = this.action;
        const toggleMessage = action.enabled ? ( localize(7926, "Toggle reaction, ")) : "";
        if (action.count === undefined) {
            return localize(7927, "{0}{1} reaction", toggleMessage, action.label);
        } else if (action.reactors === undefined || action.reactors.length === 0) {
            if (action.count === 1) {
                return localize(7928, "{0}1 reaction with {1}", toggleMessage, action.label);
            } else if (action.count > 1) {
                return localize(
                    7929,
                    "{0}{1} reactions with {2}",
                    toggleMessage,
                    action.count,
                    action.label
                );
            }
        } else {
            if (action.reactors.length <= 10 && action.reactors.length === action.count) {
                return localize(
                    7930,
                    "{0}{1} reacted with {2}",
                    toggleMessage,
                    action.reactors.join(", "),
                    action.label
                );
            } else if (action.count > 1) {
                const displayedReactors = action.reactors.slice(0, 10);
                return localize(
                    7931,
                    "{0}{1} and {2} more reacted with {3}",
                    toggleMessage,
                    displayedReactors.join(", "),
                    action.count - displayedReactors.length,
                    action.label
                );
            }
        }
        return undefined;
    }
}
class ReactionAction extends Action {
    static {
        this.ID = "toolbar.toggle.reaction";
    }
    constructor(
        id,
        label = "",
        cssClass = "",
        enabled = true,
        actionCallback,
        reactors,
        icon,
        count
    ) {
        super(ReactionAction.ID, label, cssClass, enabled, actionCallback);
        this.reactors = reactors;
        this.icon = icon;
        this.count = count;
    }
}

export { ReactionAction, ReactionActionViewItem, ToggleReactionsAction };
