import { h } from "@stencil/core";
import Table from "@ecl/table";
export class EclTable {
    constructor() {
        this.elId = `ecl-table-${Math.random().toString(36).slice(2)}`;
        this.noScript = false;
        this.simple = false;
        this.zebra = false;
        this.sortable = false;
        this.parsedHeaders = [];
        this.parsedRows = [];
    }
    componentWillLoad() {
        var _a, _b;
        this.theme =
            (_b = (_a = document.documentElement.getAttribute('data-ecl-theme')) !== null && _a !== void 0 ? _a : this.theme) !== null && _b !== void 0 ? _b : 'ec';
        if (this.headers) {
            try {
                this.parsedHeaders = JSON.parse(this.headers);
            }
            catch (e) {
                console.error('[ecl-table] Invalid headers JSON', e);
            }
        }
        if (this.rows) {
            try {
                this.parsedRows = JSON.parse(this.rows);
            }
            catch (e) {
                console.error('[ecl-table] Invalid rows JSON', e);
            }
        }
    }
    componentDidRender() {
        if (!this.noScript && this.sortable) {
            window.ECL = window.ECL || {};
            ECL.Table = Table;
            const table = new Table(this.el.querySelector('.ecl-table'));
            table.init();
            const arrows = this.el.querySelectorAll('.ecl-table__arrow');
            if (arrows.length > 0) {
                arrows.forEach((arrow) => {
                    arrow.classList.add(`sc-ecl-table-${this.theme}`);
                    Array.from(arrow.children).forEach(child => {
                        child.classList.add(`sc-ecl-table-${this.theme}`);
                    });
                });
            }
        }
    }
    getClass() {
        const styleClasses = [
            'ecl-table',
            this.styleClass,
        ];
        if (this.simple) {
            styleClasses.push('ecl-table--simple');
        }
        if (this.zebra) {
            styleClasses.push('ecl-table--zebra');
        }
        if (this.colorMode) {
            styleClasses.push(`ecl-color-mode--${this.colorMode}`);
        }
        return styleClasses.join(' ');
    }
    renderHead() {
        if (!this.parsedHeaders.length)
            return null;
        let index = 1;
        return (h("thead", { class: "ecl-table__head" }, this.parsedHeaders.map(row => (h("tr", { class: "ecl-table__row" }, row.map(cell => {
            const id = `${this.elId}-header-${index++}`;
            const colSpan = cell.colspan ? Number(cell.colspan) : undefined;
            const rowSpan = cell.rowspan ? Number(cell.rowspan) : undefined;
            const hasColspan = !!colSpan;
            return (h("th", Object.assign({ id: id, class: "ecl-table__header", scope: hasColspan ? 'colgroup' : 'col', rowSpan: rowSpan, colSpan: colSpan, headers: cell.headers }, (this.sortable && !hasColspan
                ? { 'data-ecl-table-sort-toggle': '' }
                : {})), cell.label));
        }))))));
    }
    renderBody() {
        return (h("tbody", { class: "ecl-table__body" }, this.parsedRows.map(row => {
            var _a;
            return (h("tr", { class: `ecl-table__row ${(_a = row.extraClasses) !== null && _a !== void 0 ? _a : ''}` }, row.data.map(cell => (h("td", { class: {
                    'ecl-table__cell': true,
                    'ecl-table__cell--group': !!cell.group,
                }, "data-ecl-table-header": cell['data-ecl-table-header'], "data-ecl-table-header-group": cell['data-ecl-table-header-group'], headers: cell.headers }, cell.label)))));
        })));
    }
    render() {
        return (h("div", { key: '1028e8ef4c488b15b2008a02f5db01674a480f23', class: "ecl-table-responsive" }, h("table", Object.assign({ key: 'ff5cdcb6a2aaf04bd61311d082b2cdfe6c42b94d', id: this.elId, class: this.getClass() }, (this.sortable && {
            'data-ecl-table': '',
            'data-ecl-table-sort-label-asc': this.labelSortAscending,
            'data-ecl-table-sort-label-desc': this.labelSortDescending,
            'data-ecl-table-sort-label-default': this.labelSortDefault,
        })), this.caption && (h("caption", { key: '85cf3a22b5da807b4f9c01662038b70233206fb2', class: "ecl-table__caption" }, this.caption)), this.renderHead(), this.renderBody())));
    }
    static get is() { return "ecl-table"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "ec": ["./build/styles/ecl-table-ec.css"],
            "eu": ["./build/styles/ecl-table-eu.css"]
        };
    }
    static get styleUrls() {
        return {
            "ec": ["build/styles/ecl-table-ec.css"],
            "eu": ["build/styles/ecl-table-eu.css"]
        };
    }
    static get properties() {
        return {
            "elId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "el-id",
                "defaultValue": "`ecl-table-${Math.random().toString(36).slice(2)}`"
            },
            "theme": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "theme"
            },
            "noScript": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "no-script",
                "defaultValue": "false"
            },
            "colorMode": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "color-mode"
            },
            "headers": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "headers"
            },
            "rows": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "rows"
            },
            "styleClass": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "style-class"
            },
            "caption": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "caption"
            },
            "simple": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "simple",
                "defaultValue": "false"
            },
            "zebra": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "zebra",
                "defaultValue": "false"
            },
            "sortable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "sortable",
                "defaultValue": "false"
            },
            "labelSortAscending": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label-sort-ascending"
            },
            "labelSortDescending": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label-sort-descending"
            },
            "labelSortDefault": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label-sort-default"
            }
        };
    }
    static get states() {
        return {
            "parsedHeaders": {},
            "parsedRows": {}
        };
    }
    static get elementRef() { return "el"; }
}
