import { r as registerInstance, d as createEvent, h, c as getElement } from './core-1db051ba.js';
import { e as debounce } from './utils-3aef1637.js';
import { T as Tunnel } from './i18n.provider-15e382c4.js';

var Translations;
(function (Translations) {
    Translations["MORE_ROW_ACTIONS"] = "More row actions";
    Translations["MORE_TABLE_ACTIONS"] = "More table actions";
})(Translations || (Translations = {}));
const Actions = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * The number of actions between 0 - 3 to be displayed as "primary" actions at the row level. That is not in the dropdown.
         */
        this.maxPrimaryRow = 0;
        /**
         * The number of actions between 0 - 3 to be displayed as "primary" actions at the table level. That is not in the dropdown.
         */
        this.maxPrimaryTable = 0;
        this.anjActionSelect = createEvent(this, "anjActionSelect", 7);
    }
    onContentChange() {
        this.actions = Array.from(this.element.querySelectorAll('anj-action'));
    }
    componentDidLoad() {
        this.onContentChange = debounce(this.onContentChange.bind(this));
    }
    onSelected(action, row) {
        this.anjActionSelect.emit({ action, row });
    }
    getActions() {
        const actions = this.actions || Array.from(this.element.querySelectorAll('anj-action'));
        return [normalizeActions(actions.filter(a => !!a.scope)), normalizeActions(actions.filter(a => !a.scope))];
    }
    calculateOffset(primary, secondary) {
        // if there are no primary actions, just account for the dropdown
        if (!primary || primary.length === 0) {
            return 1;
        }
        // if there's overflow account for primary actions and the dropdown
        if (secondary && secondary.length > 0) {
            const max = primary.length < this.maxPrimaryRow ? primary.length : this.maxPrimaryRow;
            return max + 1;
        }
        // otherwise account for just the primary actions
        return primary.length;
    }
    tableActions(actions) {
        const [primary, secondary] = groupActions(actions, this.maxPrimaryTable);
        return [
            primary ? this.primaryActions(primary) : undefined,
            secondary ? this.secondaryActions(secondary) : undefined
        ];
    }
    rowActions(actions) {
        const [primary, secondary] = groupActions(actions, this.maxPrimaryRow);
        const offset = this.calculateOffset(primary, secondary);
        return h("anj-column", { filterable: false, internal: true, editable: false, pinned: "right", sizable: false, name: "row-actions", overflow: "cell", selectable: false, width: `${offset * 40 + (offset * 2 - 1)}px`, cellRenderer: (data, col) => this.cell(primary, secondary, data, col), headerRenderer: () => undefined });
    }
    cell(primary, secondary, data, col) {
        if (!col) {
            return;
        }
        return [
            primary ? this.primaryActions(primary, data) : undefined,
            secondary ? this.secondaryActions(secondary, data) : undefined
        ];
    }
    primaryActions(actions, data) {
        return actions.filter(a => isHidden(a, data)).map(a => h("anj-button", { key: `${a.icon}-${a.scope}`, context: "icon", ariaLabel: a.caption, onClick: () => this.onSelected(a, data), disabled: actionDisabled(a, data), title: a.caption }, h("anj-icon", { slot: "icon-only" }, a.iconFn ? a.iconFn(a, data) : a.icon)));
    }
    secondaryActions(actions, data) {
        const caption = this.translator(data ? Translations.MORE_ROW_ACTIONS : Translations.MORE_TABLE_ACTIONS);
        return (h("anj-dropdown", { placement: data ? 'left-start' : 'bottom-end', arrow: !data, onAnjDropdownSelect: ({ detail }) => this.onSelected(detail, data) }, h("anj-button", { context: "icon", slot: "dropdown-toggle", ariaLabel: caption, title: caption }, h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, h("path", { d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }))), actions.filter(a => isHidden(a, data))
            .map(a => h("anj-dropdown-item", { payload: a, disabled: actionDisabled(a, data) }, a.caption))));
    }
    render() {
        const [tableActions, rowActions] = this.getActions();
        return [
            tableActions ? this.tableActions(tableActions) : undefined,
            rowActions ? this.rowActions(rowActions) : undefined
        ];
    }
    get element() { return getElement(this); }
    static get style() { return ".anj-table .anj-col-row-actions {\n  padding-left: 0;\n  padding-right: 0;\n  text-align: right;\n}\n.anj-table .anj-col-row-actions.anj-cell {\n  z-index: 1;\n}\n\nanj-scroller:not(.anj-overflow-x) tbody tr .anj-col-row-actions anj-button {\n  opacity: 0;\n  -webkit-transition: opacity 0.2s ease;\n  transition: opacity 0.2s ease;\n}\nanj-scroller:not(.anj-overflow-x) tbody tr .anj-col-row-actions anj-button:focus, anj-scroller:not(.anj-overflow-x) tbody tr .anj-col-row-actions anj-button[active] {\n  opacity: 1;\n}\nanj-scroller:not(.anj-overflow-x) tbody tr:hover .anj-col-row-actions anj-button, anj-scroller:not(.anj-overflow-x) tbody tr:focus-within .anj-col-row-actions anj-button {\n  opacity: 1;\n}"; }
};
Tunnel.injectProps(Actions, ['translator']);
const actionDisabled = (action, row) => {
    return action.disabled ? action.disabled : action.disabledFn ? action.disabledFn(action, row) : false;
};
const normalizeActions = (actions) => {
    return actions.length === 0 ? undefined : actions;
};
const groupActions = (actions, max) => {
    const primary = actions.filter(a => !a.hidden && (a.icon || a.iconFn)).slice(0, max);
    const secondary = actions.filter(a => (!a.hidden && !primary.includes(a)));
    return [normalizeActions(primary), normalizeActions(secondary)];
};
const isHidden = (action, data) => {
    return (!data || !action.hiddenFn || action.hidden) ? true : !action.hiddenFn(action, data);
};

export { Actions as anj_actions };
