const qrcode = new QRCode("qrcode", {
  width: 512,
  height: 512
});
const input = document.getElementById('text');

function svg_content() {
  const svg = document.querySelector('#qrcode svg');
  svg.setAttribute('width',512);
  svg.setAttribute('height',512);
  svg.setAttribute('xmlns','http://www.w3.org/2000/svg');
  const content = `<?xml version="1.0" ?>`+svg.outerHTML;
  return content;
}

async function set_png_link() {
  const blob = await png_blob();
}

let png_blob;
let svg_blob;

async function go() {    
  qrcode.makeCode(input.value);
  

  const basename = input.value.replace(/\W+/g,'-');
  function set_link(a, url, extension) {
    a.setAttribute('href', url);
    a.setAttribute('target','_blank');
    a.setAttribute('download', `${basename}.${extension}`);
  }
  

  const content = svg_content();
  svg_blob = new Blob([content],{type: 'image/svg+xml'});
  const a_svg = document.getElementById('download-svg');
  const svg_url = URL.createObjectURL(svg_blob);
  
  set_link(document.getElementById('download-svg'), svg_url, 'svg');

  const px = Math.max(3000, 10 * qrcode._oQRCode.getModuleCount());
  const img = new Image();
  const canvas = new OffscreenCanvas(px, px);
  canvas.width = canvas.height = px;
  const ctx = canvas.getContext('2d');
  const promise = new Promise(async (resolve) => {
    img.addEventListener('load', async () => {
      canvas.getContext('2d').drawImage(img, 0, 0, px, px);
      const blob = await canvas.convertToBlob();
      resolve(blob);
    },{once:true});
  
  })
  
  img.src = svg_url;
  
  png_blob = await promise;
  const png_url = URL.createObjectURL(png_blob);
  set_link(document.getElementById('download-png'), png_url, 'png');
}

input.addEventListener('change', e => {
  go();
})

input.addEventListener('input', e => {
  go();
})

async function writeClipImg() {
  try {
    if (ClipboardItem.supports("image/svg+xml")) {
      const imgURL = "/my-image.svg";
      const data = await fetch(imgURL);
      const blob = await data.blob();
      await navigator.clipboard.write([
        new ClipboardItem({
          [blob.type]: blob,
        }),
      ]);
      console.log("Fetched image copied.");
    } else {
      console.log("SVG images are not supported by the clipboard.");
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}



document.getElementById('copy-to-clipboard-png').addEventListener('click',async () => {
  await navigator.clipboard.write([
    new ClipboardItem({
      [png_blob.type]: png_blob,
    })
  ]);
})

document.getElementById('copy-to-clipboard-svg').addEventListener('click',async () => {
  const content = svg_content();
  try {
    await navigator.clipboard.writeText(content);
  } catch (error) {
    console.error(error.message);
  }
})

go();