import { h } from "@stencil/core";
import { hasRequiredError, generateId } from "@boldpenguin/sdk-utility";
export class BpSdkVehicleVinInputContainer {
    constructor() {
        this.onFocusOut = () => {
            this.touched = true;
            this.updateErrors(this.pristine, true, this.value);
        };
        this.value = undefined;
        this.answerId = undefined;
        this.code = generateId(8);
        this.useExternal = false;
        this.touched = false;
        this.pristine = true;
        this.errors = [];
    }
    resetState() {
        this.touched = false;
        this.pristine = true;
        this.errors = [];
    }
    connectedCallback() {
        this.resetState();
    }
    componentWillLoad() {
        this.useExternal = !!customElements.get('bp-sdk-external-vehicle-vin-input-container');
        customElements.whenDefined('bp-sdk-external-vehicle-vin-input-container').then(() => {
            this.useExternal = true;
        });
    }
    loadFocusEvents() {
        if (!this.useExternal) {
            this.el.addEventListener('focusout', this.onFocusOut);
        }
    }
    unloadFocusEvents() {
        this.el.removeEventListener('focusout', this.onFocusOut);
    }
    componentDidLoad() {
        this.loadFocusEvents();
    }
    disconnectedCallback() {
        this.unloadFocusEvents();
    }
    onValueUpdate(evt) {
        var _a;
        if (this.useExternal) {
            return;
        }
        this.pristine = false;
        this.value = ((_a = evt.detail) !== null && _a !== void 0 ? _a : [])[0];
        this.updateErrors(false, this.touched, this.value);
        if (this.errors.length === 0) {
            this.vinUpdate.emit({ vin: this.value, answerId: this.answerId });
        }
    }
    updateErrors(pristine, touched, value) {
        this.errors = hasRequiredError(pristine, touched, value) ? ['required'] : [];
    }
    onMakeDirty() {
        this.touched = true;
        this.pristine = false;
    }
    render() {
        return [this.useExternal && this.renderExternal(), !this.useExternal && this.renderInternal()];
    }
    renderExternal() {
        return h("bp-sdk-external-vehicle-vin-input-container", null);
    }
    renderInternal() {
        return (h("bp-sdk-vehicle-vin-input", { value: this.value, code: this.code, label: "Enter vehicle VIN", touched: this.touched, pristine: this.pristine, errors: this.errors }));
    }
    static get is() { return "bp-sdk-vehicle-vin-input-container"; }
    static get originalStyleUrls() {
        return {
            "$": ["./bp-sdk-vehicle-vin-input-container.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bp-sdk-vehicle-vin-input-container.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Value of input"
                },
                "attribute": "value",
                "reflect": false
            },
            "answerId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The id of the answer associated with this field"
                },
                "attribute": "answer-id",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "code": {},
            "useExternal": {},
            "touched": {},
            "pristine": {},
            "errors": {}
        };
    }
    static get events() {
        return [{
                "method": "vinUpdate",
                "name": "vinUpdate",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "{vin: string, answerId: string}",
                    "resolved": "{ vin: string; answerId: string; }",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "valueUpdate",
                "method": "onValueUpdate",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "makeDirty",
                "method": "onMakeDirty",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
