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 } from '../../../../external/lit/index.js';
import { fromCamelCase } from '../../utils/index.js';
import { umbExtensionsRegistry } from '../../extension-registry/index.js';
import { UMB_COLLECTION_CONTEXT, UmbCollectionDefaultElement } from '../../collection/index.js';
let UmbExtensionCollectionElement = class UmbExtensionCollectionElement extends UmbCollectionDefaultElement {
    #collectionContext;
    #options = [];
    constructor() {
        super();
        this.consumeContext(UMB_COLLECTION_CONTEXT, (collectionContext) => {
            this.#collectionContext = collectionContext;
        });
        this.observe(umbExtensionsRegistry.extensions, (extensions) => {
            const types = [...new Set(extensions.map((x) => x.type))];
            const options = types.sort().map((x) => ({ name: fromCamelCase(x), value: x }));
            this.#options = [{ name: 'All', value: '' }, ...options];
        });
    }
    #onChange(event) {
        const extensionType = event.target.value;
        this.#collectionContext?.setFilter({ extensionTypes: extensionType ? [extensionType] : undefined });
    }
    renderToolbar() {
        return html `
			<umb-collection-toolbar slot="header">
				<div id="toolbar">
					<umb-collection-filter-field></umb-collection-filter-field>
					<uui-select
						label="Select type..."
						placeholder="Select type..."
						.options=${this.#options}
						@change=${this.#onChange}></uui-select>
				</div>
			</umb-collection-toolbar>
		`;
    }
    static { this.styles = [
        css `
			#toolbar {
				display: flex;
				gap: var(--uui-size-space-5);
				justify-content: space-between;
				align-items: center;

				umb-collection-filter-field {
					flex: 1;
				}

				uui-select {
					flex: 1;
				}
			}
		`,
    ]; }
};
UmbExtensionCollectionElement = __decorate([
    customElement('umb-extension-collection')
], UmbExtensionCollectionElement);
export { UmbExtensionCollectionElement };
export default UmbExtensionCollectionElement;
export { UmbExtensionCollectionElement as element };
