import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { a as getStore } from './store.js';
import { w as watchStoreLocale } from './locale-state.js';
import { g as getStoreUnavailableError } from './store-error.js';
import { d as defineCustomElement$2 } from './ls-status-item2.js';

const lsStatusCss = ".error-message{font-size:var(--ls-text-2xl);line-height:var(--ls-line-2xl);font-weight:600;padding:0.5rem 0;position:absolute;top:50%;left:0;right:0;width:100%;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;color:var(--ls-font-primary-color);background-color:var(--ls-default-background);border-radius:2px;opacity:1;animation:append-animate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);will-change:transform, opacity;z-index:10;user-select:none;-webkit-user-select:none}.blur{filter:blur(10px);-webkit-filter:blur(10px);user-select:none;-webkit-user-select:none}@keyframes append-animate{from{transform:translateY(-50%) scale(0.96);opacity:0}to{transform:translateY(-50%) scale(1);opacity:1}}:host{display:block;font-family:var(--ls-font-family);position:relative;--ls-status-grid-breakpoint:9999px}.content{position:relative;display:grid;gap:var(--ls-status-grid-gap, 2rem);padding-inline:var(\n    --ls-status-grid-padding-x,\n    0\n  );padding-bottom:var(\n    --ls-status-grid-padding-bottom,\n    0\n  );font-size:var(--text-sm, var(--ls-text-sm));line-height:var(--text-sm--line-height, var(--ls-line-sm));grid-template-columns:1fr}.content.two-columns{grid-template-columns:repeat(2, minmax(0, 1fr))}.content.two-columns>ls-status-item:last-child:nth-child(odd){grid-column:1 / -1}";

const LsStatus$1 = /*@__PURE__*/ proxyCustomElement(class LsStatus extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        /**
         * Specifies the IDs of the sensors that are to be displayed.
         */
        this.sensorIds = "500,501,502,503,514,515,590";
        /**
         * Selects which label set to use for status items.
         */
        this.labelType = "default";
        /**
         * The sensor IDs input property, converted to an array of numbers.
         */
        this.sensorIdsArray = this.sensorIds
            .split(",")
            .filter((id) => id.trim() !== "")
            .map((id) => parseInt(id.trim(), 10));
        /**
         * Centralized error state for tracking component errors
         */
        this.errorState = {
            hasError: false,
            messageKey: undefined,
            type: "",
        };
        this.useTwoColumns = false;
        this.storeUnsubscribe = null;
        this.resizeObserver = null;
        this.filterBackdoorSensor = (hasBackDoor) => {
            if (hasBackDoor)
                return;
            this.sensorIdsArray = this.sensorIdsArray.filter((sensor) => {
                return sensor !== 503;
            });
        };
    }
    async componentWillLoad() {
        this.store = await getStore(this.idKey);
        watchStoreLocale(this, this.store);
        this.filterBackdoorSensor(this.store.state.hasBackDoor);
        this.updateErrorState();
        if (this.store !== null) {
            this.storeUnsubscribe = this.store.onChange("error", () => {
                this.updateErrorState();
            });
        }
    }
    componentDidLoad() {
        // Initialize and keep the column layout in sync with host size changes.
        this.updateColumnLayout();
        if (typeof ResizeObserver === "undefined")
            return;
        this.resizeObserver = new ResizeObserver(() => {
            this.updateColumnLayout();
        });
        this.resizeObserver.observe(this.hostEl);
    }
    disconnectedCallback() {
        if (this.storeUnsubscribe !== null) {
            this.storeUnsubscribe();
            this.storeUnsubscribe = null;
        }
        if (this.resizeObserver !== null) {
            this.resizeObserver.disconnect();
            this.resizeObserver = null;
        }
    }
    /**
     * Updates the error state based on current component conditions
     */
    updateErrorState() {
        if (this.store === null) {
            this.errorState = getStoreUnavailableError();
            return;
        }
        if (this.store.state.error.hasError) {
            this.errorState = {
                hasError: true,
                messageKey: this.store.state.error.messageKey,
                type: this.store.state.error.type,
            };
            return;
        }
        this.errorState = {
            hasError: false,
            messageKey: undefined,
            type: "",
        };
    }
    parseLengthToPx(value) {
        // Support only px/em/rem values for the grid breakpoint.
        if (value.trim() === "")
            return null;
        const numeric = parseFloat(value);
        if (Number.isNaN(numeric) || numeric < 0)
            return null;
        if (value.endsWith("px")) {
            return numeric;
        }
        if (value.endsWith("rem")) {
            const rootFontSizeValue = getComputedStyle(document.documentElement).fontSize;
            const rootFontSize = parseFloat(rootFontSizeValue);
            return (numeric *
                (Number.isNaN(rootFontSize)
                    ? LsStatus.DEFAULT_FONT_SIZE_PX
                    : rootFontSize));
        }
        if (value.endsWith("em")) {
            const hostFontSizeValue = getComputedStyle(this.hostEl).fontSize;
            const hostFontSize = parseFloat(hostFontSizeValue);
            return (numeric *
                (Number.isNaN(hostFontSize)
                    ? LsStatus.DEFAULT_FONT_SIZE_PX
                    : hostFontSize));
        }
        return null;
    }
    getErrorMessageForDisplay() {
        var _a;
        const errorKey = (_a = this.errorState.messageKey) !== null && _a !== void 0 ? _a : "CONSOLE_INFO";
        return this.store.t(`errors:${errorKey}`);
    }
    updateColumnLayout() {
        // Toggle two-column layout when the host width meets the breakpoint.
        if (this.hostEl === null)
            return;
        const computedStyles = getComputedStyle(this.hostEl);
        const breakpointValue = computedStyles
            .getPropertyValue("--ls-status-grid-breakpoint")
            .trim();
        const breakpointPx = this.parseLengthToPx(breakpointValue);
        if (breakpointPx === null) {
            this.useTwoColumns = false;
            return;
        }
        const width = this.hostEl.getBoundingClientRect().width;
        const shouldUseTwoColumns = width >= breakpointPx;
        if (this.useTwoColumns !== shouldUseTwoColumns) {
            this.useTwoColumns = shouldUseTwoColumns;
        }
    }
    render() {
        const contentClass = {
            content: true,
            "two-columns": this.useTwoColumns,
            blur: this.errorState.hasError,
        };
        return (h(Host, { key: 'ccfa629f5672b20ad2b17ce8f9c2e9d451d40a68' }, h("slot", { key: '30465accd67a299ecaa16408b99b282fb99e40f4' }), h("div", { key: '478f6ab82abbf8c2cccd4a6b58f6fd57dbcd2585', class: contentClass }, this.sensorIdsArray.map((sensor) => (h("ls-status-item", { "sensor-id": sensor, "id-key": this.idKey, "label-type": this.labelType })))), this.errorState.hasError && (h("div", { key: '868e594d71757a31a187a8e63e5b265df13f7c4c', class: "error-message" }, this.getErrorMessageForDisplay()))));
    }
    get hostEl() { return this; }
    static get style() { return lsStatusCss; }
}, [257, "ls-status", {
        "sensorIds": [1, "sensor-ids"],
        "idKey": [1, "id-key"],
        "labelType": [1, "label-type"],
        "sensorIdsArray": [32],
        "errorState": [32],
        "useTwoColumns": [32]
    }]);
LsStatus$1.DEFAULT_FONT_SIZE_PX = 16;
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ls-status", "ls-status-item"];
    components.forEach(tagName => { switch (tagName) {
        case "ls-status":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, LsStatus$1);
            }
            break;
        case "ls-status-item":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const LsStatus = LsStatus$1;
const defineCustomElement = defineCustomElement$1;

export { LsStatus, defineCustomElement };
//# sourceMappingURL=ls-status.js.map

//# sourceMappingURL=ls-status.js.map