const form = document.querySelector('#upload-form');
const downloadsDiv = document.querySelector('#downloads');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const files = form.elements.files.files;
  if (files.length === 0) {
    alert('Please select at least one file.');
    return;
  }
  if (files.length > 20) {
    alert('Please select no more than 20 files.');
    return;
  }
  clearDownloads();
  const compressedFiles = await Promise.all([...files].map(compressFile));
  compressedFiles.forEach(downloadFile);
});

function compressFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (event) => {
      const img = new Image();
      img.onload = () => {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = canvas.width * (img.height / img.width); // Set the height based on the aspect ratio
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        canvas.toBlob((blob) => {
          let compressedFile;
          if (file.type === 'image/png') {
            const quantize = new RgbQuant({
              colors: 256,
              palette: Array.from({ length: 256 }).map((_, i) => i * 0x101),
            });
            quantize.sample(canvas);
            const indexedCanvas = quantize.reduce(canvas);
            indexedCanvas.toBlob((blob) => {
              compressedFile = new File([blob], `(${getTimestamp()}) ${file.name}`, { type: file.type });
              resolve(compressedFile);
            }, file.type, 0.5); // Use a compression quality of 0.5 for indexed PNG files
          } else {
            compressedFile = new File([blob], `(${getTimestamp()}) ${file.name}`, { type: file.type });
            resolve(compressedFile);
          }
        }, file.type, 0.3); // Use a compression quality of 0.3 for JPEG and WebP files
      };
      img.onerror = () => {
        reject(new Error(`Failed to load image ${file.name}`));
      };
      img.src = event.target.result;
    };
    reader.readAsDataURL(file);
  });
}

function getTimestamp() {
  const date = new Date();
  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}-${pad(date.getMinutes())}-${pad(date.getSeconds())}`;
}

function pad(num) {
  return num.toString().padStart(2, '0');
}

function downloadFile(file) {
  const url = URL.createObjectURL(file);
  const link = document.createElement('a');
  link.href = url;
  link.download = file.name.replace(/\.(jpg|png|webp)$/, `(compressed).$1`);
  link.textContent = `Download ${link.download}`;
  downloadsDiv.appendChild(link);
}

function clearDownloads() {
  downloadsDiv.innerHTML = '';
}