import { App } from "@web-atoms/core/dist/App";
import { UMD } from "@web-atoms/core/dist/core/types";
import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
import WebApp from "@web-atoms/core/dist/web/WebApp";
// import * as QRCode from "qrcode/build/qrcode.min.js";

let QRCode: any;

export default class QRCodeView extends AtomControl {

    public code: string;

    public get webApp(): WebApp {
        return this.app as WebApp;
    }

    constructor(app: App, e?: HTMLElement) {
        super(app, e || document.createElement("canvas"));
    }

    public preCreate() {
        this.code = null;
        this.runAfterInit(() => {
            this.app.runAsync(() => this.setupQrCode());
        });
    }

    protected async setupQrCode() {

        // dynamically load module...
        UMD.map("qrcode", "https://cdn.jsdelivr.net/npm/qrcode@1.4.4/");

        QRCode = await UMD.import("qrcode/build/qrcode.min.js");

        this.bind(this.element, "none", [["this", "code"]], false, (v) => this.prepareCode(v), this);
    }

    protected async prepareCode(v) {
        if (!v) {
            return;
        }
        await QRCode.toCanvas(this.element, v);
    }

}