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 { html, css, customElement, query, state } from '../../../../../../external/lit/index.js';
import { UmbModalBaseElement } from '../../../../../core/modal/index.js';
let UmbLogViewerSaveSearchModalElement = class UmbLogViewerSaveSearchModalElement extends UmbModalBaseElement {
    constructor() {
        super(...arguments);
        this._hasValue = false;
    }
    _handleClose() {
        this.modalContext?.reject();
    }
    _handleSubmit() {
        if (!this.data?.query)
            return;
        this.value = { name: this._input.value, query: this.data.query };
        this.modalContext?.submit();
    }
    #validate(event) {
        const target = event.target;
        this._hasValue = target.value.length > 0;
    }
    render() {
        return html `
			<uui-dialog-layout headline=${this.localize.term('logViewer_saveSearch')}>
				<umb-localize key="logViewer_saveSearchDescription"> Enter a friendly name for your search query </umb-localize>
				<uui-form-layout-item>
					<uui-label slot="label"><umb-localize key="logViewer_query">Query</umb-localize>:</uui-label>
					<span>${this.data?.query}</span>
				</uui-form-layout-item>
				<uui-form-layout-item>
					<uui-label slot="label" for="input"><umb-localize key="general_name">Name</umb-localize>:</uui-label>
					<uui-input
						label=${this.localize.term('logViewer_searchName')}
						id="input"
						@input=${this.#validate}></uui-input>
				</uui-form-layout-item>

				<uui-button
					slot="actions"
					@click="${this._handleClose}"
					label=${this.localize.term('general_close')}></uui-button>
				<uui-button
					.disabled=${!this._hasValue}
					slot="actions"
					look="primary"
					color="positive"
					label=${this.localize.term('logViewer_saveSearch')}
					@click="${this._handleSubmit}"></uui-button>
			</uui-dialog-layout>
		`;
    }
    static { this.styles = [
        css `
			uui-input {
				width: 100%;
			}
		`,
    ]; }
};
__decorate([
    query('uui-input')
], UmbLogViewerSaveSearchModalElement.prototype, "_input", void 0);
__decorate([
    state()
], UmbLogViewerSaveSearchModalElement.prototype, "_hasValue", void 0);
UmbLogViewerSaveSearchModalElement = __decorate([
    customElement('umb-log-viewer-save-search-modal')
], UmbLogViewerSaveSearchModalElement);
export default UmbLogViewerSaveSearchModalElement;
