/*!
 * Built by ShiftSoftware
 * Copyright (c)
 */
import { h } from "@stencil/core";
import cn from "../../global/lib/cn";
import { ArrowIcon } from "../../global/assets/arrow-icon";
export class InformationTable {
    constructor() {
        this.rows = [];
        this.templateRow = {};
        this.isLoading = false;
        this.showHeader = true;
        this.isRaw = false;
        this.stripCells = true;
        this.customSkeleton = false;
        this.size = 'default';
        this.allowAutoWidth = false;
        this.expandColumnWidth = 48;
        this.expandUsingEntireRow = false;
        this.allowMultipleExpanded = false;
        this.scrollExpandedIntoView = false;
        this.tableRowHeight = 'auto';
        this.expandedRowIndexes = [];
        this.getTableWidth = () => {
            var _a;
            if (this.allowAutoWidth)
                return 0;
            const headersWidth = ((_a = this.headers) === null || _a === void 0 ? void 0 : _a.reduce((sum, h) => sum + (typeof (h === null || h === void 0 ? void 0 : h.width) === 'number' ? h.width : 0), 0)) || 0;
            return headersWidth + (this.subRowRenderer ? this.expandColumnWidth : 0);
        };
        this.isExpanded = (rowIndex) => this.expandedRowIndexes.includes(rowIndex);
        this.toggleExpanded = (rowIndex) => {
            const currentlyExpanded = this.isExpanded(rowIndex);
            if (currentlyExpanded) {
                this.expandedRowIndexes = this.expandedRowIndexes.filter(i => i !== rowIndex);
                return;
            }
            this.expandedRowIndexes = this.allowMultipleExpanded ? [...this.expandedRowIndexes, rowIndex] : [rowIndex];
            if (this.scrollExpandedIntoView) {
                requestAnimationFrame(() => {
                    const rows = this.el.querySelectorAll('.info-table-data-tr, .information-table-row');
                    const row = rows[rowIndex];
                    if (row && typeof row.scrollIntoView === 'function') {
                        row.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    }
                });
            }
        };
        this.renderCellContent = (value) => {
            if (value === null || value === undefined)
                return h("div", null, "\u00A0");
            if (typeof value === 'string' || typeof value === 'number')
                return value;
            if (typeof value === 'function')
                return value();
            return value;
        };
        this.renderTableExpandCell = (rowIndex) => {
            const expandable = !!this.subRowRenderer && rowIndex >= 0;
            const expanded = expandable ? this.isExpanded(rowIndex) : false;
            const expandCellPaddingClass = this.size === 'small' ? 'px-[6px] py-[6px]' : 'px-[8px] py-[16px]';
            const expandPlaceholderSizeClass = this.size === 'small' ? 'size-[20px]' : 'size-[32px]';
            if (expandable) {
                return (h("td", { style: { width: `${this.expandColumnWidth}px` }, class: cn('info-table-td', expandCellPaddingClass) }, h("div", { class: "grid place-items-center size-full" }, h("button", { type: "button", disabled: this.expandUsingEntireRow, "aria-expanded": expanded ? 'true' : 'false', onClick: e => {
                        e.stopPropagation();
                        this.toggleExpanded(rowIndex);
                    }, class: cn('size-full grid place-items-center shift-skeleton rounded transition duration-500', {
                        'hover:bg-slate-200/70': !expanded,
                        'bg-sky-100 hover:bg-sky-200': expanded,
                        '!pointer-events-none': this.expandUsingEntireRow,
                    }) }, h(ArrowIcon, { class: cn('text-slate-700 transition-transform duration-500', { 'rotate-180': expanded }) })))));
            }
            return (h("td", { style: { width: `${this.expandColumnWidth}px` }, class: cn('info-table-td', expandCellPaddingClass) }, h("div", { class: "grid place-items-center size-full" }, !this.customSkeleton && h("div", { class: cn('shift-skeleton', expandPlaceholderSizeClass) }))));
        };
        this.renderTableDataRow = (data, rowIndex) => {
            const isStripe = rowIndex >= 0 && rowIndex % 2 === 1 && this.stripCells;
            const cellPaddingClass = this.size === 'small' ? 'px-[12px] py-[6px]' : 'px-[16px] py-[16px]';
            const cellTextClass = this.size === 'small' ? 'text-[13px]' : '';
            return (h("tr", { onClick: this.expandUsingEntireRow && rowIndex >= 0 ? () => this.toggleExpanded(rowIndex) : undefined, class: cn('info-table-tr info-table-data-tr information-table-row', {
                    'info-table-tr-stripe': isStripe,
                    'info-table-tr-clickable': this.expandUsingEntireRow && rowIndex >= 0,
                }) }, this.subRowRenderer && this.renderTableExpandCell(rowIndex), this.headers.map(({ key, label, centeredHorizontally = true, nowrap, maxWidth, styles = {} }, idx) => {
                const tdStyle = Object.assign(Object.assign({}, (typeof maxWidth === 'number' && maxWidth > 0 ? { maxWidth: `${maxWidth}px` } : {})), styles);
                return (h("td", { key: key + label + idx, style: tdStyle, class: cn('info-table-td table-body-cell', cellPaddingClass, cellTextClass, {
                        'text-center': centeredHorizontally,
                        'whitespace-nowrap': nowrap,
                    }) }, h("div", { class: cn({ 'shift-skeleton': !this.customSkeleton }) }, this.renderCellContent(data[key]))));
            })));
        };
        this.renderTableSubRow = (row, idx) => {
            var _a;
            const expanded = this.isExpanded(idx);
            const colSpan = (((_a = this.headers) === null || _a === void 0 ? void 0 : _a.length) || 0) + (this.subRowRenderer ? 1 : 0);
            return (h("tr", { key: `sub-${idx}`, class: "info-table-tr info-table-subrow-tr" }, h("td", { class: "info-table-subrow-td", colSpan: colSpan }, h("flexible-container", { isOpened: expanded }, this.subRowRenderer(row)))));
        };
        this.renderRow = (data = {}, rowIndex = -1) => {
            const expandable = !!this.subRowRenderer && rowIndex >= 0;
            const expanded = expandable ? this.isExpanded(rowIndex) : false;
            const rowBg = rowIndex >= 0 && rowIndex % 2 === 1 && this.stripCells ? 'bg-slate-100' : '';
            const expandCellPaddingClass = this.size === 'small' ? 'px-[6px] py-[6px]' : 'px-[8px] py-[16px]';
            const expandPlaceholderSizeClass = this.size === 'small' ? 'size-[20px]' : 'size-[32px]';
            const expandCell = !this.subRowRenderer ? (false) : expandable ? (h("div", { style: { width: `${this.expandColumnWidth}px` }, class: cn('grid place-items-center', expandCellPaddingClass) }, h("button", { type: "button", disabled: this.expandUsingEntireRow, "aria-expanded": expanded ? 'true' : 'false', onClick: () => this.toggleExpanded(rowIndex), class: cn('size-full grid place-items-center shift-skeleton rounded transition duration-500', {
                    'hover:bg-slate-200/70': !expanded,
                    'bg-sky-100 hover:bg-sky-200': expanded,
                    '!pointer-events-none': this.expandUsingEntireRow,
                }) }, h(ArrowIcon, { class: cn('text-slate-700 transition-transform duration-500', { 'rotate-180': expanded }) })))) : (h("div", { style: { width: `${this.expandColumnWidth}px` }, class: cn('grid place-items-center', expandCellPaddingClass) }, !this.customSkeleton && h("div", { class: cn('shift-skeleton', expandPlaceholderSizeClass) })));
            const cellPaddingClass = this.size === 'small' ? 'px-[12px] py-[6px]' : 'px-[16px] py-[16px]';
            const cellTextClass = this.size === 'small' ? 'text-[13px]' : '';
            return (h("div", { onClick: this.expandUsingEntireRow && (() => this.toggleExpanded(rowIndex)), class: cn('information-table-row flex hover:bg-sky-100/50 transition duration-300', rowBg, { 'hover:cursor-pointer': this.expandUsingEntireRow }) }, expandCell, this.headers.map(({ key, label, width, centeredHorizontally = true, centeredVertically = true, styles = {} }, idx) => {
                const hasWidth = typeof width === 'number' && width > 0;
                const cellStyle = Object.assign(Object.assign({}, (hasWidth ? { width: `${width}px` } : {})), styles);
                return (h("div", { key: key + label + idx, style: cellStyle, class: cn('table-body-cell', cellPaddingClass, cellTextClass, {
                        'text-center': centeredHorizontally,
                        'my-auto': centeredVertically,
                    }) }, h("div", { class: cn({ 'shift-skeleton': !this.customSkeleton }) }, this.renderCellContent(data[key]))));
            })));
        };
        this.renderExpandableRow = (row, idx) => {
            const expanded = this.isExpanded(idx);
            const tableWidth = this.getTableWidth();
            return (h("div", { key: String(idx), style: { width: tableWidth ? `${tableWidth}px` : undefined }, class: cn('border-b last:border-b-0') }, this.renderRow(row, idx), h("flexible-container", { isOpened: expanded }, this.subRowRenderer(row))));
        };
    }
    async onIsLoadingChange() {
        var _a;
        const staticTableRowHeight = (_a = this.el.getElementsByClassName('information-table-row')[0]) === null || _a === void 0 ? void 0 : _a.clientHeight;
        if (staticTableRowHeight)
            this.tableRowHeight = staticTableRowHeight;
        if (this.isLoading) {
            this.expandedRowIndexes = [];
        }
        else
            this.tableRowHeight = 'auto';
    }
    render() {
        var _a, _b, _c, _d, _e, _f, _g;
        const isGrid = this.allowAutoWidth;
        const rowCount = ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length) || 0;
        const hasRows = rowCount > 0;
        if (isGrid) {
            const cellPaddingHeader = this.size === 'small' ? 'py-[8px] px-[12px] text-[13px]' : 'py-[16px] px-[16px]';
            const expandHeaderPadding = this.size === 'small' ? 'py-[10px] px-[6px]' : 'py-[16px] px-[8px]';
            return (h("div", { class: cn('information-table-wrapper info-table-table-wrapper', { loading: this.isLoading }) }, h("table", { class: "info-table-table" }, this.showHeader && (h("thead", null, h("tr", { class: "info-table-tr info-table-header-tr" }, !!this.subRowRenderer && h("th", { style: { width: `${this.expandColumnWidth}px` }, class: cn('info-table-th', expandHeaderPadding) }), this.headers.map(({ label, width, maxWidth, centeredHorizontally = true, nowrap, styles = {} }, idx) => {
                const hasWidth = typeof width === 'number' && width > 0;
                const hasMaxWidth = typeof maxWidth === 'number' && maxWidth > 0;
                const thStyle = Object.assign(Object.assign(Object.assign({}, (hasWidth ? { width: `${width}px` } : {})), (hasMaxWidth ? { maxWidth: `${maxWidth}px` } : {})), styles);
                return (h("th", { key: label + idx, style: thStyle, class: cn('info-table-th font-semibold table-header-cell', cellPaddingHeader, {
                        'text-center': centeredHorizontally,
                        'whitespace-nowrap': nowrap,
                    }) }, label));
            })))), h("tbody", null, !hasRows && this.renderTableDataRow(this.templateRow, -1), hasRows &&
                this.rows.map((row, idx) => [
                    this.renderTableDataRow(row, idx),
                    !!this.subRowRenderer && this.renderTableSubRow(row, idx),
                ])))));
        }
        const headerRow = this.showHeader && (h("div", { class: "flex" }, !!this.subRowRenderer && (h("div", { style: { width: `${this.expandColumnWidth}px` }, class: cn('border-b', this.size === 'small' ? 'py-[10px] px-[6px]' : 'py-[16px] px-[8px]') })), this.headers.map(({ label, width, centeredHorizontally = true, styles = {} }, idx) => {
            const hasWidth = typeof width === 'number' && width > 0;
            const headerStyle = Object.assign(Object.assign({}, (hasWidth ? { width: `${width}px` } : {})), styles);
            return (h("div", { key: label + idx, style: headerStyle, class: cn('font-semibold table-header-cell border-b', this.size === 'small' ? 'py-[8px] px-[12px] text-[13px]' : 'py-[16px] px-[16px]', {
                    'text-center': centeredHorizontally,
                }) }, label));
        })));
        return (h("div", { class: cn('information-table-wrapper mx-auto w-fit', { loading: this.isLoading }) }, headerRow, this.isRaw ? (h("div", { style: { height: `${this.tableRowHeight}px` } }, !((_b = this.rows) === null || _b === void 0 ? void 0 : _b.length) && h("div", { class: cn('border-b last:border-b-0') }, this.renderRow(this.templateRow)), !!((_c = this.rows) === null || _c === void 0 ? void 0 : _c.length) &&
            !this.subRowRenderer &&
            this.rows.map((row, idx) => (h("div", { key: String(idx), class: cn('border-b last:border-b-0') }, this.renderRow(row, idx)))), !!((_d = this.rows) === null || _d === void 0 ? void 0 : _d.length) && !!this.subRowRenderer && this.rows.map((row, idx) => this.renderExpandableRow(row, idx)))) : (h("flexible-container", { height: this.tableRowHeight }, !((_e = this.rows) === null || _e === void 0 ? void 0 : _e.length) && h("div", { class: cn('border-b last:border-b-0') }, this.renderRow(this.templateRow)), !!((_f = this.rows) === null || _f === void 0 ? void 0 : _f.length) &&
            !this.subRowRenderer &&
            this.rows.map((row, idx) => (h("div", { key: String(idx), class: cn('border-b last:border-b-0') }, this.renderRow(row, idx)))), !!((_g = this.rows) === null || _g === void 0 ? void 0 : _g.length) && !!this.subRowRenderer && this.rows.map((row, idx) => this.renderExpandableRow(row, idx))))));
    }
    static get is() { return "information-table"; }
    static get originalStyleUrls() {
        return {
            "$": ["information-table.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["information-table.css"]
        };
    }
    static get properties() {
        return {
            "rows": {
                "type": "unknown",
                "attribute": "rows",
                "mutable": false,
                "complexType": {
                    "original": "object[]",
                    "resolved": "object[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "templateRow": {
                "type": "unknown",
                "attribute": "template-row",
                "mutable": false,
                "complexType": {
                    "original": "object",
                    "resolved": "object",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "{}"
            },
            "isLoading": {
                "type": "boolean",
                "attribute": "is-loading",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "showHeader": {
                "type": "boolean",
                "attribute": "show-header",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "isRaw": {
                "type": "boolean",
                "attribute": "is-raw",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "stripCells": {
                "type": "boolean",
                "attribute": "strip-cells",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "customSkeleton": {
                "type": "boolean",
                "attribute": "custom-skeleton",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "headers": {
                "type": "unknown",
                "attribute": "headers",
                "mutable": false,
                "complexType": {
                    "original": "InformationTableColumn[]",
                    "resolved": "InformationTableColumn[]",
                    "references": {
                        "InformationTableColumn": {
                            "location": "local",
                            "path": "/home/vsts/work/1/s/ADP.WebComponents/adp-web-components/src/components/components/information-table.tsx",
                            "id": "src/components/components/information-table.tsx::InformationTableColumn"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "size": {
                "type": "string",
                "attribute": "size",
                "mutable": false,
                "complexType": {
                    "original": "'default' | 'small'",
                    "resolved": "\"default\" | \"small\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'default'"
            },
            "allowAutoWidth": {
                "type": "boolean",
                "attribute": "allow-auto-width",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "expandColumnWidth": {
                "type": "number",
                "attribute": "expand-column-width",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "48"
            },
            "subRowRenderer": {
                "type": "unknown",
                "attribute": "sub-row-renderer",
                "mutable": false,
                "complexType": {
                    "original": "(row: any) => any",
                    "resolved": "(row: any) => any",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "expandUsingEntireRow": {
                "type": "boolean",
                "attribute": "expand-using-entire-row",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "allowMultipleExpanded": {
                "type": "boolean",
                "attribute": "allow-multiple-expanded",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "scrollExpandedIntoView": {
                "type": "boolean",
                "attribute": "scroll-expanded-into-view",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "tableRowHeight": {},
            "expandedRowIndexes": {}
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "isLoading",
                "methodName": "onIsLoadingChange"
            }];
    }
}
