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 { css, customElement, html, repeat, state } from '../../../../external/lit/index.js';
import { fromCamelCase } from '../../utils/index.js';
import { umbExtensionsRegistry } from '../../extension-registry/index.js';
import { umbFocus } from '../../lit-element/index.js';
import { UmbModalBaseElement } from '../../modal/index.js';
let UmbPropertyEditorUIPickerModalElement = class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement {
    constructor() {
        super(...arguments);
        this._groupedPropertyEditorUIs = [];
        this._propertyEditorUIs = [];
    }
    connectedCallback() {
        super.connectedCallback();
        this.#usePropertyEditorUIs();
    }
    #usePropertyEditorUIs() {
        this.observe(umbExtensionsRegistry.byType('propertyEditorUi'), (propertyEditorUIs) => {
            // Only include Property Editor UIs which has Property Editor Schema Alias
            this._propertyEditorUIs = propertyEditorUIs
                .filter((propertyEditorUi) => !!propertyEditorUi.meta.propertyEditorSchemaAlias)
                .sort((a, b) => a.meta.label.localeCompare(b.meta.label));
            this.#groupPropertyEditorUIs(this._propertyEditorUIs);
        });
    }
    #handleClick(propertyEditorUi) {
        this.value = { selection: [propertyEditorUi.alias] };
        this._submitModal();
    }
    #handleFilterInput(event) {
        const query = (event.target.value || '').toLowerCase();
        const result = !query
            ? this._propertyEditorUIs
            : this._propertyEditorUIs.filter((propertyEditorUI) => propertyEditorUI.name.toLowerCase().includes(query) || propertyEditorUI.alias.toLowerCase().includes(query));
        this.#groupPropertyEditorUIs(result);
    }
    #groupPropertyEditorUIs(items) {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-expect-error
        const grouped = Object.groupBy(items, (propertyEditorUi) => fromCamelCase(propertyEditorUi.meta.group));
        this._groupedPropertyEditorUIs = Object.keys(grouped)
            .sort((a, b) => a.localeCompare(b))
            .map((key) => ({ key, items: grouped[key] }));
    }
    render() {
        return html `
			<umb-body-layout headline=${this.localize.term('propertyEditorPicker_openPropertyEditorPicker')}>
				<uui-box>${this.#renderFilter()} ${this.#renderGrid()}</uui-box>
				<div slot="actions">
					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>
				</div>
			</umb-body-layout>
		`;
    }
    #renderFilter() {
        return html `
			<uui-input
				type="search"
				id="filter"
				@input=${this.#handleFilterInput}
				placeholder=${this.localize.term('placeholders_filter')}
				label=${this.localize.term('placeholders_filter')}
				${umbFocus()}>
				<uui-icon name="search" slot="prepend" id="filter-icon"></uui-icon>
			</uui-input>
		`;
    }
    #renderGrid() {
        return html `
			${repeat(this._groupedPropertyEditorUIs, (group) => group.key, (group) => html `
					<h4>${group.key}</h4>
					${this.#renderGroupItems(group.items)}
				`)}
		`;
    }
    #renderGroupItems(groupItems) {
        return html `
			<ul id="item-grid">
				${repeat(groupItems, (propertyEditorUI) => propertyEditorUI.alias, (propertyEditorUI) => {
            const label = this.localize.string(propertyEditorUI.meta.label || propertyEditorUI.name);
            return html `
							<li class="item" ?selected=${this.value.selection.includes(propertyEditorUI.alias)}>
								<button type="button" @click=${() => this.#handleClick(propertyEditorUI)}>
									<umb-icon name=${propertyEditorUI.meta.icon} class="icon"></umb-icon>
									<span class="label" title=${label}>${label}</span>
								</button>
							</li>
						`;
        })}
			</ul>
		`;
    }
    static { this.styles = [
        css `
			:host {
				display: block;
				height: 100%;
				container-type: inline-size;
			}

			#filter {
				width: 100%;
				margin-bottom: var(--uui-size-space-4);
			}

			#filter-icon {
				height: 100%;
				padding-left: var(--uui-size-space-2);
				display: flex;
				color: var(--uui-color-border);
			}

			#item-grid {
				display: grid;
				grid-template-columns: repeat(3, minmax(0, 1fr));
				margin: 0;
				padding: 0;
				grid-gap: var(--uui-size-space-4);
			}

			@container (min-width: 560px) {
				#item-grid {
					grid-template-columns: repeat(4, minmax(0, 1fr));
				}
			}

			@container (min-width: 740px) {
				#item-grid {
					grid-template-columns: repeat(5, minmax(0, 1fr));
				}
			}

			@container (min-width: 920px) {
				#item-grid {
					grid-template-columns: repeat(6, minmax(0, 1fr));
				}
			}

			#item-grid .item {
				display: flex;
				align-items: flex-start;
				justify-content: center;
				list-style: none;
				height: 100%;
				border: 1px solid transparent;
				border-radius: var(--uui-border-radius);
			}

			#item-grid .item:hover {
				background: var(--uui-color-surface-emphasis);
				color: var(--uui-color-interactive-emphasis);
				cursor: pointer;
			}

			#item-grid .item[selected] button {
				background: var(--uui-color-selected);
				color: var(--uui-color-selected-contrast);
			}

			#item-grid .item button {
				background: none;
				border: none;
				cursor: pointer;
				padding: var(--uui-size-space-3);
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: flex-start;
				font-size: 0.8rem;
				height: 100%;
				width: 100%;
				color: var(--uui-color-interactive);
				border-radius: var(--uui-border-radius);
			}

			#item-grid .item .icon {
				font-size: 2em;
				margin-bottom: var(--uui-size-space-2);
			}

			#item-grid .item .label {
				max-width: 100%;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
		`,
    ]; }
};
__decorate([
    state()
], UmbPropertyEditorUIPickerModalElement.prototype, "_groupedPropertyEditorUIs", void 0);
__decorate([
    state()
], UmbPropertyEditorUIPickerModalElement.prototype, "_propertyEditorUIs", void 0);
UmbPropertyEditorUIPickerModalElement = __decorate([
    customElement('umb-property-editor-ui-picker-modal')
], UmbPropertyEditorUIPickerModalElement);
export { UmbPropertyEditorUIPickerModalElement };
export default UmbPropertyEditorUIPickerModalElement;
