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 { UmbModalBaseElement } from '../../component/modal-base.element.js';
import { css, html, customElement, repeat, nothing, when, state, ifDefined, } from '../../../../../external/lit/index.js';
import { UmbTextStyles } from '../../../style/index.js';
import { umbFocus } from '../../../lit-element/index.js';
let UmbItemPickerModalElement = class UmbItemPickerModalElement extends UmbModalBaseElement {
    constructor() {
        super(...arguments);
        this._filtered = [];
    }
    #close() {
        this.modalContext?.reject();
    }
    #filter(event) {
        if (!this.data)
            return;
        if (event.target.value) {
            const query = event.target.value.toLowerCase();
            this._filtered = this.data.items.filter((item) => item.label.toLowerCase().includes(query) || item.value.toLowerCase().includes(query));
        }
        else {
            this._filtered = this.data.items;
        }
    }
    #submit(item) {
        this.modalContext?.setValue(item);
        this.modalContext?.submit();
    }
    connectedCallback() {
        super.connectedCallback();
        if (!this.data)
            return;
        this._filtered = this.data.items;
    }
    render() {
        if (!this.data)
            return nothing;
        const items = this._filtered;
        return html `
			<umb-body-layout headline=${this.localize.string(this.data.headline)}>
				<div id="main">
					<uui-input
						type="search"
						placeholder=${this.localize.term('placeholders_filter')}
						@input=${this.#filter}
						${umbFocus()}>
						<div slot="prepend">
							<uui-icon name="search"></uui-icon>
						</div>
					</uui-input>
					${when(items.length, () => html `
							<uui-box>
								<uui-ref-list>
									${repeat(items, (item) => item.value, (item) => html `
											<umb-ref-item
												name=${this.localize.string(item.label)}
												detail=${ifDefined(item.description)}
												icon=${ifDefined(item.icon)}
												@open=${() => this.#submit(item)}>
											</umb-ref-item>
										`)}
								</uui-ref-list>
							</uui-box>
						`, () => html `<p>There are no items to select.</p>`)}
				</div>
				<div slot="actions">
					<uui-button @click=${this.#close} label="${this.localize.term('general_close')}"></uui-button>
				</div>
			</umb-body-layout>
		`;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			#main {
				display: flex;
				flex-direction: column;
				gap: var(--uui-size-space-5);
			}

			uui-box > uui-input {
				width: 100%;
			}

			uui-box > uui-button {
				display: block;
				--uui-button-content-align: flex-start;
			}

			uui-box > uui-button:not(:last-of-type) {
				margin-bottom: var(--uui-size-space-5);
			}

			h4 {
				text-align: left;
				margin: 0.5rem 0;
			}

			p {
				text-align: left;
				margin: 0 0 0.5rem 0;
			}
		`,
    ]; }
};
__decorate([
    state()
], UmbItemPickerModalElement.prototype, "_filtered", void 0);
UmbItemPickerModalElement = __decorate([
    customElement('umb-item-picker-modal')
], UmbItemPickerModalElement);
export { UmbItemPickerModalElement };
export default UmbItemPickerModalElement;
