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_COLLECTION_CONTEXT } from '../default/index.js';
import { css, customElement, html, nothing, query, repeat, state } from '../../../../external/lit/index.js';
import { observeMultiple } from '../../../../libs/observable-api/index.js';
import { UmbLitElement } from '../../lit-element/index.js';
import { UmbTextStyles } from '../../style/index.js';
import { UMB_ENTITY_WORKSPACE_CONTEXT } from '../../workspace/index.js';
import { UMB_ROUTE_CONTEXT } from '../../router/index.js';
let UmbCollectionViewBundleElement = class UmbCollectionViewBundleElement extends UmbLitElement {
    #collectionContext;
    constructor() {
        super();
        this._views = [];
        this.consumeContext(UMB_ROUTE_CONTEXT, (context) => {
            this.observe(context?.activePath, (activePath) => {
                this._collectionRootPathName = activePath;
            });
        });
        this.consumeContext(UMB_COLLECTION_CONTEXT, (context) => {
            this.#collectionContext = context;
            this.#observeCollection();
        });
        this.consumeContext(UMB_ENTITY_WORKSPACE_CONTEXT, (context) => {
            this._entityUnique = context?.getUnique() ?? '';
        });
    }
    #observeCollection() {
        if (!this.#collectionContext)
            return;
        this.observe(this.#collectionContext.view.currentView, (currentView) => {
            if (!currentView)
                return;
            this._currentView = this._views.find((view) => view.alias === currentView.alias);
        }, 'umbCurrentCollectionViewObserver');
        this.observe(observeMultiple([this.#collectionContext.view.views, this.#collectionContext.viewLayouts]), ([manifests, viewLayouts]) => {
            if (!manifests?.length && !viewLayouts?.length)
                return;
            this._views = this.#mapManifestToViewLayout(manifests, viewLayouts);
        }, 'umbCollectionViewsAndLayoutsObserver');
    }
    #mapManifestToViewLayout(manifests, viewLayouts) {
        if (viewLayouts.length > 0) {
            const layouts = [];
            viewLayouts.forEach((viewLayout) => {
                const viewManifest = manifests.find((manifest) => manifest.alias === viewLayout.collectionView);
                if (!viewManifest)
                    return;
                layouts.push({
                    alias: viewManifest.alias,
                    label: viewLayout.name ?? viewManifest.meta.label,
                    icon: viewLayout.icon ?? viewManifest.meta.icon,
                    pathName: viewManifest.meta.pathName,
                });
            });
            return layouts;
        }
        // fallback on the 'collectionView' manifests
        return manifests.map((manifest) => ({
            alias: manifest.alias,
            label: manifest.meta.label,
            icon: manifest.meta.icon,
            pathName: manifest.meta.pathName,
        }));
    }
    #onClick(view) {
        this.#collectionContext?.setLastSelectedView(this._entityUnique, view.alias);
        setTimeout(() => {
            // TODO: This ignorer is just neede for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-ignore
            this._popover?.hidePopover();
        }, 100);
    }
    render() {
        if (!this._currentView)
            return nothing;
        if (this._views.length <= 1)
            return nothing;
        return html `
			<uui-button compact popovertarget="collection-view-bundle-popover" label="status">
				<umb-icon name=${this._currentView.icon}></umb-icon>
			</uui-button>
			<uui-popover-container id="collection-view-bundle-popover" placement="bottom-end">
				<umb-popover-layout>
					<div class="filter-dropdown">
						${repeat(this._views, (view) => view.alias, (view) => this.#renderItem(view))}
					</div>
				</umb-popover-layout>
			</uui-popover-container>
		`;
    }
    #renderItem(view) {
        return html `
			<uui-menu-item
				label=${view.label}
				href="${this._collectionRootPathName}/${view.pathName}"
				@click-label=${() => this.#onClick(view)}
				?active=${view.alias === this._currentView?.alias}>
				<umb-icon slot="icon" name=${view.icon}></umb-icon>
			</uui-menu-item>
		`;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			:host {
				--uui-button-content-align: left;
				--uui-menu-item-flat-structure: 1;
				display: contents;
			}

			.filter-dropdown {
				padding: var(--uui-size-space-3);
			}
		`,
    ]; }
};
__decorate([
    state()
], UmbCollectionViewBundleElement.prototype, "_views", void 0);
__decorate([
    state()
], UmbCollectionViewBundleElement.prototype, "_currentView", void 0);
__decorate([
    state()
], UmbCollectionViewBundleElement.prototype, "_collectionRootPathName", void 0);
__decorate([
    state()
], UmbCollectionViewBundleElement.prototype, "_entityUnique", void 0);
__decorate([
    query('#collection-view-bundle-popover')
], UmbCollectionViewBundleElement.prototype, "_popover", void 0);
UmbCollectionViewBundleElement = __decorate([
    customElement('umb-collection-view-bundle')
], UmbCollectionViewBundleElement);
export { UmbCollectionViewBundleElement };
