import { Axios } from './PhpApi';

import React from 'react'
import QRCodeStyling from 'qr-code-styling';


const upload = (file: File): Promise<any> => 
{
    let formData = new FormData();
  
    formData.append("file", file);
    formData.append("submit", "1");
    formData.append("qr", "1");
  
    let uploadRes = Axios.post("upload.php", formData, {
      headers: 
      {
        "Content-Type": "multipart/form-data",
      }
    });
  
    // let a: number = 1+3;
    // a++;
    return uploadRes;
  };

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",
        }
    });    
    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);
    }, 'image/png');
}