import { Host, h } from "@stencil/core";
import { cls, isEmpty } from "../../utils/helpers";
import { Lang } from "../../services/lang";
export class XDatatableFilter {
    constructor() {
        this.active = undefined;
        this.valid = undefined;
        this.label = undefined;
        this.type = 'number';
        this.condition = undefined;
        this.value = undefined;
        this.field = undefined;
        this.options = [];
    }
    /**
     * Element event on slot make changes
     */
    handleSlotChange() {
        this.computeChildFiltersItems();
    }
    /**
     * Element event on child items changed
     */
    handleChildsChange() {
        this.condition = '[]';
        this.value = this.options.filter(option => option.selected)
            .map(i => i.value)
            .join(',');
        this.checkIsValid();
    }
    /**
     * Element event on slot make changes
     */
    handleClearEvent() {
        var _a;
        (_a = this.el.querySelector('form')) === null || _a === void 0 ? void 0 : _a.reset();
        if (this.hasOptions()) {
            this.options.forEach(i => {
                i.selected = false;
            });
        }
        this.active = false;
        this.value = null;
        this.condition = null;
        this.checkIsValid();
    }
    /**
     * Update the child filters and render the result
     */
    computeChildFiltersItems() {
        this.options = Array.from(this.el.children)
            .filter(tab => tab.nodeName.toLowerCase() === 'x-datatable-filter-item')
            .map(item => item);
        if (this.options.length > 0) {
            this.type = 'array';
        }
    }
    /**
     * On element will mounted
     */
    componentWillLoad() {
        this.computeChildFiltersItems();
    }
    /**
     * Filter has options
     */
    hasOptions() {
        return this.options.length > 0;
    }
    /**
     * The condition is ranged
     */
    isRanged() {
        return ['~', '><'].includes(this.condition);
    }
    /**
     * Get the first value of ranged data
     */
    getFirstRangedValue() {
        var _a, _b;
        const value = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
        return value.length > 0 ? value[0] : null;
    }
    /**
     * Get the last value of ranged data
     */
    getLastRangedValue() {
        var _a, _b;
        const value = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
        return value.length > 1 ? value[1] : null;
    }
    /**
     * Verify is condition and value is valid
     */
    checkIsValid() {
        this.valid = !isEmpty(this.value) && !isEmpty(this.condition);
    }
    /**
     * On operator selection change
     */
    onOperatorChange(e) {
        const value = e.target.value;
        this.condition = isEmpty(value) ? null : value;
        this.checkIsValid();
    }
    /**
     * On input value change
     */
    onValueInput(e) {
        var _a, _b, _c;
        if (this.isRanged() && this.type != 'date') {
            const fromInput = this.el.querySelector('[data-from]');
            const toInput = this.el.querySelector('[data-to]');
            const from = (_a = fromInput.value) !== null && _a !== void 0 ? _a : null;
            const to = (_b = toInput.value) !== null && _b !== void 0 ? _b : null;
            this.value = !isEmpty(String(from)) && !isEmpty(String(to)) ? [from, to].join(',') : null;
        }
        else {
            const value = (_c = e.target.value) !== null && _c !== void 0 ? _c : null;
            this.value = !isEmpty(String(this.value)) ? value : null;
        }
        this.checkIsValid();
    }
    /**
     * Render element
     */
    render() {
        var _a, _b, _c;
        return h(Host, { key: '3bacf6d538ce30f5b985764d33b2efe054d0f613' }, h("x-collapse", { key: '66c2589b4a10a8e5bb01b5d703293b1b7f0da392' }, h("div", { key: '7ba55b2dcea7057d2efd38803a97cdb195ce1c13', slot: "header", class: cls('filter-header', { 'is-ready': this.valid }) }, h("h5", { key: '967fde4f44a6ea658f8d9957707e2090e5607f66' }, this.label), this.hasOptions() && h("p", { key: '9127e5f20025e3d961f3e44c07ad80be94a91f6e', class: "text-truncate" }, this.options
            .filter(option => option.selected)
            .map(i => i.innerText.trim())
            .join(', ')), !this.hasOptions() && this.condition && (this.isRanged() ?
            (h("p", null, (_a = this.getFirstRangedValue()) !== null && _a !== void 0 ? _a : '???', " ", this.condition, " ", (_b = this.getLastRangedValue()) !== null && _b !== void 0 ? _b : '???')) :
            (h("p", null, this.condition, " ", (_c = this.value) !== null && _c !== void 0 ? _c : '???')))), !this.hasOptions() && h("form", { key: '1621894c2f1476440323e8f6c707cd399dd941da' }, h("div", { key: 'bf7b372123a4b62c2a2dad0b36032dda6e306bf7', class: "mb-2" }, h("x-select", { key: '3c0db03d61aa9c8cee6e88bcd079e5378d1fdcb7', onChange: (e) => this.onOperatorChange(e), label: Lang.get('datatable.condition'), placeholder: Lang.get('datatable.select-condition') }, h("optgroup", { key: 'a5837ae03e71d07002791fd84c4988e4dc2c82d9', label: Lang.get('datatable.operator') }, this.type != 'text' && h("option", { key: 'd08a7f68cd8611f660d95d873a4932109647587e', value: ">" }, Lang.get('datatable.gt')), this.type != 'text' && h("option", { key: '00239567b05c1ed61c6be7c8f9dba783fe41fcbc', value: ">=" }, Lang.get('datatable.egt')), this.type != 'text' && h("option", { key: 'b136b16ba4cc999790b96e8de7239f382cc97f83', value: "<" }, Lang.get('datatable.lt')), this.type != 'text' && h("option", { key: '0dce2282ca0bbb9e5cfd00c18842bf58a939028f', value: "<=" }, Lang.get('datatable.elt')), h("option", { key: 'a9aff349123c770fa03428cf84e37645570e08c4', value: "=" }, Lang.get('datatable.e')), h("option", { key: 'a56e88a38e154a938f85c47d735c3bb3998ebe0f', value: "!=" }, Lang.get('datatable.ne')), this.type == 'text' && h("option", { key: 'ea37836cbb647c616b4493225f9cce864765dc07', value: "*" }, Lang.get('datatable.contains'))), this.type != 'text' && h("optgroup", { key: 'a631cfcb2cfecc2497f111d2b93a25f87dd01c4c', label: Lang.get('datatable.range') }, h("option", { key: '0babd1ec9b430ffc857aadbf48f861ef3d7058a9', value: "~" }, Lang.get('datatable.btw')), h("option", { key: 'd294658eeeeda7b9ea38d4f05b2d51a7d2602e14', value: "><" }, Lang.get('datatable.nbtw'))))), h("div", { key: 'a607238ec7f1058d2f698bf093b6fb1cc3128c6d', class: "mb-2 form-between" }, this.type == 'date' ?
            (h("x-datepicker", { label: Lang.get('datatable.date'), ranged: this.isRanged(), onInput: (e) => this.onValueInput(e) })) :
            h("x-input", { label: Lang.get(this.isRanged() ? 'datatable.from' : 'datatable.value'), "data-from": true, onInput: (e) => this.onValueInput(e) }), this.type != 'date' && this.isRanged() && h("b", { key: '50290f63450db25f6d5416d2dd3bfae4fab5d136', class: "mx-2" }, this.condition), this.type != 'date' && this.isRanged() && h("x-input", { key: '8bcb8bf21b7b4d3ec42ef7c2009a6d4aab94c943', placeholder: Lang.get('datatable.to'), "data-to": true, onInput: (e) => this.onValueInput(e) }))), h("div", { key: '3d15c9f3f1ed344fbbdfd0ac97e04add20c13fb3', class: cls({ 'mb-2': this.hasOptions() }) }, h("slot", { key: '22bec84df137d89fb3583e2c31e7efc37afc9569' }))));
    }
    static get is() { return "x-datatable-filter"; }
    static get originalStyleUrls() {
        return {
            "$": ["style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "active": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Filter active"
                },
                "attribute": "active",
                "reflect": true
            },
            "valid": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Filter is ready and valid"
                },
                "attribute": "valid",
                "reflect": true
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Filter label"
                },
                "attribute": "label",
                "reflect": false
            },
            "type": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "DatatableFilterType",
                    "resolved": "\"array\" | \"date\" | \"number\" | \"text\"",
                    "references": {
                        "DatatableFilterType": {
                            "location": "local",
                            "path": "/opt/atlassian/pipelines/agent/build/src/components/x-datatable/component-filter.tsx",
                            "id": "src/components/x-datatable/component-filter.tsx::DatatableFilterType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Filter type"
                },
                "attribute": "type",
                "reflect": false,
                "defaultValue": "'number'"
            },
            "condition": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "DatatableFilterCondition",
                    "resolved": "\"!=\" | \"*\" | \"<\" | \"<=\" | \"=\" | \">\" | \"><\" | \">=\" | \"[]\" | \"~\"",
                    "references": {
                        "DatatableFilterCondition": {
                            "location": "local",
                            "path": "/opt/atlassian/pipelines/agent/build/src/components/x-datatable/component-filter.tsx",
                            "id": "src/components/x-datatable/component-filter.tsx::DatatableFilterCondition"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Filter condition type"
                },
                "attribute": "condition",
                "reflect": true
            },
            "value": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Filter value"
                },
                "attribute": "value",
                "reflect": true
            },
            "field": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Field to filter in database"
                },
                "attribute": "field",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "options": {}
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "slotchange",
                "method": "handleSlotChange",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "changed",
                "method": "handleChildsChange",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "clear",
                "method": "handleClearEvent",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
