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 { getUmbracoFieldSnippet } from '../../utils/index.js';
import { UmbTextStyles } from '../../../core/style/index.js';
import { css, html, customElement, state } from '../../../../external/lit/index.js';
import { UmbModalBaseElement } from '../../../core/modal/index.js';
// import of local components
import './components/template-field-dropdown-list/index.js';
import { UmbValidationContext, umbBindToValidation } from '../../../core/validation/index.js';
let UmbTemplatingPageFieldBuilderModalElement = class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseElement {
    constructor() {
        super(...arguments);
        this.#validation = new UmbValidationContext(this);
        this._haveDefault = false;
        this._recursive = false;
    }
    #validation;
    #close() {
        this.modalContext?.reject();
    }
    async #submit() {
        this._submitButtonState = 'waiting';
        try {
            await this.#validation.validate();
            this._submitButtonState = 'success';
            this.value = { output: getUmbracoFieldSnippet(this._field, this._default, this._recursive) };
            this.modalContext?.submit();
        }
        catch {
            this._submitButtonState = 'failed';
        }
    }
    /** TODO: Implement "Choose field" */
    #onChangeFieldValue(e) {
        this._field = e.target.value?.alias;
    }
    render() {
        return html `
			<umb-body-layout headline=${this.localize.term('template_insert')}>
				<uui-box>
					<div>
						<umb-property-layout orientation="vertical" label=${this.localize.term('templateEditor_chooseField')}>
							<umb-template-field-dropdown-list
								slot="editor"
								required
								${umbBindToValidation(this)}
								@change=${this.#onChangeFieldValue}
								exclude-media-type></umb-template-field-dropdown-list>
						</umb-property-layout>

						<uui-label for="page-field-default-value">
							<umb-localize key="templateEditor_defaultValue">Default value</umb-localize>
						</uui-label>
						${!this._haveDefault
            ? html `<uui-button
									label=${this.localize.term('templateEditor_addDefaultValue')}
									look="placeholder"
									@click=${() => (this._haveDefault = true)}></uui-button>`
            : html `<uui-input
									id="page-field-default-value"
									@change=${(e) => (this._default = e.target.value)}
									label=${this.localize.term('templateEditor_defaultValue')}></uui-input>`}

						<uui-label for="recursive"><umb-localize key="templateEditor_recursive">Recursive</umb-localize></uui-label>
						<uui-checkbox
							id="recursive"
							label=${this.localize.term('templateEditor_recursiveDescr')}
							@change=${(e) => (this._recursive = e.target.checked)}
							?disabled=${this._field ? false : true}></uui-checkbox>

						<uui-label><umb-localize key="templateEditor_outputSample">Output sample</umb-localize></uui-label>
						<umb-code-block style="max-height:500px;" language="C#" copy
							>${this._field ? getUmbracoFieldSnippet(this._field, this._default, this._recursive) : ''}</umb-code-block
						>
					</div>
				</uui-box>
				<uui-button
					slot="actions"
					@click=${this.#close}
					look="secondary"
					label=${this.localize.term('general_close')}></uui-button>
				<uui-button
					slot="actions"
					@click=${this.#submit}
					color="positive"
					look="primary"
					.state=${this._submitButtonState}
					label=${this.localize.term('general_submit')}></uui-button>
			</umb-body-layout>
		`;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			uui-box > div {
				display: flex;
				flex-direction: column;
				gap: var(--uui-size-space-2);
			}

			uui-label:not(:first-child) {
				margin-top: var(--uui-size-space-6);
			}
		`,
    ]; }
};
__decorate([
    state()
], UmbTemplatingPageFieldBuilderModalElement.prototype, "_field", void 0);
__decorate([
    state()
], UmbTemplatingPageFieldBuilderModalElement.prototype, "_haveDefault", void 0);
__decorate([
    state()
], UmbTemplatingPageFieldBuilderModalElement.prototype, "_default", void 0);
__decorate([
    state()
], UmbTemplatingPageFieldBuilderModalElement.prototype, "_recursive", void 0);
__decorate([
    state()
], UmbTemplatingPageFieldBuilderModalElement.prototype, "_submitButtonState", void 0);
UmbTemplatingPageFieldBuilderModalElement = __decorate([
    customElement('umb-templating-page-field-builder-modal')
], UmbTemplatingPageFieldBuilderModalElement);
export { UmbTemplatingPageFieldBuilderModalElement };
export default UmbTemplatingPageFieldBuilderModalElement;
