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_PICKER_CONTEXT } from '../picker.context.token.js';
import { UmbDefaultPickerSearchResultItemElement } from './result-item/default/default-picker-search-result-item.element.js';
import { UmbDefaultPickerSearchResultItemContext } from './result-item/default/default-picker-search-result-item.context.js';
import { css, customElement, html, nothing, property, repeat, state } from '../../../../external/lit/index.js';
import { UmbLitElement } from '../../lit-element/index.js';
let UmbPickerSearchResultElement = class UmbPickerSearchResultElement extends UmbLitElement {
    #pickerContext;
    constructor() {
        super();
        this._searching = false;
        this._items = [];
        this._isSearchable = false;
        this._currentPage = 1;
        this._totalPages = 1;
        this._totalItems = 0;
        this.pickableFilter = () => true;
        this.consumeContext(UMB_PICKER_CONTEXT, (context) => {
            this.#pickerContext = context;
            this.observe(this.#pickerContext?.search.searchable, (isSearchable) => (this._isSearchable = isSearchable ?? false), null);
            this.observe(this.#pickerContext?.search.executedQuery, (executedQuery) => (this._executedQuery = executedQuery), null);
            this.observe(this.#pickerContext?.search.searching, (searching) => (this._searching = searching ?? false), null);
            this.observe(this.#pickerContext?.search.resultItems, (items) => (this._items = items ?? []), null);
            this.observe(this.#pickerContext?.search.pagination.currentPage, (currentPage) => (this._currentPage = currentPage ?? 1), null);
            this.observe(this.#pickerContext?.search.pagination.totalPages, (totalPages) => (this._totalPages = totalPages ?? 1), null);
            this.observe(this.#pickerContext?.search.resultTotalItems, (totalItems) => (this._totalItems = totalItems ?? 0), null);
        });
    }
    render() {
        if (!this._isSearchable)
            return nothing;
        if (this._executedQuery?.query && this._searching === false && this._items.length === 0) {
            return this.#renderEmptyResult();
        }
        if (this._items.length === 0) {
            return;
        }
        return html `
			<uui-box id="result-container" class=${this._searching ? 'loading' : ''}>
				${repeat(this._items, (item) => item.unique, (item) => this.#renderResultItem(item))}
				${this.#renderPagination()}
			</uui-box>
		`;
    }
    #onPageChange(event) {
        this.#pickerContext?.search.pagination.setCurrentPageNumber(event.target.current);
        this.#pickerContext?.search.search();
    }
    #renderPagination() {
        // Don't show pagination if all items are loaded or there's only one page
        if (this._items.length === this._totalItems || this._totalPages <= 1) {
            return nothing;
        }
        return html `<uui-pagination
			.current=${this._currentPage}
			.total=${this._totalPages}
			firstlabel=${this.localize.term('general_first')}
			previouslabel=${this.localize.term('general_previous')}
			nextlabel=${this.localize.term('general_next')}
			lastlabel=${this.localize.term('general_last')}
			@change=${this.#onPageChange}></uui-pagination>`;
    }
    #renderEmptyResult() {
        return html `<uui-box>
			<small>No result for <strong>"${this._executedQuery?.query}"</strong>.</small>
		</uui-box>`;
    }
    #renderResultItem(item) {
        return html `
			<umb-extension-with-api-slot
				type="pickerSearchResultItem"
				.filter=${(manifest) => manifest.forEntityTypes.includes(item.entityType)}
				.elementProps=${{
            item,
            disabled: this.pickableFilter ? !this.pickableFilter(item) : undefined,
        }}
				.fallbackRenderMethod=${() => this.#renderFallbackResultItem(item)}></umb-extension-with-api-slot>
		`;
    }
    #renderFallbackResultItem(item) {
        const element = new UmbDefaultPickerSearchResultItemElement();
        element.item = item;
        element.disabled = this.pickableFilter ? !this.pickableFilter(item) : undefined;
        new UmbDefaultPickerSearchResultItemContext(element);
        return element;
    }
    static { this.styles = [
        css `
			:host {
				display: block;
			}

			#result-container.loading {
				opacity: 0.5;
			}

			umb-extension-with-api-slot {
				display: block;
				margin-bottom: var(--uui-size-3);

				&:last-of-type {
					margin-bottom: 0;
				}
			}

			uui-pagination {
				display: block;
				margin-top: var(--uui-size-layout-1);
			}
		`,
    ]; }
};
__decorate([
    state()
], UmbPickerSearchResultElement.prototype, "_executedQuery", void 0);
__decorate([
    state()
], UmbPickerSearchResultElement.prototype, "_searching", void 0);
__decorate([
    state()
], UmbPickerSearchResultElement.prototype, "_items", void 0);
__decorate([
    state()
], UmbPickerSearchResultElement.prototype, "_isSearchable", void 0);
__decorate([
    state()
], UmbPickerSearchResultElement.prototype, "_currentPage", void 0);
__decorate([
    state()
], UmbPickerSearchResultElement.prototype, "_totalPages", void 0);
__decorate([
    state()
], UmbPickerSearchResultElement.prototype, "_totalItems", void 0);
__decorate([
    property({ attribute: false })
], UmbPickerSearchResultElement.prototype, "pickableFilter", void 0);
UmbPickerSearchResultElement = __decorate([
    customElement('umb-picker-search-result')
], UmbPickerSearchResultElement);
export { UmbPickerSearchResultElement };
