import { h } from "@stencil/core";
import QRCode from "qrcode";
import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
import JustifiAnalytics from "../../api/Analytics";
import { checkPkgVersion } from "../../utils/check-pkg-version";
export class JustifiCheckoutQrCode {
    constructor() {
        this.size = 256;
    }
    componentWillLoad() {
        checkPkgVersion();
        this.analytics = new JustifiAnalytics(this);
    }
    componentDidLoad() {
        this.renderQrCode();
    }
    disconnectedCallback() {
        var _a;
        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
    }
    propChanged() {
        this.renderQrCode();
    }
    get checkoutUrl() {
        return `https://components.justifi.ai/hosted-checkout/${this.checkoutId}`;
    }
    async renderQrCode() {
        if (!this.checkoutId) {
            this.errorEvent.emit({
                message: 'checkoutId is required',
                errorCode: ComponentErrorCodes.MISSING_PROPS,
                severity: ComponentErrorSeverity.ERROR,
            });
            return;
        }
        if (!this.qrContainerEl)
            return;
        const svg = await QRCode.toString(this.checkoutUrl, {
            type: 'svg',
            width: this.size,
            errorCorrectionLevel: 'M',
        });
        this.qrContainerEl.innerHTML = svg;
    }
    render() {
        if (!this.checkoutId)
            return null;
        return (h("div", { ref: (el) => (this.qrContainerEl = el) }));
    }
    static get is() { return "justifi-checkout-qr-code"; }
    static get properties() {
        return {
            "checkoutId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "checkout-id"
            },
            "size": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size",
                "defaultValue": "256"
            }
        };
    }
    static get events() {
        return [{
                "method": "errorEvent",
                "name": "error-event",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "ComponentErrorEvent",
                    "resolved": "ComponentErrorEvent",
                    "references": {
                        "ComponentErrorEvent": {
                            "location": "import",
                            "path": "../../api/ComponentEvents",
                            "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "checkoutId",
                "methodName": "propChanged"
            }, {
                "propName": "size",
                "methodName": "propChanged"
            }];
    }
}
