import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { a as getStore } from './store.js';
import { i as isEmptyObject, s as statusCodesState } from './is-empty-object.js';
import { a as applyErrorMessage, g as getCompactErrorMessage, c as clearErrorMessage } from './error-message.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 lsStatusCountCss = ".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:inline-block;font-family:var(--ls-font-family)}.ls-status-count{display:flex;flex-direction:column;align-items:center;gap:var(--ls-status-count-gap, 0.25rem);padding:var(--ls-status-count-padding, 0.5rem 0.75rem);border-radius:var(--ls-status-count-border-radius, 0.375rem);overflow:hidden}.ls-status-count.impact{background-color:var(\n    --ls-status-count-impact-bg,\n    var(--ls-danger-background)\n  );color:var(--ls-status-count-impact-color, var(--ls-danger-text))}.ls-status-count.non-impact{background-color:var(\n    --ls-status-count-non-impact-bg,\n    var(--ls-warning-background)\n  );color:var(--ls-status-count-non-impact-color, var(--ls-warning-text))}.ls-status-count.informational{background-color:var(\n    --ls-status-count-informational-bg,\n    var(--ls-info-background)\n  );color:var(--ls-status-count-informational-color, var(--ls-info-text))}.icon{font-size:var(--ls-status-count-label-font-size, var(--ls-text-xs));width:var(--ls-status-count-icon-size, 1.65cap);height:var(--ls-status-count-icon-size, 1.65cap);opacity:var(--ls-status-count-icon-opacity, 0.7)}.header{display:flex;align-items:center;gap:var(--ls-status-count-header-gap, 0.375rem);flex-wrap:wrap;justify-content:center}.header svg{flex-shrink:0}.count{font-size:var(--ls-status-count-count-font-size, var(--ls-text-lg));font-weight:var(--ls-status-count-count-font-weight, 600);text-align:center}.label{font-size:var(--ls-status-count-label-font-size, var(--ls-text-xs));font-weight:var(--ls-status-count-label-font-weight, 500);opacity:var(--ls-status-count-label-opacity, 0.8)}.ls-status-count.error{background-color:var(--ls-status-count-error-bg, var(--ls-gray-100));color:var(--ls-status-count-error-color, var(--ls-gray-500))}.ls-status-count.loading{opacity:0.5}.ls-status-count .error-message{inset:50% 0 auto;width:100%;max-width:100%;transform:translateY(-50%);text-align:center;padding:0.25rem 0.375rem;box-sizing:border-box;font-size:var(--ls-status-count-error-font-size, var(--ls-text-xs));line-height:1.2;font-weight:500;border-radius:0.25rem;background-color:var(\n    --ls-default-background,\n    rgba(255, 255, 255, 0.85)\n  );white-space:normal;overflow-wrap:anywhere;animation:none}.ls-status-count .blur{filter:none;opacity:0.4}";

const LsStatusCount$1 = /*@__PURE__*/ proxyCustomElement(class LsStatusCount extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        /**
         * The count of unique status messages for this impact level.
         */
        this.messageCount = 0;
        /**
         * Whether the component is still loading data.
         */
        this.isLoading = true;
        /**
         * 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;
        /**
         * Processes the raw data from the socket server and counts unique messages.
         */
        this.updateData = (sensorData) => {
            var _a, _b, _c, _d;
            if (!this.isComponentMounted)
                return;
            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])) {
                this.isLoading = false;
                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.messageCount = 0;
                this.isLoading = false;
                return;
            }
            // Use a Set to store unique status code identifiers for this impact level
            const uniqueIdentifiers = new Set();
            for (const item of items) {
                const parts = item.split(":");
                const identifier = parts[0];
                const active = parseInt(parts[2], 10);
                // Get the severity level from the central store
                const severity = (_d = (_c = statusCodesState[identifier]) === null || _c === void 0 ? void 0 : _c.level) !== null && _d !== void 0 ? _d : null;
                // Only count active messages that match our impact level
                if (active === 1 && severity === this.impactLevel) {
                    uniqueIdentifiers.add(identifier);
                }
            }
            this.messageCount = uniqueIdentifiers.size;
            this.isLoading = false;
        };
    }
    /**
     * Validates that the impact level prop is valid.
     */
    isValidImpactLevel(value) {
        return ["impact", "informational", "non-impact"].includes(value);
    }
    /**
     * Updates the error state based on current component conditions.
     */
    updateErrorState() {
        var _b, _c;
        if (this.store === null) {
            this.errorState = getStoreUnavailableError();
            if (this.containerElement !== undefined) {
                applyErrorMessage(this.containerElement, getCompactErrorMessage(this.errorState.messageKey, (_b = this.store) === null || _b === void 0 ? void 0 : _b.state.locale));
            }
            return;
        }
        if (this.store.state.error.hasError) {
            this.errorState = {
                hasError: true,
                messageKey: this.store.state.error.messageKey,
                type: this.store.state.error.type,
            };
            if (this.containerElement !== undefined) {
                applyErrorMessage(this.containerElement, getCompactErrorMessage(this.errorState.messageKey, (_c = this.store) === null || _c === void 0 ? void 0 : _c.state.locale));
            }
            return;
        }
        // No error detected
        this.errorState = {
            hasError: false,
            messageKey: undefined,
            type: "",
        };
        if (this.containerElement !== undefined) {
            clearErrorMessage(this.containerElement);
        }
    }
    async componentWillLoad() {
        // Validate impactLevel prop
        if (!this.isValidImpactLevel(this.impactLevel)) {
            console.group("%cError%c [LsStatusCount] Invalid impact level supplied", "color: #DC2626; background-color: #FEF2F2; display: inline-block; padding: 0 4px; border-radius: 2px;", "");
            console.log("Allowed options: 'impact', 'non-impact', 'informational'");
            console.log(`Received: '${this.impactLevel}'`);
            console.groupEnd();
            this.isLoading = false;
            return;
        }
        this.store = await getStore(this.idKey);
        watchStoreLocale(this, this.store, () => {
            this.updateErrorState();
        });
        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();
        };
    }
    componentDidLoad() {
        // Ensure overlay-based error UI can be applied once the container ref exists.
        this.updateErrorState();
    }
    disconnectedCallback() {
        this.isComponentMounted = false;
        // Unsubscribe from store changes
        if (this.storeUnsubscribe !== null) {
            this.storeUnsubscribe();
            this.storeUnsubscribe = null;
        }
        if (this.containerElement !== undefined) {
            clearErrorMessage(this.containerElement);
        }
    }
    /**
     * Returns the label for the impact level.
     */
    getImpactLabel() {
        switch (this.impactLevel) {
            case "impact":
                return this.store.t("ui:impact_level.impact");
            case "non-impact":
                return this.store.t("ui:impact_level.non_impact");
            case "informational":
                return this.store.t("ui:impact_level.informational");
            default:
                return this.store.t("ui:impact_level.unknown");
        }
    }
    /**
     * Renders the impact icon (octagon with exclamation mark).
     */
    renderImpactIcon() {
        return (h("svg", { class: "icon impact-icon", part: "icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M12 16h.01M12 8v4m3.312-10a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z" })));
    }
    /**
     * Renders the non-impact icon (triangle warning).
     */
    renderNonImpactIcon() {
        return (h("svg", { class: "icon non-impact-icon", part: "icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "m21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01" })));
    }
    /**
     * Renders the informational icon (circle with info mark).
     */
    renderInformationalIcon() {
        return (h("svg", { class: "icon informational-icon", part: "icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("g", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2" }, h("circle", { cx: "12", cy: "12", r: "10" }), h("path", { d: "M12 16v-4m0-4h.01" }))));
    }
    /**
     * Renders the appropriate icon based on the impact level.
     */
    renderIcon() {
        switch (this.impactLevel) {
            case "impact":
                return this.renderImpactIcon();
            case "non-impact":
                return this.renderNonImpactIcon();
            case "informational":
                return this.renderInformationalIcon();
            default:
                return null;
        }
    }
    render() {
        var _a, _b;
        if (!this.isValidImpactLevel(this.impactLevel)) {
            return (h(Host, null, h("div", { class: "ls-status-count error" }, (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.t("ui:impact_level.invalid")) !== null && _b !== void 0 ? _b : "Ongeldig impactniveau")));
        }
        const classes = [
            "ls-status-count",
            this.impactLevel,
            this.isLoading && "loading",
        ]
            .filter(Boolean)
            .join(" ");
        return (h(Host, null, h("div", { class: classes, part: "container", ref: (el) => {
                this.containerElement = el;
            } }, h("div", { class: "header", part: "header" }, this.renderIcon(), h("span", { class: "label", part: "label" }, this.getImpactLabel())), h("span", { class: "count", part: "count" }, this.messageCount))));
    }
    static get style() { return lsStatusCountCss; }
}, [257, "ls-status-count", {
        "idKey": [1, "id-key"],
        "impactLevel": [1, "impact-level"],
        "messageCount": [32],
        "isLoading": [32],
        "errorState": [32]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ls-status-count"];
    components.forEach(tagName => { switch (tagName) {
        case "ls-status-count":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, LsStatusCount$1);
            }
            break;
    } });
}

const LsStatusCount = LsStatusCount$1;
const defineCustomElement = defineCustomElement$1;

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

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