import { h } from "@stencil/core";
import QRCode from "qrcode";
export class QrCodeGenerator {
    constructor() {
        this.url = undefined;
        this.countdownSeconds = -1;
        this.outdatedMessage = undefined;
        this.expiresInMessage = undefined;
        this.updateCodeEverySecond = true;
        this.ariaLabel = undefined;
        this.remainingSeconds = undefined;
        this.isOutdated = false;
        this.isFullscreen = false;
    }
    canvasRef;
    timer;
    urlWithSegment;
    gray900 = '#2d2013';
    blackHex = '#000';
    whiteHex = '#fff';
    connectedCallback() {
        this.isOutdated = false;
        if (this.timer == null) {
            this.generateQRCode();
            if (this.countdownSeconds !== -1) {
                requestAnimationFrame(() => {
                    this.startCountdown();
                });
            }
        }
    }
    componentWillLoad() {
        this.urlWithSegment = this.url + '#';
        this.remainingSeconds = this.countdownSeconds;
        if (this.timer != null) {
            this.resetCountdown();
        }
    }
    disconnectedCallback() {
        this.resetCountdown();
    }
    resetCountdown() {
        if (this.timer !== null) {
            this.remainingSeconds = this.countdownSeconds;
            clearInterval(this.timer);
            this.timer = null;
            return;
        }
    }
    generateQRCode(urlSegment = '') {
        if (this.url && this.canvasRef) {
            this.urlWithSegment += urlSegment;
            QRCode.toCanvas(this.canvasRef, this.urlWithSegment, {
                width: 200,
                color: {
                    dark: this.isOutdated ? this.gray900 : this.blackHex,
                    light: this.isOutdated ? this.gray900 : this.whiteHex,
                },
            }, error => {
                if (error)
                    console.error(error);
            });
        }
    }
    startCountdown() {
        this.timer = setInterval(() => {
            if (this.remainingSeconds > 0) {
                this.remainingSeconds--;
                this.generateQRCode('p');
            }
            else {
                clearInterval(this.timer);
                this.isOutdated = true;
                this.generateQRCode();
            }
        }, 1000);
    }
    render() {
        return (h("div", { key: '4cd70480b4a6a88d4715f088f339b35bc84bcab2' }, h("button", { key: '9ef568af4a0002f559be89307a19d7a4ab05ae40', class: "qr-button__wrapper", "aria-label": this.ariaLabel }, h("canvas", { key: '8fb7c85093d3cade435141f8b9a1b67228cc9d2e', class: this.isOutdated ? 'outdated' : '', ref: el => (this.canvasRef = el) })), this.countdownSeconds !== -1 && h("div", { key: '98c4987d02b47c5ad01412c49c8ffb72a9b5df5a', class: "timer" }, this.isOutdated && h("span", { key: 'dd63f18d81793c483a8a4f415d34d282c3d6b599', class: "outdated-message" }, this.outdatedMessage), !this.isOutdated && this.expiresInMessage && h("span", { key: '8da16f4bc691e6c8e9be5bcebd92d38331840ff5' }, this.expiresInMessage, " ", this.remainingSeconds))));
    }
    static get is() { return "pn-qr-code-generator"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-qr-code-generator.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-qr-code-generator.css"]
        };
    }
    static get properties() {
        return {
            "url": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "url",
                "reflect": false
            },
            "countdownSeconds": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "countdown-seconds",
                "reflect": false,
                "defaultValue": "-1"
            },
            "outdatedMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "outdated-message",
                "reflect": false
            },
            "expiresInMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "expires-in-message",
                "reflect": false
            },
            "updateCodeEverySecond": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "update-code-every-second",
                "reflect": false,
                "defaultValue": "true"
            },
            "ariaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "aria-label",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "remainingSeconds": {},
            "isOutdated": {},
            "isFullscreen": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "url",
                "methodName": "generateQRCode"
            }];
    }
}
//# sourceMappingURL=pn-qr-code-generator.js.map
