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: 'd5c6ff5a373e32e4e310dd0ddb6bbcfea0f2704a', 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: 'b2867cd3b8a493ec7e4f4cff48849d94560c1fdc', class: "data" }, h("div", { key: 'd3fd667e4612907b81081ddae99c3228e2dbb954', class: "text-cells" }, (isSlotUsed(el, "label") || label) && renderCellContent("label"), (isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (h("div", { key: 'dbbb33f8a2726f801dc72ca1f11544073ba8bc69', class: "end-component" }, h("slot", { key: 'fd4b247214447bac2a7a5bc9385a8f91cb44436f', name: "end-component" })))), h("div", { key: '8e19fde06b9fa34a3295e37fe726f163593f6674', 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
