import { r as registerInstance, d as createEvent, h, c as getElement } from './core-1db051ba.js';
import './utils-3aef1637.js';
import { T as Tunnel } from './i18n.provider-15e382c4.js';
import { T as TableClasses } from './table.utils-110cc530.js';
import './column.renderer-aa0851f6.js';
import { a as Tr, R as Row } from './row-e20e9819.js';

var Translations;
(function (Translations) {
    Translations["EXPAND_GROUP"] = "Expand Group";
    Translations["COLLAPSE_GROUP"] = "Collapse Group";
})(Translations || (Translations = {}));
const RowGrouping = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.columnsUpdatedListener = ({ detail }) => this.onColumnsChanged(detail);
        /**
         * If true, expanded will be the default state.
         * Defaults to false.
         */
        this.autoExpand = false;
        /**
         * Renderer to use for row content when the selected conditions are met
         */
        this.row = this.renderGroup.bind(this);
        /**
         * Rules to use for using this as a renderer
         */
        this.when = this.useAsRenderer.bind(this);
        this.anjColumnGroupChange = createEvent(this, "anjColumnGroupChange", 7);
        this.anjRowControlDidLoad = createEvent(this, "anjRowControlDidLoad", 7);
    }
    componentWillLoad() {
        this.table = this.element.closest('anj-table');
    }
    componentDidLoad() {
        this.anjRowControlDidLoad.emit();
        this.table.addEventListener('anjColumnsDidLoad', this.columnsUpdatedListener);
        this.table.addEventListener('anjColumnsDidUpdate', this.columnsUpdatedListener);
    }
    componentDidUnload() {
        this.table.removeEventListener('anjColumnsDidLoad', this.columnsUpdatedListener);
        this.table.removeEventListener('anjColumnsDidUpdate', this.columnsUpdatedListener);
    }
    onColumnsChanged(columns) {
        this.columns = columns.filter(c => c.groupIndex > -1).sort((a, b) => a.groupIndex - b.groupIndex);
    }
    renderGroup(props) {
        const attrs = { colspan: props.columns.length - 1 };
        const group = this.findGroup(props.row);
        return [
            h(Tr, { classList: TableClasses.rowGroupHeader }, h("td", Object.assign({}, attrs, { class: TableClasses.rowGroupHeader }), h("anj-headline", null, h("h4", null, `${group.headerRenderer(group.field, group.caption)}: ${props.row[group.field]}`))), h("td", null, this.groupControl(group, props.row))),
            this.isExpanded(group.groupKeys, props.row[group.groupKey]) && this.hasNestedGroup(props.row[group.groupKey])
                ? props.row[group.groupKey].map((row, i) => {
                    return h(Row, Object.assign({}, Object.assign(props, { rowIndex: props.rowIndex + i, row })));
                }) : undefined
        ];
    }
    groupClick(column, key) {
        column.groupKeys = column.groupKeys ? column.groupKeys.includes(key)
            ? column.groupKeys.filter(k => k !== key) : column.groupKeys.concat([key])
            : [key];
        this.anjColumnGroupChange.emit(column);
    }
    useAsRenderer(data) {
        return !!this.findGroup(data);
    }
    findGroup(data) {
        return this.columns.find(c => data[c.groupKey]);
    }
    hasNestedGroup(maybeGroup) {
        return maybeGroup && Array.isArray(maybeGroup) && maybeGroup.length > 0 && typeof maybeGroup[0] === 'object';
    }
    groupControl(column, row) {
        const key = row[column.field];
        const expanded = this.isExpanded(column.groupKeys, key);
        const label = expanded
            ? `${this.translator(Translations.EXPAND_GROUP)}: ${key}`
            : `${this.translator(Translations.COLLAPSE_GROUP)}: ${key}`;
        const path = expanded ? 'M7.41 18.59L8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z'
            : 'M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z';
        return (h("anj-button", { ariaLabel: label, context: "free", onClick: () => this.groupClick(column, key) }, h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, h("path", { d: path }))));
    }
    isExpanded(keys, key) {
        if (!keys)
            return this.autoExpand;
        return this.autoExpand ? !keys.includes(key) : keys.includes(key);
    }
    render() {
        return h("anj-column", { internal: true, pinned: "right", editable: false, filterable: false, sizable: false, pinnable: false, orderable: false, selectable: false, sortable: false, name: "row-group-controls", width: "56px", cellRenderer: () => '', headerRenderer: () => '' });
    }
    get element() { return getElement(this); }
    static get style() { return ".anj-table .anj-col-row-group-controls.anj-header-cell .anj-column-caption {\n  overflow: visible;\n  padding-right: 0;\n}\n.anj-table .anj-col-row-group-controls anj-button {\n  margin: -0.75rem;\n}\n.anj-table .anj-row-group-header anj-headline h4 {\n  color: var(--anj-neutral-dark);\n}"; }
};
Tunnel.injectProps(RowGrouping, ['translator']);

export { RowGrouping as anj_row_grouping };
