import { h } from "@stencil/core";
import Tunnel from '../../../locale/i18n.provider';
var FilterTypeLabels;
(function (FilterTypeLabels) {
    FilterTypeLabels["contains"] = "Contains";
    FilterTypeLabels["ends-with"] = "Ends With";
    FilterTypeLabels["equals"] = "Equals";
    FilterTypeLabels["starts-with"] = "Starts With";
})(FilterTypeLabels || (FilterTypeLabels = {}));
export class StringFilterPanel {
    async reset() {
        this.element.querySelector('form').reset();
    }
    componentWillLoad() {
        this.type = this.filter ? this.filter.type : this.types[0] || 'contains';
    }
    onSubmit(e) {
        e.preventDefault();
        const filter = {};
        Array.from(e.target.querySelectorAll('input')).forEach((i) => {
            filter[i.name] = i.value.trim() !== '' ? i.value.trim() : undefined;
        });
        filter.type = this.type;
        this.anjFilterChange.emit(filter);
    }
    render() {
        return (h("form", { onSubmit: (e) => this.onSubmit(e) },
            h("input", { type: "hidden", name: "field", value: this.field }),
            this.types.length > 1 ?
                h("anj-form-group", null,
                    h("anj-label", null, this.translator('Type')),
                    h("anj-select", { name: "type", value: this.type, onAnjChange: e => this.type = e.detail.value }, this.types.map(t => h("anj-option", { value: t }, this.translator(FilterTypeLabels[t])))))
                : undefined,
            h("anj-form-group", null,
                h("anj-label", null, this.translator('Filter')),
                h("anj-input", { name: "query" })),
            h("anj-button-group", { align: "right" },
                h("anj-button", { context: "text", type: "submit" }, this.translator('Apply')))));
    }
    static get is() { return "anj-string-filter-panel"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["string-filter-panel.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["string-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 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(StringFilterPanel, ['translator']);
