var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { UMB_APP_LOG_VIEWER_CONTEXT } from '../../../logviewer-workspace.context-token.js';
import { css, html, customElement, queryAll, state } from '../../../../../../external/lit/index.js';
import { debounce } from '../../../../../core/utils/index.js';
import { LogLevelModel } from '../../../../../core/backend-api/index.js';
import { UmbLitElement } from '../../../../../core/lit-element/index.js';
import { path, query, toQueryString } from '../../../../../core/router/index.js';
import { consumeContext } from '../../../../../../libs/context-api/index.js';
let UmbLogViewerLogLevelFilterMenuElement = class UmbLogViewerLogLevelFilterMenuElement extends UmbLitElement {
    constructor() {
        super(...arguments);
        this._logLevelFilter = [];
        this.setLogLevelDebounce = debounce(this.#setLogLevel, 300);
    }
    #logViewerContext;
    set _logViewerContext(value) {
        this.#logViewerContext = value;
        this.#observeLogLevelFilter();
    }
    get _logViewerContext() {
        return this.#logViewerContext;
    }
    #observeLogLevelFilter() {
        this.observe(this._logViewerContext?.logLevelsFilter, (levelsFilter) => {
            this._logLevelFilter = levelsFilter ?? [];
        });
    }
    #setLogLevel() {
        const logLevels = Array.from(this._logLevelSelectorCheckboxes)
            .filter((checkbox) => checkbox.checked)
            .map((checkbox) => checkbox.value);
        let q = query();
        if (logLevels.length) {
            q = { ...q, loglevels: logLevels.join(',') };
        }
        else {
            delete q.loglevels;
        }
        window.history.pushState({}, '', `${path()}?${toQueryString(q)}`);
    }
    #selectAllLogLevels() {
        this._logLevelSelectorCheckboxes.forEach((checkbox) => (checkbox.checked = true));
        this.#setLogLevel();
    }
    #deselectAllLogLevels() {
        this._logLevelSelectorCheckboxes.forEach((checkbox) => (checkbox.checked = false));
        this.#setLogLevel();
    }
    #renderLogLevelSelector() {
        return html `
			<div id="log-level-selector" @change=${this.setLogLevelDebounce}>
				${Object.values(LogLevelModel).map((logLevel) => html `<uui-checkbox
							class="log-level-menu-item"
							.checked=${this._logLevelFilter.includes(logLevel)}
							.value=${logLevel}
							label="${logLevel}">
							<umb-log-viewer-level-tag .level=${logLevel}></umb-log-viewer-level-tag>
						</uui-checkbox>`)}
				<uui-button
					class="log-level-menu-item"
					@click=${this.#selectAllLogLevels}
					label=${this.localize.term('logViewer_selectAllLogLevelFilters')}>
					<umb-localize key="logViewer_selectAllLogLevelFilters">Select all</umb-localize>
				</uui-button>
				<uui-button
					class="log-level-menu-item"
					@click=${this.#deselectAllLogLevels}
					label=${this.localize.term('logViewer_deselectAllLogLevelFilters')}>
					<umb-localize key="logViewer_deselectAllLogLevelFilters">Deselect all</umb-localize>
				</uui-button>
			</div>
		`;
    }
    render() {
        return html `
			<umb-dropdown label=${this.localize.term('logViewer_selectLogLevels')}>
				<span slot="label">
					<umb-localize key="logViewer_logLevels">Log Levels</umb-localize>:
					${this._logLevelFilter.length > 0
            ? this._logLevelFilter.map((level) => html `<span class="log-level-button-indicator">${level}</span>`)
            : html `<umb-localize key="logViewer_all">All</umb-localize>`}
				</span>
				${this.#renderLogLevelSelector()}
			</umb-dropdown>
		`;
    }
    static { this.styles = [
        css `
			#log-level-selector {
				padding: var(--uui-box-default-padding, var(--uui-size-space-5, 18px));
				width: 150px;
				background-color: var(--uui-color-surface);
				box-shadow: var(--uui-shadow-depth-3);
				display: flex;
				flex-direction: column;
				gap: var(--uui-size-space-3);
			}

			.log-level-button-indicator {
				font-weight: 600;
			}

			.log-level-button-indicator:not(:last-of-type)::after {
				content: ', ';
			}
		`,
    ]; }
};
__decorate([
    queryAll('#log-level-selector > uui-checkbox')
], UmbLogViewerLogLevelFilterMenuElement.prototype, "_logLevelSelectorCheckboxes", void 0);
__decorate([
    state()
], UmbLogViewerLogLevelFilterMenuElement.prototype, "_logLevelFilter", void 0);
__decorate([
    consumeContext({ context: UMB_APP_LOG_VIEWER_CONTEXT })
], UmbLogViewerLogLevelFilterMenuElement.prototype, "_logViewerContext", null);
UmbLogViewerLogLevelFilterMenuElement = __decorate([
    customElement('umb-log-viewer-log-level-filter-menu')
], UmbLogViewerLogLevelFilterMenuElement);
export { UmbLogViewerLogLevelFilterMenuElement };
