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 { UmbTextStyles } from '../../style/index.js';
import { css, html, nothing, customElement, property, state } from '../../../../external/lit/index.js';
import { umbExtensionsRegistry } from '../../extension-registry/index.js';
import { UmbExtensionsManifestInitializer, createExtensionElement } from '../../../../libs/extension-api/index.js';
import { UmbLitElement } from '../../lit-element/index.js';
import { pathFolderName } from '../../utils/index.js';
let UmbSectionMainViewElement = class UmbSectionMainViewElement extends UmbLitElement {
    constructor() {
        super();
        this._views = [];
        this._dashboards = [];
        this._routes = [];
        new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'dashboard', null, (dashboards) => {
            this._dashboards = dashboards.map((dashboard) => dashboard.manifest);
            this.#createRoutes();
        });
        new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'sectionView', null, (views) => {
            this._views = views.map((view) => view.manifest);
            this.#createRoutes();
        });
    }
    #constructDashboardPath(manifest) {
        const dashboardName = manifest.meta.label ?? manifest.name ?? manifest.alias;
        return 'dashboard/' + (manifest.meta.pathname ? manifest.meta.pathname : pathFolderName(dashboardName));
    }
    #constructViewPath(manifest) {
        const viewName = manifest.meta.label ?? manifest.name ?? manifest.alias;
        return 'view/' + (manifest.meta.pathname ? manifest.meta.pathname : pathFolderName(viewName));
    }
    async #createRoutes() {
        const dashboardRoutes = this._dashboards?.map((manifest) => {
            return {
                path: this.#constructDashboardPath(manifest),
                component: () => createExtensionElement(manifest),
                setup: (component) => {
                    component.manifest = manifest;
                },
            };
        });
        const viewRoutes = this._views?.map((manifest) => {
            return {
                path: this.#constructViewPath(manifest),
                component: () => createExtensionElement(manifest),
                setup: (component) => {
                    component.manifest = manifest;
                },
            };
        });
        const routes = [...dashboardRoutes, ...viewRoutes];
        if (routes.length > 0) {
            this._defaultView = routes[0].path;
            routes.push({
                ...routes[0],
                path: '',
            });
            routes.push({
                path: `**`,
                component: async () => (await import('../../router/index.js')).UmbRouteNotFoundElement,
            });
        }
        this._routes = routes;
    }
    render() {
        return this._routes.length > 0
            ? html `
					<umb-body-layout main-no-padding>
						${this.#renderDashboards()} ${this.#renderViews()}
						<umb-router-slot
							.routes=${this._routes}
							@init=${(event) => {
                this._routerPath = event.target.absoluteRouterPath;
            }}
							@change=${(event) => {
                this._activePath = event.target.localActiveViewPath;
            }}>
						</umb-router-slot>
					</umb-body-layout>
				`
            : nothing;
    }
    #getDashboardName(dashboard) {
        return dashboard.meta?.label ? this.localize.string(dashboard.meta.label) : (dashboard.name ?? dashboard.alias);
    }
    #renderDashboards() {
        // Only show dashboards if there are more than one dashboard or if there are both dashboards and views
        return (this._dashboards.length > 0 && this._views.length > 0) || this._dashboards.length > 1
            ? html `
					<uui-tab-group slot="header" id="dashboards">
						${this._dashboards.map((dashboard) => {
                const dashboardPath = this.#constructDashboardPath(dashboard);
                // If this path matches, or if this is the default view and the active path is empty.
                const isActive = this._activePath === dashboardPath || (this._defaultView === dashboardPath && this._activePath === '');
                return html `
								<uui-tab
									href="${this._routerPath}/${dashboardPath}"
									label="${this.#getDashboardName(dashboard)}"
									?active="${isActive}"
									>${this.#getDashboardName(dashboard)}</uui-tab
								>
							`;
            })}
					</uui-tab-group>
				`
            : nothing;
    }
    #renderViews() {
        // Only show views if there are more than one view or if there are both dashboards and views
        return (this._views.length > 0 && this._dashboards.length > 0) || this._views.length > 1
            ? html `
					<uui-tab-group slot="navigation" id="views">
						${this._views.map((view) => {
                const viewName = view.meta.label ? this.localize.string(view.meta.label) : (view.name ?? view.alias);
                const viewPath = this.#constructViewPath(view);
                // If this path matches, or if this is the default view and the active path is empty.
                const isActive = this._activePath === viewPath || (this._defaultView === viewPath && this._activePath === '');
                return html `
								<uui-tab href="${this._routerPath}/${viewPath}" label="${viewName}" ?active="${isActive}">
									<umb-icon slot="icon" name=${view.meta.icon}></umb-icon>
									${viewName}
								</uui-tab>
							`;
            })}
					</uui-tab-group>
				`
            : nothing;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			:host {
				position: relative;
				display: flex;
				flex-direction: column;
				height: 100%;
			}

			#views {
				--uui-tab-divider: var(--uui-color-divider-standalone);
			}

			#views uui-tab:first-child {
				border-left: 1px solid var(--uui-color-divider-standalone);
			}
		`,
    ]; }
};
__decorate([
    property({ type: String, attribute: 'section-alias' })
], UmbSectionMainViewElement.prototype, "sectionAlias", void 0);
__decorate([
    state()
], UmbSectionMainViewElement.prototype, "_views", void 0);
__decorate([
    state()
], UmbSectionMainViewElement.prototype, "_dashboards", void 0);
__decorate([
    state()
], UmbSectionMainViewElement.prototype, "_routerPath", void 0);
__decorate([
    state()
], UmbSectionMainViewElement.prototype, "_activePath", void 0);
__decorate([
    state()
], UmbSectionMainViewElement.prototype, "_defaultView", void 0);
__decorate([
    state()
], UmbSectionMainViewElement.prototype, "_routes", void 0);
UmbSectionMainViewElement = __decorate([
    customElement('umb-section-main-views')
], UmbSectionMainViewElement);
export { UmbSectionMainViewElement };
export default UmbSectionMainViewElement;
