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: '48326109625df7c5184f4a2870246e56ff2d63d7' }, h("x-collapse", { key: 'dd999e32432944e2c254d0a7e5107432a75dfdff' }, h("div", { key: 'e1151b23f8b2fd34a58265e518940bf941944bd9', slot: "header", class: cls('filter-header', { 'is-ready': this.valid }) }, h("h5", { key: '1a291439465b43a376ceffc64084e6f343e4963f' }, this.label), this.hasOptions() && h("p", { key: 'ee89e8201ed28bee56754e805920214ca5e24a90', 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: '492992f539ca9b9f4f526b90a3da0bbf588de8a6' }, h("div", { key: 'a224ad41ae6451cd9bae988b27ca36ab64185288', class: "mb-2" }, h("x-select", { key: '22336f75d70b5d94cf532e1dac444df609a823a8', onChange: (e) => this.onOperatorChange(e), label: Lang.get('datatable.condition'), placeholder: Lang.get('datatable.select-condition') }, h("optgroup", { key: 'a6646386139daf79c43c77c7dc9466205ad36394', label: Lang.get('datatable.operator') }, this.type != 'text' && h("option", { key: '9d498d6858a733a9087181095a566eb9e81fa2aa', value: ">" }, Lang.get('datatable.gt')), this.type != 'text' && h("option", { key: 'de9cd1defd7863c2f94f9c1534a64fc6223a9ae9', value: ">=" }, Lang.get('datatable.egt')), this.type != 'text' && h("option", { key: '51549a6aee486e561dcd81f48226c23b17233548', value: "<" }, Lang.get('datatable.lt')), this.type != 'text' && h("option", { key: '738012bd47cc18fdcfdabcfc830d4fabed91ad15', value: "<=" }, Lang.get('datatable.elt')), h("option", { key: '0ed175d19d90c026149c4ce64c305d4c17e12384', value: "=" }, Lang.get('datatable.e')), h("option", { key: '12ac5626c5c573f8af4e296cdf7581010addfad5', value: "!=" }, Lang.get('datatable.ne')), this.type == 'text' && h("option", { key: 'f818b7c844d85000e4b946f752df438fe0deb215', value: "*" }, Lang.get('datatable.contains'))), this.type != 'text' && h("optgroup", { key: '78c6b7ad28ce709c3161ceee7c979a2da43f7a89', label: Lang.get('datatable.range') }, h("option", { key: 'a5d68c86334b79bbf5a92be7af6eae4a9fd06230', value: "~" }, Lang.get('datatable.btw')), h("option", { key: '5ab1d4db4f48d4366cb760fa74223d39e6f71c33', value: "><" }, Lang.get('datatable.nbtw'))))), h("div", { key: '37e7263ceec8ded986473ced2f3609e71c61ef3b', 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: '87345b12a073eed29d8ce01b475d91a799f239f7', class: "mx-2" }, this.condition), this.type != 'date' && this.isRanged() && h("x-input", { key: 'b223d9d3a96017a8589491e600e65e664c4aea61', placeholder: Lang.get('datatable.to'), "data-to": true, onInput: (e) => this.onValueInput(e) }))), h("div", { key: 'dd85644bcba933dc1629c366521ceedffb560f18', class: cls({ 'mb-2': this.hasOptions() }) }, h("slot", { key: '069d6dce64dd8e8c0d7414937e9665b95c4bb123' }))));
    }
    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
            }];
    }
}
