// Dynamic Icon generator
function createIcon(text, size = 16) {
  const canvas = new OffscreenCanvas(size, size);
  const ctx = canvas.getContext("2d");

  // Wipe canvas
  ctx.clearRect(0, 0, size, size);

  // Background
  ctx.fillStyle = "#4285F4"; // Google Blue
  ctx.fillRect(0, 0, size, size);

  // Text
  ctx.fillStyle = "white";
  ctx.font = `bold ${Math.floor(size * 0.5625)}px Arial`;
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(text, size / 2, size / 2);

  return ctx.getImageData(0, 0, size, size);
}

// Update the extension icon
function updateExtensionIcon(zoomLevel, accelerationMultiplier) {
  const zoomText = zoomLevel.toFixed(2);
  const accelText = accelerationMultiplier.toFixed(2);

  // Create icons of different sizes
  const icon16 = createIcon(zoomText, 16);
  const icon32 = createIcon(zoomText, 32);
  const icon48 = createIcon(zoomText, 48);
  const icon128 = createIcon(zoomText, 128);

  // Set the icon
  chrome.action.setIcon({
    imageData: {
      16: icon16,
      32: icon32,
      48: icon48,
      128: icon128,
    },
  });

  // Update badge with multiplier
  chrome.action.setBadgeText({ text: accelText + "x" });
  chrome.action.setBadgeBackgroundColor({ color: "#34A853" }); // Google Green
}

// Listen for messages
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "updateZoomInfo") {
    updateExtensionIcon(request.zoomLevel, request.accelerationMultiplier);
  }
});

// Set icon
updateExtensionIcon(1, 1);