window.addEventListener("load", () => main());

const main = () => {
  for (const item of document.getElementsByTagName("img")) {
    if (!item.src.startsWith("data:image/svg+xml;base64,")) {
      // Exclude image who aren't SVG and base64 encoded
      break;
    }

    /** Convert to grayscale */
    const colorToGrayscale = (color) => {
      return 0.3 * color.r + 0.59 * color.g + 0.11 * color.b;
    };

    /** Extract color using canvas2d */
    const extractColors = (image) => {
      const canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(image, 0, 0);
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      const pixelData = imageData.data;

      const colors = [];
      for (let i = 0; i < pixelData.length; i += 4) {
        if (pixelData[i + 3] > 0) {
          colors.push({
            r: pixelData[i],
            g: pixelData[i + 1],
            b: pixelData[i + 2],
          });
        }
      }

      return colors;
    };

    // Extract colors
    const colors = extractColors(item);

    // Calculate the average grayscale value
    const grayscaleValues = colors.map(colorToGrayscale);
    const totalGrayscale = grayscaleValues.reduce((acc, val) => acc + val, 0);
    const averageGrayscale = totalGrayscale / grayscaleValues.length;

    console.log(averageGrayscale);
    if (averageGrayscale < 128) {
      item.style = "filter: invert(1);";
    }
  }
};