import { h } from "@stencil/core";
import Tunnel from '../locale/i18n.provider';
export class List {
    constructor() {
        this.content = '';
        this.hideLabels = false;
        this.value = [];
    }
    invalidWatcher(newVal) {
        this.anjInvalid.emit(newVal);
    }
    onBlur() {
        // Aids with inferred key tracking on the this.value iteration in render()
        this.value = this.value.slice(0);
    }
    onDrop({ detail, target }) {
        detail['targetIndex'] = (Number.isInteger(detail.targetIndex)) ? detail.targetIndex : target.index;
        const movingValue = this.value[detail.currentIndex];
        this.value.splice(detail.currentIndex, 1);
        this.value.splice(detail.targetIndex, 0, movingValue);
        this.value = this.value.slice(0);
    }
    onToolTipHover({ detail }) {
        clearTimeout(this.timer);
        this.content = this.translator(detail.action);
        this.popoverControl.display(detail.target);
    }
    onToolTipHoverEnd() {
        this.timer = window.setTimeout(() => {
            this.popoverControl.hide();
        }, 250);
    }
    onRowAdd({ detail }) {
        if (this.canAdd()) {
            this.value.splice(detail + 1, 0, null);
            this.value = this.value.slice(0);
        }
        this.emitListChange();
    }
    onRowRemove({ detail }) {
        if (this.canRemove()) {
            this.value.splice(detail, 1);
            this.value = this.value.slice(0);
        }
        this.emitListChange();
    }
    onItemChange({ detail }) {
        this.value.splice(detail.index, 1, detail.value);
        this.emitListChange();
    }
    componentWillLoad() {
        this.setArray();
    }
    emitListChange() {
        clearTimeout(this.debounceTimer);
        this.debounceTimer = window.setTimeout(() => {
            this.popoverControl.hide();
            this.anjChange.emit(this.value);
        }, 50);
    }
    canAdd() {
        return (!this.max || this.value.length < this.max);
    }
    canRemove() {
        return ((!this.min || this.value.length > this.min) && this.value.length > 1);
    }
    // Setup list at minimum required fields
    setArray() {
        const lessThanMin = (this.min) ? this.min - this.value.length : 0;
        const lessThanOne = 1 - this.value.length;
        if (lessThanMin > 0 || lessThanOne > 0) {
            for (let i = 0; i < Math.max(lessThanOne, lessThanMin); i++) {
                this.value.push(null);
            }
        }
    }
    render() {
        return [
            h("anj-form-group", { class: "anj-schema-list-label" }, (!this.hideLabels) ? h("anj-label", null, this.label) : undefined),
            this.value.map((item, index) => h("anj-list-item", { canAdd: this.canAdd(), canRemove: this.canRemove(), index: index, options: this.options, type: this.type, value: item })),
            h("anj-popover", { placement: "bottom", ref: r => this.popoverControl = r }, this.content)
        ];
    }
    static get is() { return "anj-list"; }
    static get originalStyleUrls() { return {
        "$": ["list.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["list.css"]
    }; }
    static get properties() { return {
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label",
            "reflect": false
        },
        "invalid": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Whether the control is valid"
            },
            "attribute": "invalid",
            "reflect": true
        },
        "min": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "min",
            "reflect": false
        },
        "max": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "max",
            "reflect": false
        },
        "options": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "string[] | number[]",
                "resolved": "number[] | string[]",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "type": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'text' | 'number' | 'select'",
                "resolved": "\"number\" | \"select\" | \"text\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "type",
            "reflect": false
        },
        "value": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "any[]",
                "resolved": "any[]",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "[]"
        },
        "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": ""
            }
        }
    }; }
    static get states() { return {
        "content": {},
        "hideLabels": {}
    }; }
    static get events() { return [{
            "method": "anjChange",
            "name": "anjChange",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "anjInvalid",
            "name": "anjInvalid",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            }
        }]; }
    static get watchers() { return [{
            "propName": "invalid",
            "methodName": "invalidWatcher"
        }]; }
    static get listeners() { return [{
            "name": "anjBlur",
            "method": "onBlur",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "anjDrop",
            "method": "onDrop",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "anjHover",
            "method": "onToolTipHover",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "anjHoverEnd",
            "method": "onToolTipHoverEnd",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "anjRowAdd",
            "method": "onRowAdd",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "anjRowRemove",
            "method": "onRowRemove",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "anjListItemChange",
            "method": "onItemChange",
            "target": undefined,
            "capture": false,
            "passive": false
        }]; }
}
Tunnel.injectProps(List, ['translator']);
