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 { html, css, nothing, customElement, state, repeat, when } from '../../../../../external/lit/index.js';
import { umbConfirmModal } from '../../../../core/modal/index.js';
import { UmbLitElement } from '../../../../core/lit-element/index.js';
import { UmbPackageRepository } from '../../../package/index.js';
let UmbPackagesCreatedOverviewElement = class UmbPackagesCreatedOverviewElement extends UmbLitElement {
    #take;
    #packageRepository;
    constructor() {
        super();
        this.#take = 10;
        this._loading = true;
        this._createdPackages = [];
        this._currentPage = 1;
        this.#packageRepository = new UmbPackageRepository(this);
        this.#getPackages();
    }
    async #getPackages() {
        const skip = this._currentPage * this.#take - this.#take;
        const data = await this.#packageRepository.getCreatedPackages({ skip, take: this.#take });
        if (data) {
            this._createdPackages = data.items;
            this._total = data.total;
        }
        this._loading = false;
    }
    #onPageChange(event) {
        if (this._currentPage === event.target.current)
            return;
        this._currentPage = event.target.current;
        this.#getPackages();
    }
    async #deletePackage(pkg) {
        if (!pkg.unique)
            return;
        await umbConfirmModal(this, {
            color: 'danger',
            headline: `Remove ${pkg.name}?`,
            content: 'Are you sure you want to delete this package',
            confirmLabel: this.localize.term('general_delete'),
        });
        const success = await this.#packageRepository.deleteCreatedPackage(pkg.unique);
        if (!success)
            return;
        const index = this._createdPackages.findIndex((x) => x.unique === pkg.unique);
        this._createdPackages.splice(index, 1);
        this.requestUpdate();
    }
    render() {
        return html `
			<uui-button
				look="primary"
				href="section/packages/view/created/package-builder"
				label=${this.localize.term('packager_createPackage')}></uui-button>
			${when(this._loading, () => html `<div class="container"><uui-loader></uui-loader></div>`, () => this.#renderCreatedPackages())}
			${this.#renderPagination()}
		`;
    }
    #renderCreatedPackages() {
        if (!this._createdPackages.length)
            return this.#renderNoPackages();
        return html `
			<uui-box headline="Created packages" style="--uui-box-default-padding:0;">
				<uui-ref-list>
					${repeat(this._createdPackages, (item) => item.unique, (item) => this.#renderItem(item))}
				</uui-ref-list>
			</uui-box>
		`;
    }
    #renderNoPackages() {
        return html `<h2 class="no-packages">${this.localize.term('packager_noPackagesCreated')}</h2>`;
    }
    #renderItem(pkg) {
        return html `
			<uui-ref-node-package name=${pkg.name} @open=${() => this.#packageBuilder(pkg)}>
				<uui-action-bar slot="actions">
					<uui-button
						@click=${() => this.#deletePackage(pkg)}
						label=${this.localize.term('general_delete')}></uui-button>
				</uui-action-bar>
			</uui-ref-node-package>
		`;
    }
    #packageBuilder(pkg) {
        if (!pkg.unique)
            return;
        window.history.pushState({}, '', `section/packages/view/created/package-builder/${pkg.unique}`);
    }
    #renderPagination() {
        if (!this._total)
            return nothing;
        const totalPages = Math.ceil(this._total / this.#take);
        if (totalPages <= 1)
            return nothing;
        return html `
			<div class="container">
				<uui-pagination
					.total=${totalPages}
					firstlabel=${this.localize.term('general_first')}
					previouslabel=${this.localize.term('general_previous')}
					nextlabel=${this.localize.term('general_next')}
					lastlabel=${this.localize.term('general_last')}
					@change=${this.#onPageChange}></uui-pagination>
			</div>
		`;
    }
    static { this.styles = [
        css `
			:host {
				display: block;
				padding: var(--uui-size-layout-1);
			}
			uui-box {
				margin: var(--uui-size-space-5) 0;
				padding-bottom: var(--uui-size-space-1);
			}

			.no-packages {
				display: flex;
				justify-content: space-around;
			}
			uui-pagination {
				display: inline-block;
			}

			.container {
				display: flex;
				justify-content: center;
			}
		`,
    ]; }
};
__decorate([
    state()
], UmbPackagesCreatedOverviewElement.prototype, "_loading", void 0);
__decorate([
    state()
], UmbPackagesCreatedOverviewElement.prototype, "_createdPackages", void 0);
__decorate([
    state()
], UmbPackagesCreatedOverviewElement.prototype, "_currentPage", void 0);
__decorate([
    state()
], UmbPackagesCreatedOverviewElement.prototype, "_total", void 0);
UmbPackagesCreatedOverviewElement = __decorate([
    customElement('umb-packages-created-overview')
], UmbPackagesCreatedOverviewElement);
export { UmbPackagesCreatedOverviewElement };
export default UmbPackagesCreatedOverviewElement;
