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 { UmbLanguageCollectionRepository } from '../collection/index.js';
import { UMB_APP_LANGUAGE_CONTEXT } from '../constants.js';
import { css, html, customElement, state, repeat, query, nothing } from '../../../external/lit/index.js';
import { UmbLitElement } from '../../core/lit-element/index.js';
import { UMB_CURRENT_USER_CONTEXT } from '../../user/current-user/index.js';
let UmbAppLanguageSelectElement = class UmbAppLanguageSelectElement extends UmbLitElement {
    #collectionRepository;
    #appLanguageContext;
    #languagesObserver;
    // TODO: Here we have some read only state logic and then we have it again in the context. We should align this otherwise it will become a nightmare to maintain. [NL]
    #currentUserAllowedLanguages;
    #currentUserHasAccessToAllLanguages;
    constructor() {
        super();
        this._languages = [];
        this._appLanguageIsReadOnly = false;
        this._isOpen = false;
        this._disallowedLanguages = [];
        this.#collectionRepository = new UmbLanguageCollectionRepository(this);
        this.#onTriggerKeydown = (e) => {
            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
                this._popoverElement?.showPopover();
            }
            if (e.key === ' ') {
                this._popoverElement?.togglePopover();
            }
        };
        this.consumeContext(UMB_APP_LANGUAGE_CONTEXT, (instance) => {
            this.#appLanguageContext = instance;
            this.#observeAppLanguage();
        });
        this.consumeContext(UMB_CURRENT_USER_CONTEXT, (context) => {
            this.observe(context?.languages, (languages) => {
                this.#currentUserAllowedLanguages = languages;
                this.#checkForLanguageAccess();
            });
            this.observe(context?.hasAccessToAllLanguages, (hasAccessToAllLanguages) => {
                this.#currentUserHasAccessToAllLanguages = hasAccessToAllLanguages;
                this.#checkForLanguageAccess();
            });
        });
    }
    #checkForLanguageAccess() {
        // find all disallowed languages
        this._disallowedLanguages = this._languages?.filter((language) => {
            if (this.#currentUserHasAccessToAllLanguages) {
                return false;
            }
            return !this.#currentUserAllowedLanguages?.includes(language.unique);
        });
    }
    async #observeAppLanguage() {
        if (!this.#appLanguageContext)
            return;
        this.observe(this.#appLanguageContext.appLanguage, (language) => {
            this._appLanguage = language;
        });
        this.observe(this.#appLanguageContext.appLanguageReadOnlyState.isReadOnly, (isReadOnly) => {
            this._appLanguageIsReadOnly = isReadOnly;
        });
    }
    async #observeLanguages() {
        const { data } = await this.#collectionRepository.requestCollection({});
        // TODO: listen to changes
        if (data) {
            this._languages = data.items;
            this.#checkForLanguageAccess();
        }
    }
    #onBeforePopoverToggle(event) {
        // TODO: This ignorer is just neede for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        if (event.newState === 'open' && !this.#languagesObserver) {
            if (this._popoverElement) {
                const host = this.getBoundingClientRect();
                this._popoverElement.style.width = `${host.width}px`;
            }
            this.#observeLanguages();
        }
    }
    #onPopoverToggle(event) {
        // TODO: This ignorer is just neede for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        this._isOpen = event.newState === 'open';
    }
    #onTriggerClick() {
        if (this._isOpen) {
            this._popoverElement?.hidePopover();
        }
        else {
            this._popoverElement?.showPopover();
        }
        this.requestUpdate();
    }
    #onTriggerKeydown;
    #chooseLanguage(unique) {
        this.#appLanguageContext?.setLanguage(unique);
        this._popoverElement?.hidePopover();
    }
    #onLanguageSelectionChange(event) {
        if (!this._isOpen)
            return;
        const target = event.target;
        const value = target?.value;
        if (value) {
            this.#chooseLanguage(value);
        }
    }
    render() {
        return html `${this.#renderTrigger()} ${this.#renderContent()}`;
    }
    #renderTrigger() {
        return html ` <div
			id="toggle"
			data-mark="action:open"
			popovertarget="dropdown-popover"
			tabindex="0"
			@click=${this.#onTriggerClick}
			@keydown=${this.#onTriggerKeydown}>
			<span>
				${this._appLanguage?.name}
				${this._appLanguageIsReadOnly ? this.#renderReadOnlyTag(this._appLanguage?.unique) : nothing}
			</span>
			<uui-symbol-expand .open=${this._isOpen}></uui-symbol-expand>
		</div>`;
    }
    #renderContent() {
        return html ` <uui-popover-container
			id="dropdown-popover"
			data-mark="app-language-menu"
			@beforetoggle=${this.#onBeforePopoverToggle}
			@toggle=${this.#onPopoverToggle}>
			<umb-popover-layout>
				<uui-scroll-container style="max-height:calc(100vh - (var(--umb-header-layout-height) + 60px));">
					${this.#renderOptions()}
				</uui-scroll-container>
			</umb-popover-layout>
		</uui-popover-container>`;
    }
    #renderOptions() {
        if (!this._isOpen)
            return nothing;
        return html `<uui-combobox-list
			aria-label="App language"
			.for=${this}
			.value=${this._appLanguage?.unique || ''}
			@change=${this.#onLanguageSelectionChange}>
			${repeat(this._languages, (language) => language.unique, (language) => html `
					<uui-combobox-list-option tabindex="0" value=${language.unique}>
						${language.name}
						${this.#isLanguageReadOnly(language.unique) ? this.#renderReadOnlyTag(language.unique) : nothing}
					</uui-combobox-list-option>
				`)}
		</uui-combobox-list>`;
    }
    #isLanguageReadOnly(culture) {
        if (!culture)
            return false;
        return this._disallowedLanguages.find((language) => language.unique === culture) ? true : false;
    }
    #renderReadOnlyTag(culture) {
        if (!culture)
            return nothing;
        return html `<uui-tag slot="badge" look="secondary">${this.localize.term('general_readOnly')}</uui-tag>`;
    }
    static { this.styles = [
        css `
			:host {
				display: block;
				position: relative;
				z-index: 10;
			}

			#toggle {
				color: var(--uui-color-text);
				text-align: left;
				background: none;
				border: none;
				height: var(--umb-header-layout-height);
				padding: 0 var(--uui-size-8);
				border-bottom: 1px solid var(--uui-color-border);
				font-size: 14px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				cursor: pointer;
				font-family: inherit;
				box-sizing: border-box;
			}

			#toggle:hover {
				background-color: var(--uui-color-surface-emphasis);
			}

			uui-menu-item {
				color: var(--uui-color-text);

				width: auto;
			}
		`,
    ]; }
};
__decorate([
    query('#dropdown-popover')
], UmbAppLanguageSelectElement.prototype, "_popoverElement", void 0);
__decorate([
    state()
], UmbAppLanguageSelectElement.prototype, "_languages", void 0);
__decorate([
    state()
], UmbAppLanguageSelectElement.prototype, "_appLanguage", void 0);
__decorate([
    state()
], UmbAppLanguageSelectElement.prototype, "_appLanguageIsReadOnly", void 0);
__decorate([
    state()
], UmbAppLanguageSelectElement.prototype, "_isOpen", void 0);
__decorate([
    state()
], UmbAppLanguageSelectElement.prototype, "_disallowedLanguages", void 0);
UmbAppLanguageSelectElement = __decorate([
    customElement('umb-app-language-select')
], UmbAppLanguageSelectElement);
export { UmbAppLanguageSelectElement };
export default UmbAppLanguageSelectElement;
