import { Host, h } from "@stencil/core";
import Tunnel, { datetimeFormatOptions } from '../../../locale/i18n.provider';
const FILTER_TYPE_MAP = {
    'contains': '><',
    'ends-with': '<',
    'starts-with': '>',
    'equals': '='
};
export class ColumnFilterToggle {
    constructor() {
        this.filterListener = (e) => this.onFilter(e);
        this.toggleListener = (e) => this.onToggle(e);
        this.formatters = {
            date: new Intl.DateTimeFormat('en-US').format,
            datetime: new Intl.DateTimeFormat('en-US', datetimeFormatOptions).format,
            number: new Intl.NumberFormat('en-US').format
        };
        this.active = false;
    }
    injectedPropWatcher() {
        this.assignFormatters();
    }
    componentWillLoad() {
        this.table = this.element.closest('anj-table');
        this.table.addEventListener('anjColumnFilteringToggle', this.toggleListener);
        this.assignFormatters();
    }
    componentDidUnload() {
        this.table.removeEventListener('anjColumnFilteringToggle', this.toggleListener);
    }
    assignFormatters() {
        this.formatters.date = this.dateFormatter;
        this.formatters.datetime = this.datetimeFormatter;
        this.formatters.number = this.numberFormatter;
    }
    onToggle({ detail }) {
        this.active = detail;
    }
    async clearFilter(e) {
        e.preventDefault();
        e.stopPropagation();
        this.anjFilter.emit({ field: this.field, query: undefined, type: 'contains' });
        return this.panel.reset();
    }
    filterText() {
        const query = Array.isArray(this.filter.query) ?
            this.filter.query.map(this.formatValue.bind(this)).join(' - ') : this.formatValue(this.filter.query);
        return `${FILTER_TYPE_MAP[this.filter.type]} ${query}`;
    }
    bindPanel(el) {
        if (el) {
            el.addEventListener('anjFilterChange', this.filterListener);
        }
        else if (this.panel) {
            this.panel.removeEventListener('anjFilterChange', this.filterListener);
        }
        this.panel = el;
    }
    async onFilter({ detail }) {
        if (detail && (!this.filter || (detail.query !== this.filter.query || detail.type !== this.filter.type))) {
            this.anjFilter.emit(detail);
        }
        return this.dropdown.close();
    }
    formatValue(value) {
        return this.formatters[this.dataType] ? this.formatters[this.dataType](value) : value;
    }
    render() {
        const TagType = `anj-${this.dataType}-filter-panel`;
        const hostStyles = {
            height: this.active ? `${this.dropdown.offsetHeight}px` : '0',
            'margin-bottom': this.active ? '-0.657rem' : '0'
        };
        return (h(Host, { style: hostStyles, "aria-hidden": `${!this.active}` },
            h("anj-dropdown", { ref: (r) => this.dropdown = r, arrow: false },
                h("button", { class: `anj-column-filter-toggle anj-filter-toggle-${this.dataType}`, slot: "dropdown-toggle", tabIndex: this.active ? 0 : -1 }, this.filter ?
                    [
                        h("span", { class: "anj-has-value" }, this.filterText()),
                        h("anj-button-close", { context: "clear", free: true, onClick: e => this.clearFilter(e) })
                    ] :
                    [
                        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24" },
                            h("path", { fill: "currentColor", d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" })),
                        h("span", null, this.translator('Filter'))
                    ]),
                h(TagType, { types: this.types, filter: this.filter, field: this.field, ref: el => this.bindPanel(el) }))));
    }
    static get is() { return "anj-column-filter-toggle"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["column-filter-toggle.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["column-filter-toggle.css"]
    }; }
    static get properties() { return {
        "dataType": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "DataType",
                "resolved": "\"boolean\" | \"date\" | \"datetime\" | \"number\" | \"string\"",
                "references": {
                    "DataType": {
                        "location": "import",
                        "path": "../../table.types"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The data type"
            },
            "attribute": "data-type",
            "reflect": false
        },
        "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": ""
            }
        },
        "dateFormatter": {
            "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": ""
            }
        },
        "datetimeFormatter": {
            "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": ""
            }
        },
        "numberFormatter": {
            "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": ""
            }
        },
        "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 {
        "active": {}
    }; }
    static get events() { return [{
            "method": "anjFilter",
            "name": "anjFilter",
            "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 elementRef() { return "element"; }
    static get watchers() { return [{
            "propName": "translator",
            "methodName": "injectedPropWatcher"
        }, {
            "propName": "dateFormatter",
            "methodName": "injectedPropWatcher"
        }, {
            "propName": "numberFormatter",
            "methodName": "injectedPropWatcher"
        }]; }
}
Tunnel.injectProps(ColumnFilterToggle, ['dateFormatter', 'datetimeFormatter', 'numberFormatter', 'translator']);
