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 { UmbCultureRepository } from '../../repository/culture.repository.js';
import { UmbChangeEvent } from '../../../event/index.js';
import { html, repeat, ifDefined, customElement, property, state } from '../../../../../external/lit/index.js';
import { UUIFormControlMixin } from '../../../../../external/uui/index.js';
import { UmbLitElement } from '../../../lit-element/index.js';
let UmbInputCultureSelectElement = class UmbInputCultureSelectElement extends UUIFormControlMixin(UmbLitElement, '') {
    constructor() {
        super(...arguments);
        /**
         * Disables the input
         * @type {boolean}
         * @attr
         * @default false
         */
        this.disabled = false;
        /**
         * Disables the input
         * @type {boolean}
         * @attr
         * @default false
         */
        this.readonly = false;
        this._cultures = [];
        this._search = '';
        this.#cultureRepository = new UmbCultureRepository(this);
    }
    #cultureRepository;
    getFormElement() {
        return undefined;
    }
    async firstUpdated() {
        const { data } = await this.#cultureRepository.requestCultures();
        if (data) {
            this._cultures = data.items;
        }
    }
    #onSearchChange(event) {
        event.stopPropagation();
        const target = event.composedPath()[0];
        this._search = target.search;
    }
    #onCultureChange(event) {
        event.stopPropagation();
        const target = event.composedPath()[0];
        this.value = target.value;
        const culture = this._cultures.find((culture) => culture.name.toLowerCase() === this.value.toLowerCase());
        this.selectedCultureName = culture?.englishName;
        this.dispatchEvent(new UmbChangeEvent());
    }
    get #filteredCultures() {
        return this._cultures.filter((culture) => {
            return culture.englishName?.toLowerCase().includes(this._search.toLowerCase());
        });
    }
    get #fromAvailableCultures() {
        return this._cultures.find((culture) => culture.name.toLowerCase() === this.value?.toLowerCase());
    }
    render() {
        return html `
			<!-- TODO: comboxbox doesn't support disabled or readonly mode yet. This is a temp solution -->
			${this.disabled || this.readonly
            ? html `${this.#fromAvailableCultures?.englishName}`
            : html `
						<uui-combobox
							value=${ifDefined(this.#fromAvailableCultures?.name)}
							@change=${this.#onCultureChange}
							@search=${this.#onSearchChange}>
							<uui-combobox-list>
								${repeat(this.#filteredCultures, (culture) => culture.name, (culture) => html `
										<uui-combobox-list-option value=${ifDefined(culture.name)}
											>${culture.englishName}</uui-combobox-list-option
										>
									`)}
							</uui-combobox-list>
						</uui-combobox>
					`}
		`;
    }
};
__decorate([
    property({ type: Boolean, reflect: true })
], UmbInputCultureSelectElement.prototype, "disabled", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], UmbInputCultureSelectElement.prototype, "readonly", void 0);
__decorate([
    state()
], UmbInputCultureSelectElement.prototype, "_cultures", void 0);
__decorate([
    state()
], UmbInputCultureSelectElement.prototype, "_search", void 0);
UmbInputCultureSelectElement = __decorate([
    customElement('umb-input-culture-select')
], UmbInputCultureSelectElement);
export { UmbInputCultureSelectElement };
export default UmbInputCultureSelectElement;
