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 { localizeOperators, localizePropertyType } from './utils.js';
import { css, html, customElement, property, state, ifDefined } from '../../../../../external/lit/index.js';
import { UmbLitElement } from '../../../../core/lit-element/index.js';
import { TemplateQueryPropertyTypeModel } from '../../../../core/backend-api/index.js';
let UmbTemplateQueryBuilderFilterElement = class UmbTemplateQueryBuilderFilterElement extends UmbLitElement {
    constructor() {
        super(...arguments);
        this.filter = {};
        this.unremovable = false;
        this.currentPropertyType = null;
        this.#setPropertyAlias = (e) => {
            const target = e.target;
            const oldCurrentPropertyType = this.currentPropertyType;
            this.filter = { ...this.filter, propertyAlias: target.value };
            this.currentPropertyType =
                this.settings?.properties?.find((p) => p.alias === this.filter.propertyAlias)?.type ?? null;
            if (oldCurrentPropertyType !== this.currentPropertyType)
                this.#resetOperator();
        };
        this.#setConstrainValue = (e) => {
            const target = e.target;
            this.filter = { ...this.filter, constraintValue: target.value };
        };
        this.#setOperator = (e) => {
            const target = e.target;
            this.filter = { ...this.filter, operator: target.value };
        };
    }
    #setPropertyAlias;
    #setConstrainValue;
    #setOperator;
    #resetOperator() {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        this.filter = { ...this.filter, operator: undefined, constraintValue: undefined };
    }
    #resetFilter() {
        this.filter = {};
        this.dispatchEvent(new Event('remove-filter'));
    }
    #removeOrReset() {
        if (this.unremovable)
            this.#resetFilter();
        else
            this.dispatchEvent(new Event('remove-filter'));
    }
    #addFilter() {
        this.dispatchEvent(new Event('add-filter'));
    }
    get isFilterValid() {
        return Object.keys(this.filter).length === 3 && Object.values(this.filter).every((v) => !!v);
    }
    willUpdate(_changedProperties) {
        if (_changedProperties.has('filter')) {
            if (this.isFilterValid) {
                this.dispatchEvent(new Event('update-query'));
            }
        }
    }
    _renderOperatorsDropdown() {
        if (!this.settings?.operators)
            return;
        const operators = localizeOperators(this.settings?.operators, this.currentPropertyType);
        return html `<umb-dropdown look="outline" id="operator-dropdown" label="Choose operator">
			<span slot="label">${this.filter?.operator ?? ''}</span>
			<uui-combobox-list @change=${this.#setOperator} class="options-list">
				${operators
            ?.filter((operator) => this.currentPropertyType ? operator.applicableTypes?.includes(this.currentPropertyType) : true)
            .map((operator) => html `<uui-combobox-list-option .value=${operator.operator ?? ''}>
								<umb-localize .key=${operator.localizeKey}> ${operator.operator} </umb-localize>
							</uui-combobox-list-option>`)}
			</uui-combobox-list>
		</umb-dropdown>`;
    }
    _renderConstraintValueInput() {
        switch (this.currentPropertyType) {
            case TemplateQueryPropertyTypeModel.INTEGER:
                return html `<uui-input type="number" @change=${this.#setConstrainValue} label="constrain value"></uui-input>`;
            case TemplateQueryPropertyTypeModel.STRING:
                return html `<uui-input type="text" @change=${this.#setConstrainValue} label="constrain value"></uui-input>`;
            case TemplateQueryPropertyTypeModel.DATE_TIME:
                return html `<uui-input type="date" @change=${this.#setConstrainValue} label="constrain value"></uui-input>`;
            default:
                return html `<uui-input type="text" @change=${this.#setConstrainValue} label="constrain value"></uui-input>`;
        }
    }
    render() {
        const properties = localizePropertyType(this.settings?.properties);
        return html `
			<span>${this.unremovable ? this.localize.term('template_where') : this.localize.term('template_and')}</span>
			<umb-dropdown look="outline" id="property-alias-dropdown" label="Property alias">
				<span slot="label">${this.filter?.propertyAlias ?? ''}</span>
				<uui-combobox-list @change=${this.#setPropertyAlias} class="options-list">
					${properties?.map((property) => html `<uui-combobox-list-option tabindex="0" .value=${property.alias ?? ''}>
								<umb-localize key=${ifDefined(property.localizeKey)}> ${property.alias}</umb-localize>
							</uui-combobox-list-option>`)}
				</uui-combobox-list></umb-dropdown
			>
			${this.filter?.propertyAlias ? this._renderOperatorsDropdown() : ''}
			${this.filter?.operator ? this._renderConstraintValueInput() : ''}
			<uui-button-group>
				<uui-button
					title=${this.localize.term('general_add')}
					label=${this.localize.term('general_add')}
					compact
					@click=${this.#addFilter}>
					<uui-icon name="icon-add"></uui-icon>
				</uui-button>
				<uui-button
					title=${this.localize.term('general_remove')}
					label=${this.localize.term('general_remove')}
					compact
					@click=${this.#removeOrReset}>
					<uui-icon name="delete"></uui-icon>
				</uui-button>
			</uui-button-group>
		`;
    }
    static { this.styles = [
        css `
			:host {
				display: flex;
				gap: 10px;
				border-bottom: 1px solid #f3f3f5;
				align-items: center;
				padding: 20px 0;
			}

			uui-combobox-list-option {
				padding: 8px 20px;
				margin: 0;
			}
		`,
    ]; }
};
__decorate([
    property({ type: Object, attribute: false })
], UmbTemplateQueryBuilderFilterElement.prototype, "filter", void 0);
__decorate([
    property({ type: Boolean })
], UmbTemplateQueryBuilderFilterElement.prototype, "unremovable", void 0);
__decorate([
    property({ type: Object, attribute: false })
], UmbTemplateQueryBuilderFilterElement.prototype, "settings", void 0);
__decorate([
    state()
], UmbTemplateQueryBuilderFilterElement.prototype, "currentPropertyType", void 0);
UmbTemplateQueryBuilderFilterElement = __decorate([
    customElement('umb-template-query-builder-filter')
], UmbTemplateQueryBuilderFilterElement);
export { UmbTemplateQueryBuilderFilterElement };
export default UmbTemplateQueryBuilderFilterElement;
