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 { i as isEmptyObject, s as statusCodesState } from './is-empty-object.js';
import { w as watchStoreLocale } from './locale-state.js';
import { g as getStoreUnavailableError } from './store-error.js';
import { i as isNil } from './isNil.js';

const lsStatusMessagesCss = ":host{display:block;font-family:var(--ls-font-family);color:var(--ls-font-primary-color)}.ls-status-messages{padding-bottom:1rem}.ls-status-messages .title{font-size:var(--ls-text-2xl);line-height:var(--ls-line-2xl);font-weight:600}.ls-status-messages .subtitle{font-size:var(--ls-text-base);line-height:var(--ls-line-base);color:var(--ls-warning-text, #92400e);background-color:var(--ls-warning-background, #fef3c7);padding:0.75rem 1rem;margin-bottom:1rem;margin-top:0.5rem;border-left:4px solid var(--ls-warning-text, #f59e0b);border-radius:0.25rem;font-weight:500}.ls-status-messages .label{font-size:var(--ls-text-lg);line-height:var(--ls-line-lg);align-self:start;grid-column:1;grid-row:1}.ls-status-messages .message{max-width:800px;min-width:550px;display:grid;grid-template-columns:3fr 2fr 2fr;padding:0.5rem 0;border-bottom:1px solid var(--ls-gray-100)}.ls-status-messages .message:last-child{border-bottom:none}.ls-status-messages .timestamp,.ls-status-messages .identification{font-size:var(--ls-text-sm);line-height:var(--ls-line-sm);color:var(--ls-gray-600)}.ls-status-messages .status-code{font-size:var(--ls-text-sm);line-height:var(--ls-line-sm);color:var(--ls-gray-600);grid-column:1;grid-row:2}.ls-status-messages .human-readable-timestamp{font-size:var(--ls-text-base);line-height:var(--ls-line-base);align-self:end}.ls-status-messages .relative-timestamp{grid-column:3}.ls-status-messages .severity{color:var(--ls-default-text);background-color:var(--ls-default-background);font-size:var(--ls-text-sm);line-height:var(--ls-line-sm);height:var(--ls-line-sm);border-radius:3px;width:fit-content;padding:0.375rem 0.5rem;grid-column:2;grid-row:1 / 3;align-self:center}.ls-status-messages .impact{color:var(--ls-danger-text);background-color:var(--ls-danger-background)}.ls-status-messages .non-impact{color:var(--ls-warning-text);background-color:var(--ls-warning-background)}.ls-status-messages .informational{color:var(--ls-info-text);background-color:var(--ls-info-background)}@media (max-width: 630px){.ls-status-messages .message{min-width:0;max-width:100%;grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.ls-status-messages .message>.label{grid-column:1;grid-row:1}.ls-status-messages .message>.status-code{grid-column:1;grid-row:2}.ls-status-messages .message>.severity{grid-column:1;grid-row:2;margin-top:0.25rem}.ls-status-messages .message.has-status-code>.severity{grid-row:3}.ls-status-messages .message>.human-readable-timestamp{grid-column:2;grid-row:1;text-align:right}.ls-status-messages .message>.relative-timestamp{grid-column:2;grid-row:2;text-align:right;align-self:start}}";

const LsStatusMessages$1 = /*@__PURE__*/ proxyCustomElement(class LsStatusMessages extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        /**
         * Whether or not to show the title of the component.
         */
        this.hideTitle = false;
        /**
         * Allows user to filter messages based on severity
         */
        // Leading comma is to allow for <empty_string>
        this.severityOptions = ",impact,informational,non-impact";
        /**
         * The data received from the subscription is placed in this state.
         * The component is automatically rerendered after the state changes.
         */
        this.statusMessages = [];
        /**
         * The timestamp of when the sensor last changed.
         */
        this.lastChange = "";
        /**
         * The timer is used to update the relative timestamps.
         */
        this.time = Date.now();
        /**
         * Centralized error state for tracking component errors
         */
        this.errorState = {
            hasError: false,
            messageKey: undefined,
            type: "",
        };
        this.store = null;
        /**
         * The sensor ID associated with the status messages.
         */
        this.sensorId = 513;
        this.isComponentMounted = false;
        this.storeUnsubscribe = null;
        // This function processes the raw data from the socket server
        this.updateData = (sensorData) => {
            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
            this.updateErrorState();
            // Only listen to our own sensor identifier
            if (isEmptyObject((_a = sensorData === null || sensorData === void 0 ? void 0 : sensorData.values) === null || _a === void 0 ? void 0 : _a[this.sensorId]))
                return;
            const items = (_b = sensorData.values[this.sensorId]) === null || _b === void 0 ? void 0 : _b.split(",").filter((id) => id.trim() !== "");
            if (isNil(items) || items.length === 0) {
                this.lastChange = getSafeRelativeTime(sensorData.updated[this.sensorId], (_c = this.store) === null || _c === void 0 ? void 0 : _c.state.locale);
                this.statusMessages = [];
                return;
            }
            const result = [];
            for (const item of items) {
                const parts = item.split(":");
                const identifier = parts[0];
                const timestampValue = parseInt(parts[1], 10) / 1000;
                const timestamp = dayjs.unix(timestampValue).locale((_d = this.store) === null || _d === void 0 ? void 0 : _d.state.locale);
                const humanReadableTimestamp = timestamp.format("D MMM YYYY H:mm:ss");
                const relativeTimestamp = getSafeRelativeTime(timestampValue * 1000, (_e = this.store) === null || _e === void 0 ? void 0 : _e.state.locale); // Convert back to milliseconds
                const active = parseInt(parts[2], 10);
                // The description and severity level are retrieved from the central store
                const description = (_g = (_f = statusCodesState[identifier]) === null || _f === void 0 ? void 0 : _f.description) !== null && _g !== void 0 ? _g : identifier;
                const severity = (_j = (_h = statusCodesState[identifier]) === null || _h === void 0 ? void 0 : _h.level) !== null && _j !== void 0 ? _j : null;
                // Add the item to the results array
                if (active === 1 && ((_k = this.severityFilter) === null || _k === void 0 ? void 0 : _k.includes(severity))) {
                    result.push({
                        id: identifier,
                        humanReadableTimestamp,
                        relativeTimestamp,
                        description,
                        severity,
                    });
                }
            }
            this.lastChange = getSafeRelativeTime(sensorData.updated[this.sensorId], (_l = this.store) === null || _l === void 0 ? void 0 : _l.state.locale);
            this.statusMessages = result;
        };
        this.isSeverity = (value) => {
            return ["", "impact", "informational", "non-impact"].includes(value);
        };
    }
    get componentTitle() {
        var _a;
        return sensorInfo.getLabel(this.sensorId, (_a = this.store) === null || _a === void 0 ? void 0 : _a.state.locale);
    }
    /**
     * 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.stopTimer();
            return;
        }
        // No error detected
        this.errorState = {
            hasError: false,
            messageKey: undefined,
            type: "",
        };
        this.startTimer();
    }
    connectedCallback() {
        this.startTimer();
        const severityFilterSplit = this.severityOptions
            .replace(/\s+/g, "")
            .split(",")
            .filter((id) => id.trim() !== "");
        const severityFilter = [];
        severityFilterSplit.forEach((item) => {
            if (this.isSeverity(item) && !severityFilter.includes(item)) {
                severityFilter.push(item);
            }
        });
        if (severityFilter.length > 0) {
            this.severityFilter = severityFilter;
        }
        else {
            console.group("%cError%c [LsStatusMessages] Incorrect severity filter options supplied", "color: #DC2626; background-color: #FEF2F2; display: inline-block; padding: 0 4px; border-radius: 2px;", "");
            console.log("Allowed options: '<empty_string>, impact, informational and non-impact");
            console.log("Check https://springtree.github.io/ednl-liftstatus-web-components/#/components/ls-status-messages for more information");
            console.groupEnd();
        }
    }
    startTimer() {
        // Clear any existing timer first
        this.stopTimer();
        // The timer is used to update the relative timestamps
        this.timer = window.setInterval(() => {
            var _a, _b;
            // Check if component is still mounted
            if (!this.isComponentMounted) {
                this.stopTimer();
                return;
            }
            // Access data only if needed to minimize closure scope
            const sensorData = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.currentSensorData;
            if (sensorData !== undefined) {
                // Update the data, so that the relative timestamp gets updated
                this.updateData(sensorData);
                // The timestamp is actually not displayed, but is only used to update the state and rerender the DOM
                this.time = Date.now();
            }
        }, 20000);
    }
    stopTimer() {
        clearInterval(this.timer);
        this.timer = null;
    }
    getSeverityLabel(severity) {
        const key = severity !== undefined && severity !== null && severity !== ""
            ? `ui:impact_level.${severity.replace(/-/g, "_")}`
            : "ui:impact_level.unknown";
        return this.store.t(key);
    }
    async componentWillLoad() {
        dayjs.extend(relativeTime);
        this.store = await getStore(this.idKey);
        watchStoreLocale(this, this.store, () => {
            this.updateData(this.store.state.currentSensorData);
        }, { skipForceUpdate: true });
        this.isComponentMounted = true;
        this.updateData(this.store.state.currentSensorData);
        const sensorDataUnsubscribe = this.store.onChange("currentSensorData", (sensorData) => {
            this.updateData(sensorData);
        });
        const errorUnsubscribe = this.store.onChange("error", () => {
            this.updateErrorState();
        });
        this.storeUnsubscribe = () => {
            sensorDataUnsubscribe();
            errorUnsubscribe();
        };
    }
    render() {
        return (h(Host, { key: 'd71dcf935ee5b486ab73f392be61a41edfdca4d3' }, h("slot", { key: 'ff05145909d6a85cee24e76aa479e1050fb7a611' }), h("div", { key: '1f50fd89fc6efa7b913ee93a7cdc54d77d36b223', class: "ls-status-messages" }, !this.hideTitle && (h("div", { key: '5be15933febf9e3225c3078a3786d534788cfc06', class: "title" }, this.componentTitle || this.store.t("ui:status_messages.title"))), this.lastChange === "" && !this.errorState.hasError ? (h("div", { class: "messages" }, h("div", { class: "label" }, this.store.t("ui:status_messages.loading")))) : (h("div", { class: "messages" }, this.errorState.hasError && (h("div", { class: "subtitle" }, this.store.t("ui:status_messages.last_known"))), this.statusMessages.length > 0 ? (this.statusMessages.map((message) => {
            var _a, _b, _c;
            return (h("div", { class: `message ${((_a = statusCodesState[message.id]) === null || _a === void 0 ? void 0 : _a.description.length) > 0 ? "has-status-code" : ""}` }, h("div", { class: "label", title: ((_b = statusCodesState[message.id]) === null || _b === void 0 ? void 0 : _b.description.length) > 0 ? undefined : message.id }, message.description || message.id), ((_c = statusCodesState[message.id]) === null || _c === void 0 ? void 0 : _c.description.length) > 0 && (h("div", { class: "status-code" }, message.id)), h("div", { class: `severity ${message.severity}` }, this.getSeverityLabel(message.severity)), h("div", { class: "human-readable-timestamp" }, message.humanReadableTimestamp), h("div", { class: "timestamp relative-timestamp" }, message.relativeTimestamp)));
        })) : (h("dt", { class: "label" }, this.store.t("ui:status_messages.none"))), this.statusMessages.length === 0 && (h("div", { class: "timestamp" }, this.lastChange)))))));
    }
    disconnectedCallback() {
        this.isComponentMounted = false;
        this.stopTimer();
        // Unsubscribe from store changes
        if (this.storeUnsubscribe !== null) {
            this.storeUnsubscribe();
            this.storeUnsubscribe = null;
        }
    }
    static get style() { return lsStatusMessagesCss; }
}, [257, "ls-status-messages", {
        "hideTitle": [4, "hide-title"],
        "severityOptions": [1, "severity-options"],
        "idKey": [1, "id-key"],
        "statusMessages": [32],
        "lastChange": [32],
        "time": [32],
        "errorState": [32]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ls-status-messages"];
    components.forEach(tagName => { switch (tagName) {
        case "ls-status-messages":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, LsStatusMessages$1);
            }
            break;
    } });
}

const LsStatusMessages = LsStatusMessages$1;
const defineCustomElement = defineCustomElement$1;

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

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