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 { CodeSnippetType } from '../../types.js';
import { UMB_TEMPLATING_PAGE_FIELD_BUILDER_MODAL } from '../templating-page-field-builder/templating-page-field-builder-modal.token.js';
import { UMB_PARTIAL_VIEW_PICKER_MODAL } from '../../partial-views/index.js';
import { UmbTextStyles } from '../../../core/style/index.js';
import { css, html, customElement } from '../../../../external/lit/index.js';
import { UMB_MODAL_MANAGER_CONTEXT, UmbModalBaseElement } from '../../../core/modal/index.js';
import { UMB_DICTIONARY_PICKER_MODAL } from '../../../dictionary/index.js';
let UmbTemplatingItemPickerModalElement = class UmbTemplatingItemPickerModalElement extends UmbModalBaseElement {
    _close() {
        this.modalContext?.reject();
    }
    #modalContext;
    constructor() {
        super();
        this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (instance) => {
            this.#modalContext = instance;
        });
    }
    async #openTemplatingPageFieldModal() {
        const pageFieldBuilderContext = this.#modalContext?.open(this, UMB_TEMPLATING_PAGE_FIELD_BUILDER_MODAL);
        const result = await pageFieldBuilderContext?.onSubmit().catch(() => undefined);
        if (result === undefined)
            return;
        const value = pageFieldBuilderContext?.getValue().output;
        if (!value)
            return;
        this.value = { value, type: CodeSnippetType.pageField };
        this.modalContext?.submit();
    }
    async #openPartialViewPickerModal() {
        const partialViewPickerContext = this.#modalContext?.open(this, UMB_PARTIAL_VIEW_PICKER_MODAL);
        const result = await partialViewPickerContext?.onSubmit().catch(() => undefined);
        if (result === undefined)
            return;
        const value = partialViewPickerContext?.getValue().selection[0];
        if (!value)
            return;
        this.value = {
            value: value,
            type: CodeSnippetType.partialView,
        };
        this.modalContext?.submit();
    }
    async #openDictionaryItemPickerModal() {
        const dictionaryItemPickerModal = this.#modalContext?.open(this, UMB_DICTIONARY_PICKER_MODAL, {
            data: {
                pickableFilter: (item) => item.unique !== null,
            },
        });
        const result = await dictionaryItemPickerModal?.onSubmit().catch(() => undefined);
        if (result === undefined)
            return;
        const dictionaryItem = dictionaryItemPickerModal?.getValue().selection[0];
        if (!dictionaryItem)
            return;
        this.value = { value: dictionaryItem, type: CodeSnippetType.dictionaryItem };
        this.modalContext?.submit();
    }
    render() {
        return html `
			<umb-body-layout headline=${this.localize.term('template_insert')}>
				<uui-box> ${this.#renderItems()} </uui-box>
				<uui-button
					slot="actions"
					@click=${this._close}
					look="secondary"
					label=${this.localize.term('general_close')}></uui-button>
			</umb-body-layout>
		`;
    }
    #renderItems() {
        return html `<div id="main">
			<uui-button
				@click=${this.#openTemplatingPageFieldModal}
				look="placeholder"
				label=${this.localize.term('template_insert')}>
				<h3><umb-localize key="template_insertPageField">Value</umb-localize></h3>
				<p>
					<umb-localize key="template_insertPageFieldDesc">
						Displays the value of a named field from the current page, with options to modify the value or fallback to
						alternative values.
					</umb-localize>
				</p>
			</uui-button>
			${!this.data?.hidePartialViews
            ? html `<uui-button
						@click=${this.#openPartialViewPickerModal}
						look="placeholder"
						label=${this.localize.term('template_insert')}>
						<h3><umb-localize key="template_insertPartialView">Partial view</umb-localize></h3>
						<p>
							<umb-localize key="template_insertPartialViewDesc">
								A partial view is a separate template file which can be rendered inside another template, it's great for
								reusing markup or for separating complex templates into separate files.
							</umb-localize>
						</p>
					</uui-button>`
            : ''}
			<uui-button
				@click=${this.#openDictionaryItemPickerModal}
				look="placeholder"
				label=${this.localize.term('template_insertDictionaryItem')}>
				<h3><umb-localize key="template_insertDictionaryItem">Dictionary Item</umb-localize></h3>
				<p>
					<umb-localize key="template_insertDictionaryItemDesc">
						A dictionary item is a placeholder for a translatable piece of text, which makes it easy to create designs
						for multilingual websites.
					</umb-localize>
				</p>
			</uui-button>
		</div>`;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			#main uui-button:not(:last-of-type) {
				display: block;
				margin-bottom: var(--uui-size-space-5);
			}

			h3,
			p {
				text-align: left;
			}
		`,
    ]; }
};
UmbTemplatingItemPickerModalElement = __decorate([
    customElement('umb-templating-item-picker-modal')
], UmbTemplatingItemPickerModalElement);
export { UmbTemplatingItemPickerModalElement };
export default UmbTemplatingItemPickerModalElement;
