import { Host, h } from "@stencil/core";
import { getStore } from "../../store";
import { sensorInfo } from "../../utils/sensorInfo";
import { isNumber } from "lodash-es";
import { watchStoreLocale } from "../../utils/locale-state";
export class LsIndicator {
    constructor() {
        this.storeUnsubscribe = null;
        this.processSensorUpdate = (sensorData) => {
            const sensorValue = sensorData.values[this.sensorId];
            // The sensor values of 501 and 514 and 515 are zero based, but we need to show them one based
            this.sensorData = isNumber(sensorValue)
                ? sensorValue + 1
                : sensorValue === "¿"
                    ? "?" // Our font doesn't support the upside down question mark
                    : sensorValue;
        };
    }
    get dataLabel() {
        var _a;
        return sensorInfo.getShortLabel(this.sensorId, (_a = this.store) === null || _a === void 0 ? void 0 : _a.state.locale);
    }
    async componentWillLoad() {
        this.store = await getStore(this.idKey);
        watchStoreLocale(this, this.store);
        this.processSensorUpdate(this.store.state.currentSensorData);
        this.storeUnsubscribe = this.store.onChange("currentSensorData", (sensorData) => {
            this.processSensorUpdate(sensorData);
        });
    }
    disconnectedCallback() {
        if (this.storeUnsubscribe !== null) {
            this.storeUnsubscribe();
            this.storeUnsubscribe = null;
        }
    }
    render() {
        if (this.sensorId === null) {
            console.group("%cError%c [LsIndicator] No sensor ID supplied", "color: #DC2626; background-color: #FEF2F2; display: inline-block; padding: 0 4px; border-radius: 2px;", "");
            console.log(`Add the ID to the LsIndicator component like so: %c<ls-indicator sensor-id="yourId"></ls-indicator>%c`, "color:#27272A; background-color: #E4E4E7; display: inline-block; padding: 0 4px; border-radius: 2px;", "");
            console.groupEnd();
        }
        return (h(Host, { key: '0f5e1153ca2cfa56abfbf3779c9f5ab051b7ca7a' }, h("div", { key: 'c9f006c0f571734ef61273653d6451e5e69d2ce4', class: "label" }, this.sensorId === null
            ? this.store.t("ui:indicator.no_id")
            : this.dataLabel), h("div", { key: '53eb371432fc0cfac78c1786377f711d31e45eab', class: "backdrop" }, "00"), h("div", { key: 'c7df99375aa4e4a1827bc4ded5106fcb3a2718c9', class: "indicator" }, !this.store.state.error.hasError && (this.sensorData || ""))));
    }
    static get is() { return "ls-indicator"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ls-indicator.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ls-indicator.css"]
        };
    }
    static get properties() {
        return {
            "sensorId": {
                "type": "number",
                "attribute": "sensor-id",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The ID of the sensor that is to be displayed."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "idKey": {
                "type": "string",
                "attribute": "id-key",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The unique key that is used to identify store data."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "sensorData": {}
        };
    }
}
//# sourceMappingURL=ls-indicator.js.map
