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 { UmbDocumentLinkPickerContext } from './document-link-picker.context.js';
import { UMB_DOCUMENT_ENTITY_TYPE, UMB_DOCUMENT_TREE_ALIAS } from '../../documents/documents/index.js';
import { css, customElement, html, nothing, repeat, state } from '../../../external/lit/index.js';
import { UmbModalBaseElement } from '../../core/modal/index.js';
const EMPTY_VALUE = 'empty_value';
let UmbDocumentLinkPickerModalElement = class UmbDocumentLinkPickerModalElement extends UmbModalBaseElement {
    #pickerContext;
    constructor() {
        super();
        this._languages = [];
        this._hasSelection = false;
        this._selectionConfiguration = {
            multiple: false,
            selectable: true,
            selection: [],
        };
        this.#pickerContext = new UmbDocumentLinkPickerContext(this);
        this.observe(this.#pickerContext.languages, (languages) => {
            this._languages = languages;
        });
        this.observe(this.#pickerContext.culture, (culture) => {
            this._selectedCulture = culture;
        });
        this.observe(this.#pickerContext.selection.hasSelection, (hasSelection) => {
            this._hasSelection = hasSelection;
        });
    }
    // Tree Selection
    #onTreeItemSelected(event) {
        event.stopPropagation();
        this.#pickerContext.selection.select(event.unique);
    }
    #onTreeItemDeselected(event) {
        event.stopPropagation();
        this.#pickerContext.selection.deselect(event.unique);
    }
    async #onSubmitModal() {
        const selectedItemUnique = this.#pickerContext.selection.getSelection()[0];
        if (!selectedItemUnique)
            return;
        this.value = {
            unique: selectedItemUnique,
            entityType: UMB_DOCUMENT_ENTITY_TYPE,
            culture: (await this.#pickerContext.getCulture()) || undefined,
        };
        this._submitModal();
    }
    render() {
        return html `
			<umb-body-layout headline=${this.localize.term('general_choose')}>
				${this.#renderLanguageSelector()} ${this.#renderSearch()}
				<uui-box>
					<umb-tree
						alias=${UMB_DOCUMENT_TREE_ALIAS}
						.props=${{
            hideTreeItemActions: true,
            hideTreeRoot: true,
            selectionConfiguration: this._selectionConfiguration,
        }}
						@selected=${this.#onTreeItemSelected}
						@deselected=${this.#onTreeItemDeselected}></umb-tree>
				</uui-box>
				<div slot="actions">
					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>
					<uui-button
						color="positive"
						look="primary"
						?disabled=${!this._hasSelection}
						label=${this.localize.term('general_choose')}
						@click=${this.#onSubmitModal}></uui-button>
				</div>
			</umb-body-layout>
		`;
    }
    #renderSearch() {
        return html `
			<umb-picker-search-field></umb-picker-search-field>
			<umb-picker-search-result></umb-picker-search-result>
		`;
    }
    #renderLanguageSelector() {
        if (!this.data?.allowCultureSpecificLinks)
            return nothing;
        if (this._languages.length <= 1)
            return nothing;
        const value = this._selectedCulture || EMPTY_VALUE;
        return html `
			<uui-combobox
				placeholder=${this.localize.term('linkPicker_selectLanguageHint')}
				.value=${value}
				@change=${this.#onLanguageSelectionChange}>
				<uui-combobox-list>
					<uui-combobox-list-option value=${EMPTY_VALUE}
						>${this.localize.term('linkPicker_selectLanguageDefault')}</uui-combobox-list-option
					>
					${repeat(this._languages, (language) => language.unique, (language) => html `
							<uui-combobox-list-option value=${language.unique}> ${language.name} </uui-combobox-list-option>
						`)}
				</uui-combobox-list>
			</uui-combobox>
		`;
    }
    async #onLanguageSelectionChange(event) {
        const target = event.target;
        const value = target?.value;
        await this.#pickerContext.setCulture(!value || value === EMPTY_VALUE ? null : value);
    }
    static { this.styles = [
        css `
			uui-combobox {
				width: 100%;
				margin-bottom: var(--uui-size-space-3);
			}
		`,
    ]; }
};
__decorate([
    state()
], UmbDocumentLinkPickerModalElement.prototype, "_languages", void 0);
__decorate([
    state()
], UmbDocumentLinkPickerModalElement.prototype, "_selectedCulture", void 0);
__decorate([
    state()
], UmbDocumentLinkPickerModalElement.prototype, "_hasSelection", void 0);
__decorate([
    state()
], UmbDocumentLinkPickerModalElement.prototype, "_selectionConfiguration", void 0);
UmbDocumentLinkPickerModalElement = __decorate([
    customElement('umb-document-link-picker-modal')
], UmbDocumentLinkPickerModalElement);
export { UmbDocumentLinkPickerModalElement };
export { UmbDocumentLinkPickerModalElement as element };
