import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as dayjs, a as getStore } from './store.js';
import { g as getSafeRelativeTime, r as relativeTime } from './safe-relative-time.js';
import { s as sensorInfo } from './sensorInfo.js';
import { w as watchStoreLocale } from './locale-state.js';
import { g as getStoreUnavailableError } from './store-error.js';
import { i as isEmpty } from './isEmpty.js';
import { i as includes } from './includes.js';
import { i as isNil } from './isNil.js';

const lsStatusItemCss = ":host{display:block;font-family:var(--ls-font-family);color:var(--ls-font-primary-color)}.ls-status-item{margin:0;padding:var(--ls-status-item-padding, 0);border-width:var(--ls-status-item-border-width, 0);border-style:solid;border-color:var(--ls-status-item-border-color, currentColor);box-shadow:var(--ls-status-item-box-shadow, none);border-radius:var(--ls-status-item-border-radius, 0);background-color:var(--ls-status-item-background, transparent);color:var(--ls-status-item-foreground, inherit);box-shadow:var(--ls-status-item-box-shadow, none);display:grid;gap:calc(var(--spacing, 0));box-sizing:border-box}.ls-status-item .label{font-size:var(--ls-text-base);line-height:var(--ls-line-base);font-weight:var(--font-weight-normal, 400);color:var(--ls-font-primary-color);margin:0;text-align:var(--ls-status-item-text-align, inherit)}.ls-status-item .value{font-size:var(--ls-text-2xl);line-height:var(--ls-line-2xl);font-weight:600;margin:0;text-align:var(--ls-status-item-text-align, inherit)}.ls-status-item .timestamp{font-size:var(--ls-text-sm);line-height:var(--ls-line-sm);color:var(--ls-gray-600);margin:0;text-align:var(--ls-status-item-text-align, inherit)}";

const LsStatusItem = /*@__PURE__*/ proxyCustomElement(class LsStatusItem extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.store = null;
        this.isComponentMounted = false;
        this.storeUnsubscribe = null;
        this.localeUnsubscribe = null;
        /**
         * Selects which label set to use for the sensor label.
         */
        this.labelType = "default";
        /**
         * Specifies the IDs and labels of the sensors that are allowed to be displayed.
         */
        this.allowedIds = "10,23,500,501,502,503,514,515,524,590";
        this.sensorsArray = this.allowedIds
            .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.updateData = (sensorData) => {
            var _a;
            // Don't update if component is unmounted
            if (!this.isComponentMounted)
                return;
            // Reset timer to prevent waiting on next timer tick
            this.clearTimer();
            this.setTimer();
            // If sensorData is empty, we don't need to update the data
            if (isEmpty(sensorData))
                return;
            // The sensor values of 501 and 514 and 515 are zero based, but we need to show them one based
            if (includes([501, 514, 515], this.sensorId) &&
                !isNaN(parseInt(sensorData.values[this.sensorId], 10))) {
                this.sensorData = sensorData.values[this.sensorId] + 1;
            }
            else {
                this.sensorData = sensorData.values[this.sensorId];
            }
            // Calculate relative timestamp
            this.timestamp = getSafeRelativeTime(sensorData.updated[this.sensorId], (_a = this.store) === null || _a === void 0 ? void 0 : _a.state.locale);
            this.updateErrorState();
        };
    }
    /**
     * Handles a change of the sensor ID
     */
    watchPropHandler() {
        // Clean up before reloading
        if (this.storeUnsubscribe !== null) {
            this.storeUnsubscribe();
            this.storeUnsubscribe = null;
        }
        if (this.localeUnsubscribe !== null) {
            this.localeUnsubscribe();
            this.localeUnsubscribe = null;
        }
        this.clearTimer();
        this.componentWillLoad();
    }
    get isValidSensorId() {
        return this.sensorsArray.includes(this.sensorId);
    }
    get dataLabel() {
        var _a, _b;
        if (this.sensorId === null || this.sensorId === undefined) {
            return "";
        }
        if (!this.isValidSensorId) {
            return this.store.t("ui:sensor.unknown_id");
        }
        const baseLabel = this.labelType === "short"
            ? sensorInfo.getShortLabel(this.sensorId, (_a = this.store) === null || _a === void 0 ? void 0 : _a.state.locale)
            : sensorInfo.getLabel(this.sensorId, (_b = this.store) === null || _b === void 0 ? void 0 : _b.state.locale);
        if ([
            LsStatusItem.SENSOR_ID_GEZOND_A,
            LsStatusItem.SENSOR_ID_GEZOND_B,
        ].includes(this.sensorId)) {
            const labelSuffixOk = this.store.t("ui:sensor.label_suffix_ok");
            const labelSuffixHealthy = this.store.t("ui:sensor.label_suffix_healthy");
            if (this.labelType === "short") {
                return baseLabel.replace(labelSuffixOk, "");
            }
            return baseLabel.replace(labelSuffixHealthy, "");
        }
        return baseLabel;
    }
    /**
     * 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,
            };
            this.clearTimer();
            return;
        }
        // No error detected
        this.errorState = {
            hasError: false,
            messageKey: undefined,
            type: "",
        };
    }
    setTimer() {
        // Clear any existing timer first
        this.clearTimer();
        // Used to update relative timestamps
        this.timer = window.setInterval(() => {
            var _a, _b;
            // Check if still mounted and store exists
            if (!this.isComponentMounted) {
                this.clearTimer();
                return;
            }
            // Access store data only when needed
            const sensorData = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.currentSensorData;
            if (!isNil(sensorData)) {
                this.updateData(sensorData);
            }
        }, 20000);
    }
    clearTimer() {
        window.clearInterval(this.timer);
        this.timer = null;
    }
    connectedCallback() {
        this.isComponentMounted = true;
        this.setTimer();
    }
    disconnectedCallback() {
        this.isComponentMounted = false;
        this.clearTimer();
        // Unsubscribe from store changes
        if (this.storeUnsubscribe !== null) {
            this.storeUnsubscribe();
            this.storeUnsubscribe = null;
        }
        if (this.localeUnsubscribe !== null) {
            this.localeUnsubscribe();
            this.localeUnsubscribe = null;
        }
    }
    async componentWillLoad() {
        dayjs.extend(relativeTime);
        this.store = await getStore(this.idKey);
        if (this.localeUnsubscribe !== null) {
            this.localeUnsubscribe();
        }
        this.localeUnsubscribe = watchStoreLocale(this, this.store, () => {
            if (!this.isValidSensorId) {
                this.sensorData = this.store.t("ui:sensor.valid_options");
                this.timestamp = this.sensorsArray.join(", ");
                return;
            }
            this.updateData(this.store.state.currentSensorData);
        }, { skipForceUpdate: true });
        if (!this.isValidSensorId) {
            this.sensorData = this.store.t("ui:sensor.valid_options");
            this.timestamp = this.sensorsArray.join(", ");
            this.clearTimer();
            return;
        }
        // If timer is cleared we need to start it again
        if (this.timer === null) {
            this.setTimer();
        }
        this.updateData(this.store.state.currentSensorData);
        // Store the unsubscribe function for cleanup
        this.storeUnsubscribe = this.store.onChange("currentSensorData", (sensorData) => {
            this.updateData(sensorData);
        });
    }
    render() {
        var _a;
        const sensorIdLabel = this.sensorId === null || this.sensorId === undefined
            ? this.store.t("ui:sensor.not_specified")
            : this.sensorId;
        const fallbackLabel = this.store.t("ui:sensor.fallback_label", {
            id: sensorIdLabel,
        });
        return (h(Host, { key: 'b22658860e862850d17c186608709d840a87aacc' }, h("slot", { key: '321c34086cac3058674a8498feba4c658ae29cd3' }), h("dl", { key: '1e7f9d2b1e3d24ca4e783a5514c73f9fb09d60bb', class: "ls-status-item" }, h("dt", { key: 'c772dabeb5717a8e53b3faed6f69a65dbff52a91', class: "label" }, this.dataLabel || fallbackLabel), h("dd", { key: '9f24db4e9eccf83cbae25c1c17bb480fb37ce0c0', class: "value" }, sensorInfo.getValue(this.sensorData, this.sensorId, (_a = this.store) === null || _a === void 0 ? void 0 : _a.state.locale) ||
            "-"), h("dd", { key: '964a5e7bf0c8eb586899f004de7b4717973a9c4e', class: "timestamp" }, this.timestamp))));
    }
    static get watchers() { return {
        "sensorId": ["watchPropHandler"]
    }; }
    static get style() { return lsStatusItemCss; }
}, [257, "ls-status-item", {
        "sensorId": [2, "sensor-id"],
        "idKey": [1, "id-key"],
        "labelType": [1, "label-type"],
        "sensorData": [32],
        "timestamp": [32],
        "errorState": [32]
    }, undefined, {
        "sensorId": ["watchPropHandler"]
    }]);
LsStatusItem.SENSOR_ID_GEZOND_A = 10;
LsStatusItem.SENSOR_ID_GEZOND_B = 524;
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ls-status-item"];
    components.forEach(tagName => { switch (tagName) {
        case "ls-status-item":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, LsStatusItem);
            }
            break;
    } });
}

export { LsStatusItem as L, defineCustomElement as d };
//# sourceMappingURL=ls-status-item2.js.map

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