const fileInput = document.querySelector("#file-input");
const fileSummary = document.querySelector("#file-summary");
const fileName = document.querySelector("#file-name");
const fileSize = document.querySelector("#file-size");
const startButton = document.querySelector("#start-button");
const eventLog = document.querySelector("#event-log");

function formatBytes(bytes) {
  const formatter = new Intl.NumberFormat(undefined, {
    maximumFractionDigits: 1,
  });
  const units = ["B", "KiB", "MiB", "GiB", "TiB"];
  let value = bytes;
  let unit = units[0];

  for (const candidate of units) {
    unit = candidate;
    if (value < 1024 || candidate === units.at(-1)) {
      break;
    }
    value /= 1024;
  }

  return `${formatter.format(value)} ${unit}`;
}

function log(message) {
  eventLog.replaceChildren();
  const item = document.createElement("li");
  item.textContent = message;
  eventLog.append(item);
}

fileInput.addEventListener("change", () => {
  const [file] = fileInput.files;

  if (!file) {
    fileSummary.hidden = true;
    startButton.disabled = true;
    log("Choose a file to begin.");
    return;
  }

  fileName.textContent = file.name;
  fileSize.textContent = formatBytes(file.size);
  fileSummary.hidden = false;
  startButton.disabled = false;
  log("Ready to create an upload record.");
});