import { h } from "@stencil/core";
import Tunnel from '../../../locale/i18n.provider';
export class DatetimeFilterPanel {
    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')))));
    }
    static get is() { return "anj-datetime-filter-panel"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["datetime-filter-panel.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["datetime-filter-panel.css"]
    }; }
    static get properties() { return {
        "field": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The key we're working with"
            },
            "attribute": "field",
            "reflect": false
        },
        "filter": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "ColumnFilter",
                "resolved": "ColumnFilter",
                "references": {
                    "ColumnFilter": {
                        "location": "import",
                        "path": "../../table.types"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Current active filter if it exists"
            }
        },
        "translator": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "IntlFormatFn",
                "resolved": "(value: any, variables?: any) => string",
                "references": {
                    "IntlFormatFn": {
                        "location": "import",
                        "path": "../../../locale/i18n.provider"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [{
                        "text": undefined,
                        "name": "internal"
                    }],
                "text": ""
            }
        },
        "types": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "FilterType[]",
                "resolved": "FilterType[]",
                "references": {
                    "FilterType": {
                        "location": "import",
                        "path": "../../table.types"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Types of filters supported"
            }
        }
    }; }
    static get states() { return {
        "max": {},
        "min": {}
    }; }
    static get events() { return [{
            "method": "anjFilterChange",
            "name": "anjFilterChange",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when the user wants to apply a new filter"
            },
            "complexType": {
                "original": "ColumnFilter",
                "resolved": "ColumnFilter",
                "references": {
                    "ColumnFilter": {
                        "location": "import",
                        "path": "../../table.types"
                    }
                }
            }
        }]; }
    static get methods() { return {
        "reset": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "element"; }
}
Tunnel.injectProps(DatetimeFilterPanel, ['translator']);
