import { upload } from './PhpApi';
import QRCodeStyling from 'qr-code-styling';

export default async function CreateQr({qr_id}:{qr_id: string | undefined}) 
{
    const WWW_ROOT: string = process.env.REACT_APP_WWW_ROOT!;
    const qrCode = new QRCodeStyling(
    {
        width: 200,
        height: 200,
        type: 'canvas',
        image: WWW_ROOT + "uploads/glider.png",
        data: WWW_ROOT + qr_id,
        dotsOptions: 
        {
            color: "#000",
            type: "square"
        },
        imageOptions: 
        {
            crossOrigin: "anonymous",
            margin: 0
        },
        cornersSquareOptions: 
        {
            type: "extra-rounded",
        }
    });    
    console.log(qrCode); 
    console.log(document.getElementById("canvas")); 

    document.getElementById("canvas")!.innerHTML = "";
    qrCode.append(document.getElementById("canvas") as HTMLElement);

    let qr_el:HTMLCanvasElement = await qrCode._getElement() as unknown as HTMLCanvasElement;
    let file: File;

	qr_el.toBlob((blob) => 
    {
        file = new File([blob!], 'qr_blob.png', { type: 'image/png' });
        console.log(file); 
        upload(file, '1');
    }, 'image/png');
}