import { r as registerInstance, d as createEvent, h, c as getElement } from './core-34fac203.js';
import { T as Tunnel } from './i18n.provider-31a85d1e.js';

const DatetimeFilterPanel = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.anjFilterChange = createEvent(this, "anjFilterChange", 7);
    }
    async reset() {
        this.element.querySelector('form').reset();
        this.max = undefined;
        this.min = undefined;
    }
    handleChanges({ detail, target }) {
        const input = target;
        this[input.name] = detail.value;
    }
    onSubmit(e) {
        e.preventDefault();
        const valid = e.target.checkValidity();
        if (!valid)
            return;
        const filter = { field: this.field };
        let query;
        let type;
        if (this.min && this.max) {
            type = 'contains';
            query = [new Date(this.min), new Date(this.max)];
        }
        else if (this.min) {
            type = 'starts-with';
            query = new Date(this.min);
        }
        else if (this.max) {
            type = 'ends-with';
            query = new Date(this.max);
        }
        else {
            this.anjFilterChange.emit(undefined);
        }
        if (query) {
            filter.type = type;
            filter.query = query;
            this.anjFilterChange.emit(filter);
        }
    }
    render() {
        return (h("form", { onSubmit: (e) => this.onSubmit(e), novalidate: true }, this.types.includes('starts-with') || this.types.includes('contains') ?
            h("anj-form-group", null, h("anj-label", null, this.translator('Start Date')), h("anj-input", { name: "min", max: this.max, onAnjChange: e => this.handleChanges(e) }, h("anj-datetime-picker-toggle", null), h("anj-datetime-picker", { nested: true }))) : undefined, this.types.includes('ends-with') || this.types.includes('contains') ?
            h("anj-form-group", null, h("anj-label", null, this.translator('End Date')), h("anj-input", { name: "max", min: this.min, onAnjChange: e => this.handleChanges(e) }, h("anj-datetime-picker-toggle", null), h("anj-datetime-picker", { nested: true }))) : undefined, h("anj-button-group", { align: "right" }, h("anj-button", { context: "text", type: "submit" }, this.translator('Apply')))));
    }
    get element() { return getElement(this); }
    static get style() { return ".sc-anj-datetime-filter-panel-h {\n  display: block;\n  padding: 1rem;\n}\n.sc-anj-datetime-filter-panel-h anj-button-group.sc-anj-datetime-filter-panel {\n  margin-bottom: 0;\n}"; }
};
Tunnel.injectProps(DatetimeFilterPanel, ['translator']);

export { DatetimeFilterPanel as anj_datetime_filter_panel };
