import { Host, h } from "@stencil/core";
import { checkResizeObserver, DEVICE_SIZES, getCurrentDeviceSize, isSlotUsed, slotHasContent, } from "../../utils/helpers";
/**
 * @slot label - Content will be rendered in the leftmost cell.
 * @slot value - Content will be rendered to the right of the label.
 * @slot end-component - Content will be displayed in the rightmost cell.
 */
export class DataRow {
    constructor() {
        this.hasEndComponent = false;
        this.resizeObserver = null;
        this.deviceSize = DEVICE_SIZES.XL;
        /**
         * The size of the data row component.
         */
        this.size = "medium";
        /**
         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
        this.runResizeObserver = () => {
            this.resizeObserver = new ResizeObserver(() => {
                this.checkLabelAbove();
            });
            this.resizeObserver.observe(this.el);
        };
        this.renderCellContent = (cell) => {
            const isValue = cell === "value";
            return (h("div", { class: cell }, isSlotUsed(this.el, cell) ? (h("slot", { name: cell })) : (h("ic-typography", { variant: isValue
                    ? "body"
                    : this.listSize === "xs"
                        ? "label"
                        : "subtitle-large" }, isValue ? this.value : this.label))));
        };
    }
    disconnectedCallback() {
        var _a;
        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
    }
    componentWillLoad() {
        this.deviceSize = getCurrentDeviceSize();
        this.hasEndComponent = slotHasContent(this.el, "end-component");
        this.checkLabelAbove();
    }
    componentDidLoad() {
        checkResizeObserver(this.runResizeObserver);
        if (this.hasEndComponent)
            this.labelEndComponent();
    }
    checkLabelAbove() {
        var _a;
        const row = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".data");
        if (row) {
            const rowSize = (row === null || row === void 0 ? void 0 : row.clientWidth) + 46;
            if (rowSize) {
                this.listSize =
                    rowSize < DEVICE_SIZES.S
                        ? "xs"
                        : rowSize < DEVICE_SIZES.M
                            ? "m"
                            : "xl";
            }
        }
    }
    labelEndComponent() {
        var _a;
        (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("slot[name=end-component]").forEach((child) => child.setAttribute("aria-label", `for ${this.label} row`));
    }
    render() {
        const { el, listSize, hasEndComponent, label, renderCellContent, size, theme, value, } = this;
        return (h(Host, { key: '572e916da4b05c25ef2d30d186e80b08f3dfb5b5', class: {
                ["ic-data-row-small"]: size === "small",
                ["breakpoint-medium"]: listSize === "m",
                ["breakpoint-xs"]: listSize === "xs",
                [`ic-theme-${theme}`]: theme !== "inherit",
            }, role: "listitem" }, h("div", { key: '3fd5751be8c21404dfbe1c37d121103d7bc32ec5', class: "data" }, h("div", { key: '9dfd49f76340e059ad39cda8f7a28d7d51edeb5a', class: "text-cells" }, (isSlotUsed(el, "label") || label) && renderCellContent("label"), (isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (h("div", { key: '0b64f2937db81ddb2aa12ea4a3d6a19ba69c925b', class: "end-component" }, h("slot", { key: 'fe70b486ca8ccc5f409fe805a772bd0110752a75', name: "end-component" })))), h("div", { key: '286f657395d2d77dd8d2783a395d02f897fd361b', class: "divider" })));
    }
    static get is() { return "ic-data-row"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-data-row.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-data-row.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The label in the leftmost cell of the row."
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcSizesNoLarge",
                    "resolved": "\"medium\" | \"small\" | undefined",
                    "references": {
                        "IcSizesNoLarge": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcSizesNoLarge"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The size of the data row component."
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "\"medium\""
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcThemeMode",
                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                    "references": {
                        "IcThemeMode": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeMode"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                },
                "getter": false,
                "setter": false,
                "attribute": "theme",
                "reflect": false,
                "defaultValue": "\"inherit\""
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The value of the middle (right if no end-component supplied) cell of the row."
                },
                "getter": false,
                "setter": false,
                "attribute": "value",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "deviceSize": {},
            "listSize": {}
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=ic-data-row.js.map
