function draw_bytes(data) {
    const canvas = document.getElementById("blob");
    const ctx = canvas.getContext("2d");

    // canvas.width = canvas.parentNode.width;
    // canvas.height = canvas.parentNode.height;

    const blockSize = 2;
    const blockPadding = 1;

    ctx.fillStyle = "#ddd";

    const numBlocks = Math.ceil(data.meta.sizeb / (blockSize + blockPadding));
    for (let i = 0; i < numBlocks; i++) {
        const x = i * (blockSize + blockPadding);
        ctx.fillRect(x, 0, blockSize, canvas.height);
    }

    ctx.fillStyle = "blue";
    data.offsets.forEach((offset) => {
        const start = Math.floor(offset.start / (blockSize + blockPadding));
        const end = Math.ceil(offset.end / (blockSize + blockPadding));
        for (let i = start; i < end; i++) {
            const x = i * (blockSize + blockPadding);
            ctx.fillRect(x, 0, blockSize, canvas.height);
        }
    });
}

function bytes_to_human(bytes) {
	const units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
	let i =0;
	while (bytes >= 1024 && i < units.length - 1) {
		bytes /= 1024;
		i++;
	}
	return bytes.toFixed(2) + " " + units[i];
}

async function process_upload(file) {
    const formData = new FormData();
    formData.append('file', file);

    const button = document.querySelector('button');
    button.setAttribute('aria-busy', 'true');
    button.textContent = `processing ${file.name}...`;
  
    const response = await fetch('api/upload_file', {
      method: 'POST',
      body: formData,
      timeout: 600000 // 10 minutes
    });
  
    if (response.ok) {
      const data = await response.json();
      const container = document.querySelector('.container');
  
      // visualization
      container.innerHTML = `
<div class="grid">
<div id="blob-column">
<canvas id="blob" width="600px" height="600px" style="background-color: #18232c;"></canvas>
</div>
<div id="info-column">
<small>
<h1>${data.meta.name}</h1>
<details open>
    <summary>blob meta</summary>
    <figure>
        <table role="grid">
            <tr>
                <th><strong>filename:</strong></th>
                <td>${data.meta.name}</td>
            </tr>
            <tr>
                <th><strong>process duration:</strong></th>
                <td>${data.meta.duration}</td>
            </tr>
            <tr>
                <th><strong>size:</strong></th>
                <td>${data.meta["sizeb"]} (${bytes_to_human(data.meta.sizeb)})</td>
            </tr>
            <tr>
                <th><strong>sha1:</strong></th>
                <td>${data.meta.sha1}</td>
            </tr>
            <tr>
                <th><strong>md5:</strong></th>
                <td>${data.meta.md5}</td>
            </tr>
        </table>
    </figure>
</details>
<article>
    <header>Header</header>
    Body
    <footer>Footer</footer>
</article>
<article>
    <header>Header</header>
    Body
    <footer>Footer</footer>
</article>
<pre>${JSON.stringify(data, null, 2)}</pre>
</small>
</div>
</div>`;
    draw_bytes(data);
    } else {
      console.error('error uploading file');
    }
  }
  
  function upload_file() {
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.addEventListener('change', (event) => {
      const file = event.target.files[0];
      process_upload(file);
    });
    fileInput.click();
  }