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 { getInsertDictionarySnippet, getInsertPartialSnippet } from '../../utils/index.js';
import { UMB_TEMPLATING_ITEM_PICKER_MODAL, } from '../../modals/templating-item-picker/templating-item-picker-modal.token.js';
import { CodeSnippetType } from '../../types.js';
import { UMB_TEMPLATING_PAGE_FIELD_BUILDER_MODAL } from '../../modals/templating-page-field-builder/templating-page-field-builder-modal.token.js';
import { UmbDictionaryDetailRepository, UMB_DICTIONARY_PICKER_MODAL } from '../../../dictionary/index.js';
import { customElement, property, css, html } from '../../../../external/lit/index.js';
import { UmbTextStyles } from '../../../core/style/index.js';
import { UMB_MODAL_MANAGER_CONTEXT } from '../../../core/modal/index.js';
import { UmbLitElement } from '../../../core/lit-element/index.js';
import { UMB_PARTIAL_VIEW_PICKER_MODAL } from '../../partial-views/index.js';
let UmbTemplatingInsertMenuElement = class UmbTemplatingInsertMenuElement extends UmbLitElement {
    #modalContext;
    #dictionaryDetailRepository;
    constructor() {
        super();
        this.value = '';
        this.disabled = false;
        this.hidePartialViews = false;
        this.#dictionaryDetailRepository = new UmbDictionaryDetailRepository(this);
        this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (instance) => {
            this.#modalContext = instance;
        });
    }
    async determineInsertValue(modalValue) {
        const { type, value } = modalValue;
        switch (type) {
            case CodeSnippetType.partialView: {
                const regex = /^%2F|%25dot%25cshtml$/g;
                const prettyPath = value.replace(regex, '').replace(/%2F/g, '/');
                this.value = getInsertPartialSnippet(prettyPath);
                this.#dispatchInsertEvent();
                break;
            }
            case CodeSnippetType.dictionaryItem: {
                await this.#getDictionaryItemSnippet(value);
                this.#dispatchInsertEvent();
                break;
            }
            case CodeSnippetType.pageField: {
                this.value = value;
                this.#dispatchInsertEvent();
                break;
            }
        }
    }
    async #getDictionaryItemSnippet(unique) {
        if (unique === null)
            return;
        const { data } = await this.#dictionaryDetailRepository.requestByUnique(unique);
        this.value = getInsertDictionarySnippet(data?.name ?? '');
    }
    async #openTemplatingItemPickerModal() {
        const itemPickerContext = this.#modalContext?.open(this, UMB_TEMPLATING_ITEM_PICKER_MODAL, {
            data: { hidePartialViews: this.hidePartialViews },
        });
        const result = await itemPickerContext?.onSubmit().catch(() => undefined);
        if (result === undefined)
            return;
        const value = itemPickerContext?.getValue();
        if (!value)
            return;
        this.determineInsertValue(value);
    }
    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.determineInsertValue({ type: CodeSnippetType.partialView, value });
    }
    async #openDictionaryItemPickerModal() {
        const dictionaryItemPickerContext = this.#modalContext?.open(this, UMB_DICTIONARY_PICKER_MODAL);
        const result = await dictionaryItemPickerContext?.onSubmit().catch(() => undefined);
        if (result === undefined)
            return;
        const value = dictionaryItemPickerContext?.getValue().selection[0];
        if (!value)
            return;
        this.determineInsertValue({ type: CodeSnippetType.dictionaryItem, value });
    }
    async #openPageFieldBuilderModal() {
        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;
        // The output is already built due to the preview in the modal. Can insert it directly now.
        this.value = value;
        this.#dispatchInsertEvent();
    }
    #dispatchInsertEvent() {
        this.dispatchEvent(new CustomEvent('insert', { bubbles: false, cancelable: true, composed: false }));
    }
    render() {
        return html `
			<uui-button-group>
				<uui-button
					look="secondary"
					?disabled=${this.disabled}
					@click=${this.#openTemplatingItemPickerModal}
					label=${this.localize.term('template_insert')}>
					<uui-icon name="icon-add"></uui-icon>${this.localize.term('template_insert')}
				</uui-button>
				<umb-dropdown
					look="secondary"
					compact
					?disabled=${this.disabled}
					placement="bottom-end"
					id="insert-button"
					label=${this.localize.term('template_insert')}>
					<uui-menu-item
						class="insert-menu-item"
						label=${this.localize.term('template_insertPageField')}
						title=${this.localize.term('template_insertPageField')}
						@click=${this.#openPageFieldBuilderModal}></uui-menu-item>
					${!this.hidePartialViews
            ? html `<uui-menu-item
								class="insert-menu-item"
								label=${this.localize.term('template_insertPartialView')}
								title=${this.localize.term('template_insertPartialView')}
								@click=${this.#openPartialViewPickerModal}>
							</uui-menu-item>`
            : ''}
					<uui-menu-item
						class="insert-menu-item"
						label=${this.localize.term('template_insertDictionaryItem')}
						title=${this.localize.term('template_insertDictionaryItem')}
						@click=${this.#openDictionaryItemPickerModal}>
					</uui-menu-item>
				</umb-dropdown>
			</uui-button-group>
		`;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			:host {
				--umb-header-layout-height: 70px;
			}

			.insert-menu-item {
				width: 100%;
			}

			uui-icon[name='icon-add'] {
				margin-right: var(--uui-size-4);
			}
		`,
    ]; }
};
__decorate([
    property()
], UmbTemplatingInsertMenuElement.prototype, "value", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], UmbTemplatingInsertMenuElement.prototype, "disabled", void 0);
__decorate([
    property({ type: Boolean })
], UmbTemplatingInsertMenuElement.prototype, "hidePartialViews", void 0);
UmbTemplatingInsertMenuElement = __decorate([
    customElement('umb-templating-insert-menu')
], UmbTemplatingInsertMenuElement);
export { UmbTemplatingInsertMenuElement };
