import { ButtonType } from '../../enums/button-type.enum';
export class EdelTableComponent {
    constructor() {
        this.rows = [];
        this.columns = [];
        this.actions = [];
        this.actionMenu = false;
    }
    render() {
        return this.rows.length > 0 && this.columns.length > 0 ? (h("table", { class: "table table--no-border-top" },
            h("thead", null,
                h("tr", { class: "table-row table-row--head" },
                    this.renderTableHead(),
                    this.renderActionMenuHead())),
            h("tbody", null, this.rows.map(row => (h("tr", { class: "table-row" },
                this.renderTableRow(row),
                this.renderActionMenuButtons(row))))))) : null;
    }
    renderTableHead() {
        return this.columns.map(column => (h("th", { class: "table-head" }, column.title)));
    }
    renderActionMenuButtons(row) {
        if (this.actionMenu) {
            return (h("td", { class: "table-cell" }, this.actions.map(action => (h("edel-button", { type: ButtonType.default, plain: true, slim: true, label: action.label, onClick: () => this.handleEvent(action.eventName, row.context.itemOrType) })))));
        }
    }
    renderActionMenuHead() {
        if (this.actionMenu) {
            return h("th", { class: "table-head" });
        }
    }
    renderTableRow(row) {
        return this.columns.map(column => (h("td", { class: "table-cell" }, this.renderCellContents(column, row))));
    }
    handleEvent(action, data) {
        this.emit.emit({ action, data });
    }
    renderCellContents(column, row) {
        const cellValue = row.data[column.property || column.title];
        return (h("concrete-visual", { visual: column.visual, context: row.context, concrete: cellValue }));
    }
    static get is() { return "edel-table"; }
    static get properties() { return {
        "actionMenu": {
            "type": Boolean,
            "attr": "action-menu"
        },
        "actions": {
            "type": "Any",
            "attr": "actions"
        },
        "columns": {
            "type": "Any",
            "attr": "columns"
        },
        "rows": {
            "type": "Any",
            "attr": "rows"
        }
    }; }
    static get events() { return [{
            "name": "emit",
            "method": "emit",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
}
