import { Host, h } from "@stencil/core";
export class CpslCodeInput {
    constructor() {
        this.handleInput = (ind, ev) => {
            var _a;
            const inputElements = this.inputs;
            // If getting an insertFromPaste remove the last element value since the value setting is handled in the paste event
            if (ev.inputType === 'insertFromPaste') {
                inputElements[Math.min(this.length - 1, ind)].value = '';
                return;
            }
            if (ev.inputType === 'insertText') {
                if (this.type === 'number' && isNaN(parseInt(ev.data))) {
                    inputElements[ind].value = '';
                    return;
                }
                const newCode = `${(_a = this.code) !== null && _a !== void 0 ? _a : ''}${ev.data}`;
                inputElements[Math.min(this.length - 1, newCode.length)].focus();
                this.cpslInput.emit({ value: newCode });
                this.code = newCode;
            }
        };
        this.handleKeyDown = (ind, ev) => {
            const inputElements = this.inputs;
            switch (ev.key) {
                case 'Backspace': {
                    let newCode;
                    if (!inputElements[ind].value) {
                        inputElements[Math.max(0, ind - 1)].value = '';
                        inputElements[Math.max(0, ind - 1)].focus();
                        newCode = this.code.substring(0, ind - 1);
                    }
                    else {
                        newCode = this.code.substring(0, ind);
                    }
                    this.cpslInput.emit({ value: newCode });
                    this.code = newCode;
                    break;
                }
                case 'ArrowLeft': {
                    setTimeout(() => {
                        this.inputs[ind].setSelectionRange(1, 1);
                    }, 0);
                    break;
                }
                default: {
                    break;
                }
            }
        };
        this.handleFocus = (ind) => {
            const inputElements = this.inputs;
            for (const input of inputElements) {
                if (!input.value) {
                    input.focus();
                    break;
                }
                else if (input.id === `code-input-${this.length - 1}`) {
                    input.focus();
                    break;
                }
            }
            setTimeout(() => {
                inputElements[ind].setSelectionRange(1, 1);
            }, 0);
        };
        this.handlePaste = (e) => {
            const inputElements = this.inputs;
            const pastedCode = e.clipboardData.getData('text');
            if (this.type === 'number' && isNaN(parseInt(pastedCode))) {
                // Remove illegal value from the first input. Not using a timeout here doesn't change the value properly.
                setTimeout(() => {
                    inputElements[0].value = '';
                }, 0);
                return;
            }
            this.cpslInput.emit({
                value: pastedCode,
            });
            inputElements.forEach((input, index) => {
                input.value = pastedCode.charAt(index);
            });
            inputElements[Math.min(this.length - 1, pastedCode.length)].focus();
        };
        this.code = undefined;
        this.errorText = undefined;
        this.helperText = undefined;
        this.length = undefined;
        this.type = 'number';
    }
    get inputs() {
        return Array.from(this.el.shadowRoot.querySelectorAll('input'));
    }
    render() {
        var _a;
        return (h(Host, { key: '9c620c8eb41b595e672e2b7d22944e37de630f73' }, h("div", { key: 'd8e870d0b15b90cfccd78ba5f15cf7b9c0680f0a', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
            var _a, _b;
            return (h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText), 'has-value': ((_a = this.code) === null || _a === void 0 ? void 0 : _a[i]) !== undefined }, id: `code-input-${i}`, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_b = this.code) === null || _b === void 0 ? void 0 : _b[i], inputMode: this.type === 'number' ? 'numeric' : 'text' }));
        })), (this.errorText || this.helperText) && (h("div", { key: '532bccdc9d9135f4728c503c77b3795440a3607a', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { key: '02db8b47b661f64f2fb3073827aef50d7b94f1f3', icon: this.errorText ? 'alertCircle' : 'infoCircle' }), h("span", { key: '228b294db359a308d3e76f2ce3c5d17b2d039781' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
    }
    static get is() { return "cpsl-code-input"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["cpsl-code-input.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["cpsl-code-input.css"]
        };
    }
    static get properties() {
        return {
            "code": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Value of the code."
                },
                "attribute": "code",
                "reflect": false
            },
            "errorText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Error text to show below the input. If this is provided the input will enter an error state."
                },
                "attribute": "error-text",
                "reflect": false
            },
            "helperText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Helper text to show below the input. If `\"errorText\"` is provided that will take precedence."
                },
                "attribute": "helper-text",
                "reflect": false
            },
            "length": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Length of the code."
                },
                "attribute": "length",
                "reflect": false
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'number' | 'string'",
                    "resolved": "\"number\" | \"string\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Type of characters to accept in the code.\nDefaults to number."
                },
                "attribute": "type",
                "reflect": false,
                "defaultValue": "'number'"
            }
        };
    }
    static get events() {
        return [{
                "method": "cpslInput",
                "name": "cpslInput",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "The `cpslInput` event is fired each time the user modifies the input's value."
                },
                "complexType": {
                    "original": "CodeChangeEventDetail",
                    "resolved": "CodeChangeEventDetail",
                    "references": {
                        "CodeChangeEventDetail": {
                            "location": "import",
                            "path": "./code-change-interface.js",
                            "id": "src/components/cpsl-code-input/code-change-interface.ts::CodeChangeEventDetail"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=cpsl-code-input.js.map
