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 { UMB_PREVIEW_CONTEXT } from '../context/preview.context-token.js';
import { css, customElement, html, nothing, query, repeat, state } from '../../../external/lit/index.js';
import { UmbLitElement } from '../../core/lit-element/index.js';
import { UmbLanguageCollectionRepository } from '../../language/index.js';
let UmbPreviewCultureElement = class UmbPreviewCultureElement extends UmbLitElement {
    #languageRepository;
    constructor() {
        super();
        this.#languageRepository = new UmbLanguageCollectionRepository(this);
        this._cultures = [];
        this._popoverOpen = false;
        this.#onBlur = () => {
            if (this._popoverOpen) {
                this._popoverElement?.hidePopover();
            }
        };
        this.addEventListener('blur', this.#onBlur, true); // Use capture phase to catch blur events
    }
    connectedCallback() {
        super.connectedCallback();
        this.hidden = true;
        this.#loadCultures();
    }
    async #loadCultures() {
        const { data: langauges } = await this.#languageRepository.requestCollection({ skip: 0, take: 100 });
        this._cultures = langauges?.items ?? [];
        const searchParams = new URLSearchParams(window.location.search);
        const culture = searchParams.get('culture');
        if (culture && culture !== this._culture?.unique) {
            this._culture = this._cultures.find((c) => c.unique === culture);
        }
        this.hidden = !this._cultures.length;
    }
    async #onClick(culture) {
        if (this._culture === culture)
            return;
        this._culture = culture;
        const previewContext = await this.getContext(UMB_PREVIEW_CONTEXT);
        previewContext?.updateIFrame({ culture: culture.unique });
        this._popoverElement?.hidePopover();
    }
    #onPopoverToggle(event) {
        this._popoverOpen = event.newState === 'open';
    }
    #onBlur;
    render() {
        if (this._cultures.length <= 1)
            return nothing;
        return html `
			<uui-button look="primary" popovertarget="cultures-popover">
				<div>
					<uui-icon name="icon-globe"></uui-icon>
					<span>${this._culture?.name ?? this.localize.term('treeHeaders_languages')}</span>
				</div>
				<uui-symbol-expand slot="extra" id="expand-symbol" .open=${this._popoverOpen}></uui-symbol-expand>
			</uui-button>
			<uui-popover-container id="cultures-popover" placement="top-end" @toggle=${this.#onPopoverToggle}>
				<umb-popover-layout>
					${repeat(this._cultures, (item) => item.unique, (item) => html `
							<uui-menu-item
								label=${item.name}
								?active=${item.unique === this._culture?.unique}
								@click=${() => this.#onClick(item)}>
								<uui-icon slot="icon" name="icon-globe"></uui-icon>
							</uui-menu-item>
						`)}
				</umb-popover-layout>
			</uui-popover-container>
		`;
    }
    static { this.styles = [
        css `
			:host {
				display: flex;
				border-left: 1px solid var(--uui-color-header-contrast);
				--uui-button-font-weight: 400;
				--uui-button-padding-left-factor: 3;
				--uui-button-padding-right-factor: 3;
				--uui-menu-item-flat-structure: 1;
			}

			:host([hidden]) {
				display: none;
			}

			#expand-symbol {
				transform: rotate(-90deg);
				margin-left: var(--uui-size-space-3, 9px);

				&[open] {
					transform: rotate(0deg);
				}
			}

			uui-button > div {
				display: flex;
				align-items: center;
				gap: var(--uui-size-2, 6px);
			}

			umb-popover-layout {
				--uui-color-surface: var(--uui-color-header-surface);
				--uui-color-border: var(--uui-color-header-surface);
				color: var(--uui-color-header-contrast);
			}
		`,
    ]; }
};
__decorate([
    query('#cultures-popover')
], UmbPreviewCultureElement.prototype, "_popoverElement", void 0);
__decorate([
    state()
], UmbPreviewCultureElement.prototype, "_culture", void 0);
__decorate([
    state()
], UmbPreviewCultureElement.prototype, "_cultures", void 0);
__decorate([
    state()
], UmbPreviewCultureElement.prototype, "_popoverOpen", void 0);
UmbPreviewCultureElement = __decorate([
    customElement('umb-preview-culture')
], UmbPreviewCultureElement);
export { UmbPreviewCultureElement };
export { UmbPreviewCultureElement as element };
