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 { UMB_USER_GROUP_ENTITY_TYPE } from '../../entity.js';
import { UmbUserGroupPickerInputContext } from './user-group-input.context.js';
import { css, customElement, html, ifDefined, nothing, property, repeat, state, } from '../../../../../external/lit/index.js';
import { splitStringToArray } from '../../../../core/utils/index.js';
import { UmbLitElement } from '../../../../core/lit-element/index.js';
import { UmbModalRouteRegistrationController } from '../../../../core/router/index.js';
import { UMB_WORKSPACE_MODAL } from '../../../../core/workspace/index.js';
import { UUIFormControlMixin } from '../../../../../external/uui/index.js';
import '../../../../core/entity-item/index.js';
let UmbUserGroupInputElement = class UmbUserGroupInputElement extends UUIFormControlMixin(UmbLitElement, '') {
    /**
     * This is a minimum amount of selected items in this input.
     * @type {number}
     * @attr
     * @default
     */
    set min(value) {
        this.#pickerContext.min = value;
    }
    get min() {
        return this.#pickerContext.min;
    }
    /**
     * This is a maximum amount of selected items in this input.
     * @type {number}
     * @attr
     * @default
     */
    set max(value) {
        this.#pickerContext.max = value;
    }
    get max() {
        return this.#pickerContext.max;
    }
    set selection(ids) {
        this.#pickerContext.setSelection(ids);
    }
    get selection() {
        return this.#pickerContext.getSelection();
    }
    set value(idsString) {
        // Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
        this.selection = splitStringToArray(idsString);
    }
    get value() {
        return this.selection.join(',');
    }
    #pickerContext;
    constructor() {
        super();
        /**
         * Min validation message.
         * @type {boolean}
         * @attr
         * @default
         */
        this.minMessage = 'This field need more items';
        /**
         * Max validation message.
         * @type {boolean}
         * @attr
         * @default
         */
        this.maxMessage = 'This field exceeds the allowed amount of items';
        this.#pickerContext = new UmbUserGroupPickerInputContext(this);
        this._editUserGroupPath = '';
        this.addValidator('rangeUnderflow', () => this.minMessage, () => !!this.min && this.#pickerContext.getSelection().length < this.min);
        this.addValidator('rangeOverflow', () => this.maxMessage, () => !!this.max && this.#pickerContext.getSelection().length > this.max);
        this.observe(this.#pickerContext.selection, (selection) => (this.value = selection.join(',')), '_observeSelection');
        this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems), '_observerItems');
        this.observe(this.#pickerContext.statuses, (statuses) => (this._statuses = statuses), '_observeStatuses');
        new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
            .addAdditionalPath(UMB_USER_GROUP_ENTITY_TYPE)
            .onSetup(async () => {
            return { data: { entityType: UMB_USER_GROUP_ENTITY_TYPE, preset: {} } };
        })
            .observeRouteBuilder((routeBuilder) => {
            this._editUserGroupPath = routeBuilder({});
        });
    }
    getFormElement() {
        return undefined;
    }
    render() {
        return html `
			<uui-ref-list>
				${this._statuses
            ? repeat(this._statuses, (status) => status.unique, (status) => this.#renderItem(status))
            : nothing}
			</uui-ref-list>
			<uui-button
				id="btn-add"
				look="placeholder"
				@click=${() => this.#pickerContext.openPicker()}
				label=${this.localize.term('general_choose')}></uui-button>
		`;
    }
    #renderItem(status) {
        const unique = status.unique;
        const item = this._items?.find((x) => x.unique === unique);
        const isError = status.state.type === 'error';
        // For error state, use umb-entity-item-ref
        if (isError) {
            return html `
				<umb-entity-item-ref id=${unique} ?error=${true} .errorMessage=${status.state.error} .errorDetail=${unique}>
					<uui-action-bar slot="actions">
						<uui-button
							label=${this.localize.term('general_remove')}
							@click=${() => this.#pickerContext.requestRemoveItem(unique)}></uui-button>
					</uui-action-bar>
				</umb-entity-item-ref>
			`;
        }
        // For successful items, use umb-user-group-ref
        if (!item?.unique)
            return nothing;
        const href = `${this._editUserGroupPath}edit/${unique}`;
        return html `
			<umb-user-group-ref name="${ifDefined(item.name)}" href=${href}>
				${item.icon ? html `<umb-icon slot="icon" name=${item.icon}></umb-icon>` : nothing}
				<uui-action-bar slot="actions">
					<uui-button
						@click=${() => this.#pickerContext.requestRemoveItem(unique)}
						label=${this.localize.term('general_remove')}></uui-button>
				</uui-action-bar>
			</umb-user-group-ref>
		`;
    }
    static { this.styles = [
        css `
			#btn-add {
				width: 100%;
			}
		`,
    ]; }
};
__decorate([
    property({ type: Number })
], UmbUserGroupInputElement.prototype, "min", null);
__decorate([
    property({ type: String, attribute: 'min-message' })
], UmbUserGroupInputElement.prototype, "minMessage", void 0);
__decorate([
    property({ type: Number })
], UmbUserGroupInputElement.prototype, "max", null);
__decorate([
    property({ type: String, attribute: 'min-message' })
], UmbUserGroupInputElement.prototype, "maxMessage", void 0);
__decorate([
    property()
], UmbUserGroupInputElement.prototype, "value", null);
__decorate([
    state()
], UmbUserGroupInputElement.prototype, "_items", void 0);
__decorate([
    state()
], UmbUserGroupInputElement.prototype, "_statuses", void 0);
__decorate([
    state()
], UmbUserGroupInputElement.prototype, "_editUserGroupPath", void 0);
UmbUserGroupInputElement = __decorate([
    customElement('umb-user-group-input')
], UmbUserGroupInputElement);
export { UmbUserGroupInputElement };
export default UmbUserGroupInputElement;
