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 { aliasToPath } from '../../utils/index.js';
import { css, customElement, html, nothing, repeat, state } from '../../../../external/lit/index.js';
import { createExtensionApi, createExtensionElement, UmbExtensionsElementInitializer, UmbExtensionsManifestInitializer, } from '../../../../libs/extension-api/index.js';
import { umbExtensionsRegistry } from '../../extension-registry/index.js';
import { UmbLitElement } from '../../lit-element/index.js';
import { UmbTextStyles } from '../../style/index.js';
import { UMB_MARK_ATTRIBUTE_NAME } from '../../const/index.js';
/**
 * @class UmbBaseSectionElement
 * @description - Element hosting sections and section navigation.
 */
let UmbDefaultSectionElement = class UmbDefaultSectionElement extends UmbLitElement {
    constructor() {
        super();
        this._splitPanelPosition = '300px';
        new UmbExtensionsElementInitializer(this, umbExtensionsRegistry, 'sectionSidebarApp', null, (sidebarApps) => {
            const oldValue = this._sidebarApps;
            sidebarApps.forEach((sidebarApp) => {
                sidebarApp.component?.setAttribute(UMB_MARK_ATTRIBUTE_NAME, 'section-sidebar:' + sidebarApp.manifest.alias);
            });
            this._sidebarApps = sidebarApps;
            this.requestUpdate('_sidebarApps', oldValue);
        });
        this.#observeRoutes();
        const splitPanelPosition = localStorage.getItem('umb-split-panel-position');
        if (splitPanelPosition) {
            this._splitPanelPosition = splitPanelPosition;
        }
    }
    #observeRoutes() {
        new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'sectionRoute', null, async (sectionRouteExtensions) => {
            // TODO: we only support extensions with an element prop
            const extensionsWithElement = sectionRouteExtensions.filter((extension) => extension.manifest.element);
            const extensionsWithoutElement = sectionRouteExtensions.filter((extension) => !extension.manifest.element);
            if (extensionsWithoutElement.length > 0) {
                throw new Error('sectionRoute extensions must have an element');
            }
            const routes = await Promise.all(extensionsWithElement.map(async (extensionController) => {
                const api = await createExtensionApi(this, extensionController.manifest);
                if (api) {
                    api.manifest = extensionController.manifest;
                }
                return {
                    path: api?.getPath?.() ||
                        extensionController.manifest.meta?.path ||
                        aliasToPath(extensionController.manifest.alias),
                    component: () => createExtensionElement(extensionController.manifest),
                    setup: (element, info) => {
                        api?.setup?.(element, info);
                    },
                };
            }));
            this.#createRoutes(routes);
        }, 'umbRouteExtensionApisInitializer');
    }
    #createRoutes(routes) {
        this._routes = [
            ...routes,
            {
                path: '**',
                component: () => import('../section-main-views/section-main-views.element.js'),
                setup: (element) => {
                    element.sectionAlias = this.manifest?.alias;
                },
            },
        ];
    }
    #onSplitPanelChange(event) {
        const position = event.detail.position;
        localStorage.setItem('umb-split-panel-position', position.toString());
    }
    render() {
        return html `
			<umb-split-panel
				lock="start"
				snap="300px"
				@position-changed=${this.#onSplitPanelChange}
				.position=${this._splitPanelPosition}>
				${this._sidebarApps && this._sidebarApps.length > 0
            ? html `
							<!-- TODO: these extensions should be combined into one type: sectionSidebarApp with a "subtype" -->
							<umb-section-sidebar slot="start">
								${repeat(this._sidebarApps, (app) => app.alias, (app) => app.component)}
							</umb-section-sidebar>
						`
            : nothing}
				<umb-section-main slot="end">
					${this._routes && this._routes.length > 0
            ? html `<umb-router-slot id="router-slot" .routes=${this._routes}></umb-router-slot>`
            : nothing}
					<slot></slot>
				</umb-section-main>
			</umb-split-panel>
		`;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			:host {
				flex: 1 1 auto;
				height: 100%;
				display: flex;
			}

			umb-split-panel {
				--umb-split-panel-start-min-width: 200px;
				--umb-split-panel-start-max-width: 400px;
				--umb-split-panel-end-min-width: 600px;
				--umb-split-panel-slot-overflow: visible;
			}
			@media only screen and (min-width: 800px) {
				umb-split-panel {
					--umb-split-panel-initial-position: 300px;
				}
			}
		`,
    ]; }
};
__decorate([
    state()
], UmbDefaultSectionElement.prototype, "_routes", void 0);
__decorate([
    state()
], UmbDefaultSectionElement.prototype, "_sidebarApps", void 0);
__decorate([
    state()
], UmbDefaultSectionElement.prototype, "_splitPanelPosition", void 0);
UmbDefaultSectionElement = __decorate([
    customElement('umb-section-default')
], UmbDefaultSectionElement);
export { UmbDefaultSectionElement };
export { UmbDefaultSectionElement as element };
/**
 *
 * @deprecated Since 16. Use UmbDefaultSectionElement instead. UmbSectionDefaultElement will be removed in v18.
 */
export { UmbDefaultSectionElement as UmbSectionDefaultElement };
