import { h } from "@stencil/core";
export class ColumnSelector {
    constructor() {
        this.columnsUpdatedListener = ({ detail }) => this.onColumnsChanged(detail);
        this.columnToggleListener = ({ detail }) => this.onColumnToggle(detail);
        this.columnReorderListener = ({ detail }) => this.onColumnReorder(detail);
        this.columns = [];
    }
    componentWillLoad() {
        this.table = this.element.closest('anj-table');
    }
    componentDidLoad() {
        this.menu = this.element.querySelector('anj-column-menu ');
        this.table.addEventListener('anjColumnsDidLoad', this.columnsUpdatedListener);
        this.table.addEventListener('anjColumnsDidUpdate', this.columnsUpdatedListener);
        this.menu.addEventListener('anjColumnToggle', this.columnToggleListener);
        this.menu.addEventListener('anjReorder', this.columnReorderListener);
    }
    componentDidUnload() {
        this.table.removeEventListener('anjColumnsDidLoad', this.columnsUpdatedListener);
        this.table.removeEventListener('anjColumnsDidUpdate', this.columnsUpdatedListener);
        if (this.menu) {
            this.menu.removeEventListener('anjColumnToggle', this.columnToggleListener);
            this.menu.removeEventListener('anjReorder', this.columnReorderListener);
            this.menu = undefined;
        }
    }
    onColumnsChanged(columns) {
        this.columns = columns.filter(c => !c.internal && c.orderable && isNaN(c.groupIndex));
    }
    onColumnToggle(detail) {
        this.anjColumnToggle.emit(detail);
    }
    onColumnReorder(detail) {
        this.anjReorder.emit(detail);
    }
    render() {
        const [visible, hidden] = groupByVisible(this.columns);
        return (h("anj-dropdown", { placement: "bottom-end" },
            h("anj-button", { context: "icon", slot: "dropdown-toggle" },
                h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" },
                    h("path", { "fill-rule": "evenodd", d: "M16,7 L16,11 L20,11 L20,7 L16,7 Z M14,7 L10,7 L10,11 L14,11 L14,7 Z M8,7 L4,7 L4,11 L8,11 L8,7 Z M4,13 L4,17 L8,17 L8,13 L4,13 Z M10,17 L14,17 L14,13 L10,13 L10,17 Z M16,17 L20,17 L20,13 L16,13 L16,17 Z M22,7 L22,17 L22,19 L2,19 L2,17 L2,7 L2,5 L22,5 L22,7 Z" }))),
            h("anj-column-menu", { visibleColumns: visible, hiddenColumns: hidden })));
    }
    static get is() { return "anj-column-selector"; }
    static get states() { return {
        "columns": {}
    }; }
    static get events() { return [{
            "method": "anjColumnToggle",
            "name": "anjColumnToggle",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Fires when the column is toggled visible/hidden"
            },
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            }
        }, {
            "method": "anjReorder",
            "name": "anjReorder",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when the column has been changed"
            },
            "complexType": {
                "original": "ReorderData",
                "resolved": "ReorderData",
                "references": {
                    "ReorderData": {
                        "location": "import",
                        "path": "../table.types"
                    }
                }
            }
        }]; }
    static get elementRef() { return "element"; }
}
const groupByVisible = (columns) => {
    const firstHiddenIndex = columns.findIndex(c => !c.visible);
    return firstHiddenIndex > 0 ? [columns.slice(0, firstHiddenIndex), columns.slice(firstHiddenIndex)] : [columns, []];
};
