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 { UmbPackageRepository } from '../../../package/repository/package.repository.js';
import { html, css, customElement, state, repeat, nothing, unsafeHTML } from '../../../../../external/lit/index.js';
import { observeMultiple } from '../../../../../libs/observable-api/index.js';
import { UmbLitElement } from '../../../../core/lit-element/index.js';
import { UmbTextStyles } from '../../../../core/style/index.js';
import './installed-packages-section-view-item.element.js';
let UmbInstalledPackagesSectionViewElement = class UmbInstalledPackagesSectionViewElement extends UmbLitElement {
    #packageRepository;
    constructor() {
        super();
        this._installedPackages = [];
        this._migrationPackages = [];
        this.#packageRepository = new UmbPackageRepository(this);
    }
    firstUpdated() {
        this.#loadInstalledPackages();
    }
    async #loadInstalledPackages() {
        const data = await Promise.all([this.#packageRepository.rootItems(), this.#packageRepository.migrations()]);
        const [package$, migration$] = data;
        this.observe(observeMultiple([package$, migration$]), ([packages, migrations]) => {
            this._installedPackages = packages.map((pkg) => {
                const migration = migrations.find((m) => m.packageName === pkg.name);
                if (migration) {
                    // Remove that migration from the list
                    migrations = migrations.filter((m) => m.packageName !== pkg.name);
                }
                return {
                    ...pkg,
                    hasPendingMigrations: migration?.hasPendingMigrations ?? false,
                };
            });
            this._migrationPackages = migrations.map((m) => ({
                name: m.packageName,
                hasPendingMigrations: m.hasPendingMigrations ?? false,
                extensions: [],
            }));
        });
    }
    render() {
        if (!this._installedPackages.length)
            return this.#renderNoPackages();
        return html `${this.#renderCustomMigrations()} ${this.#renderInstalled()} `;
    }
    #renderNoPackages() {
        return html `
			<div class="no-packages">
				<h2><strong>${this.localize.term('packager_noPackages')}</strong></h2>
				<p>${unsafeHTML(this.localize.term('packager_noPackagesDescription'))}</p>
			</div>
		`;
    }
    #renderInstalled() {
        return html `
			<uui-box headline=${this.localize.term('packager_installedPackages')} style="--uui-box-default-padding:0">
				<uui-ref-list>
					${repeat(this._installedPackages, (item) => item.name, (item) => html `
							<umb-installed-packages-section-view-item
								.name=${item.name}
								.version=${item.version}
								.hasPendingMigrations=${item.hasPendingMigrations}>
							</umb-installed-packages-section-view-item>
						`)}
				</uui-ref-list>
			</uui-box>
		`;
    }
    #renderCustomMigrations() {
        if (!this._migrationPackages.length)
            return nothing;
        return html `
			<uui-box headline="Migrations" style="--uui-box-default-padding:0">
				<uui-ref-list>
					${repeat(this._migrationPackages, (item) => item.name, (item) => html `
							<umb-installed-packages-section-view-item
								.name=${item.name}
								.version=${item.version}
								.hasPendingMigrations=${item.hasPendingMigrations}>
							</umb-installed-packages-section-view-item>
						`)}
				</uui-ref-list>
			</uui-box>
		`;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			:host {
				display: block;
				padding: var(--uui-size-layout-1);
			}
			uui-box {
				margin-top: var(--uui-size-space-5);
				padding-bottom: var(--uui-size-space-1);
			}

			umb-installed-packages-section-view-item {
				padding: var(--uui-size-space-3) 0 var(--uui-size-space-2);
			}

			umb-installed-packages-section-view-item:not(:first-child) {
				border-top: 1px solid var(--uui-color-border, #d8d7d9);
			}

			.no-packages {
				display: flex;
				justify-content: space-around;
				flex-direction: column;
				align-items: center;
			}
		`,
    ]; }
};
__decorate([
    state()
], UmbInstalledPackagesSectionViewElement.prototype, "_installedPackages", void 0);
__decorate([
    state()
], UmbInstalledPackagesSectionViewElement.prototype, "_migrationPackages", void 0);
UmbInstalledPackagesSectionViewElement = __decorate([
    customElement('umb-installed-packages-section-view')
], UmbInstalledPackagesSectionViewElement);
export { UmbInstalledPackagesSectionViewElement };
export default UmbInstalledPackagesSectionViewElement;
