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;
};
var _a;
var UmbDocumentVariantLanguagePickerElement_1;
import { UmbDocumentVariantState } from '../../types.js';
import { sortVariants } from '../../utils.js';
import { css, customElement, html, nothing, property, repeat, state, } from '../../../../../external/lit/index.js';
import { UmbLitElement } from '../../../../core/lit-element/index.js';
import { UmbTextStyles } from '../../../../core/style/index.js';
let UmbDocumentVariantLanguagePickerElement = class UmbDocumentVariantLanguagePickerElement extends UmbLitElement {
    constructor() {
        super(...arguments);
        this.#variantLanguageOptions = [];
        this._selection = [];
        this._isAllSelected = false;
    }
    static { UmbDocumentVariantLanguagePickerElement_1 = this; }
    #selectionManager;
    get variantLanguageOptions() {
        return this.#variantLanguageOptions;
    }
    set variantLanguageOptions(value) {
        this.#variantLanguageOptions = [...value].sort(sortVariants);
    }
    #variantLanguageOptions;
    set selectionManager(value) {
        this.#selectionManager = value;
        this.observe(this.selectionManager.selection, (selection) => {
            this._selection = selection;
            this._isAllSelected = this.#isAllSelected();
        }, '_selectionManager');
    }
    get selectionManager() {
        return this.#selectionManager;
    }
    updated(_changedProperties) {
        super.updated(_changedProperties);
        if (_changedProperties.has('variantLanguageOptions')) {
            this._isAllSelected = this.#isAllSelected();
        }
        if (this.selectionManager && this.pickableFilter) {
            this.#selectionManager.setAllowLimitation((unique) => {
                const option = this.variantLanguageOptions.find((o) => o.unique === unique);
                return option ? this.pickableFilter(option) : true;
            });
        }
    }
    #onSelectAllChange(event) {
        const allUniques = this.variantLanguageOptions.map((o) => o.unique);
        const filter = this.selectionManager.getAllowLimitation();
        const allowedUniques = allUniques.filter((unique) => filter(unique));
        if (event.target.checked) {
            this.selectionManager.setSelection(allowedUniques);
        }
        else {
            this.selectionManager.setSelection([]);
        }
    }
    #isAllSelected() {
        const allUniques = this.variantLanguageOptions.map((o) => o.unique);
        const filter = this.selectionManager.getAllowLimitation();
        const allowedUniques = allUniques.filter((unique) => filter(unique));
        return this._selection.length !== 0 && this._selection.length === allowedUniques.length;
    }
    render() {
        if (this.variantLanguageOptions.length === 0) {
            return html `<uui-box>
				<umb-localize key="content_noVariantsToProcess">There are no available variants</umb-localize>
			</uui-box>`;
        }
        return html `
			<uui-checkbox
				@change=${this.#onSelectAllChange}
				label=${this.localize.term('general_selectAll')}
				.checked=${this._isAllSelected}></uui-checkbox>
			${repeat(this.variantLanguageOptions, (option) => option.unique, (option) => html ` ${this.#renderItem(option)} `)}
		`;
    }
    #renderItem(option) {
        const pickable = this.pickableFilter ? this.pickableFilter(option) : () => true;
        const selected = this._selection.includes(option.unique);
        const mustSelect = (!selected && this.requiredFilter?.(option)) ?? false;
        return html `
			<uui-menu-item
				class=${mustSelect ? 'required' : ''}
				?selectable=${pickable}
				?disabled=${!pickable}
				label=${option.variant?.name ?? option.language.name}
				@selected=${() => this.selectionManager.select(option.unique)}
				@deselected=${() => this.selectionManager.deselect(option.unique)}
				?selected=${selected}>
				<uui-icon slot="icon" name="icon-globe"></uui-icon>
				${UmbDocumentVariantLanguagePickerElement_1.renderLabel(option, mustSelect)}
			</uui-menu-item>
		`;
    }
    static renderLabel(option, mustSelect) {
        return html `<div class="label" slot="label">
			<strong> ${option.language.name} </strong>
			<div class="label-status">${UmbDocumentVariantLanguagePickerElement_1.renderVariantStatus(option)}</div>
			${option.documentCount !== undefined
            ? html `<div class="label-status">
						<umb-localize key="general_documentCount" .args=${[option.documentCount]}>
							${option.documentCount} documents
						</umb-localize>
					</div>`
            : nothing}
			${option.language.isMandatory && mustSelect
            ? html `<div class="label-status">
						<umb-localize key="languages_mandatoryLanguage">Mandatory language</umb-localize>
					</div>`
            : nothing}
		</div>`;
    }
    static renderVariantStatus(option) {
        switch (option.variant?.state) {
            case UmbDocumentVariantState.PUBLISHED:
                return html `<umb-localize key="content_published">Published</umb-localize>`;
            case UmbDocumentVariantState.PUBLISHED_PENDING_CHANGES:
                return html `<umb-localize key="content_publishedPendingChanges">Published with pending changes</umb-localize>`;
            case UmbDocumentVariantState.DRAFT:
                return html `<umb-localize key="content_unpublished">Draft</umb-localize>`;
            case UmbDocumentVariantState.NOT_CREATED:
            default:
                return html `<umb-localize key="content_notCreated">Not created</umb-localize>`;
        }
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			.required {
				color: var(--uui-color-danger);
				--uui-menu-item-color-hover: var(--uui-color-danger-emphasis);
				--uui-menu-item-color-disabled: var(--uui-color-danger);
			}
			.label {
				padding: var(--uui-size-space-3) 0;
			}
			.label-status {
				font-size: var(--uui-type-small-size);
			}

			uui-menu-item {
				--uui-menu-item-flat-structure: 1;
				--uui-menu-item-border-radius: var(--uui-border-radius);
			}

			uui-checkbox {
				margin-bottom: var(--uui-size-space-3);
			}
		`,
    ]; }
};
__decorate([
    property({ type: Array, attribute: false })
], UmbDocumentVariantLanguagePickerElement.prototype, "variantLanguageOptions", null);
__decorate([
    property({ attribute: false })
], UmbDocumentVariantLanguagePickerElement.prototype, "selectionManager", null);
__decorate([
    state()
], UmbDocumentVariantLanguagePickerElement.prototype, "_selection", void 0);
__decorate([
    state()
], UmbDocumentVariantLanguagePickerElement.prototype, "_isAllSelected", void 0);
__decorate([
    property({ attribute: false })
], UmbDocumentVariantLanguagePickerElement.prototype, "pickableFilter", void 0);
__decorate([
    property({ attribute: false })
], UmbDocumentVariantLanguagePickerElement.prototype, "requiredFilter", void 0);
UmbDocumentVariantLanguagePickerElement = UmbDocumentVariantLanguagePickerElement_1 = __decorate([
    customElement('umb-document-variant-language-picker')
], UmbDocumentVariantLanguagePickerElement);
export { UmbDocumentVariantLanguagePickerElement };
export default UmbDocumentVariantLanguagePickerElement;
