import { PercentCrop } from "react-image-crop";

export function getRotatedImageBlob(image: HTMLImageElement) {
  return new Promise<Blob>((resolve, reject) => {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    if (!ctx) return reject(new Error("No 2d context"));

    canvas.width = image.naturalHeight;
    canvas.height = image.naturalWidth;

    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(Math.PI / 2);
    ctx.drawImage(image, -canvas.height / 2, -canvas.width / 2);

    canvas.toBlob((blob) => {
      if (!blob) return reject(new Error("Failed to create blob"));

      resolve(blob);
    });
  });
}

export function getModifiedImageBlob(
  image: HTMLImageElement,
  crop: PercentCrop,
  darken: number,
) {
  return new Promise<Blob>((resolve, reject) => {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    if (!ctx) return reject(new Error("No 2d context"));

    // Пропорции исходного изображения
    const originalWidth = image.width;
    const originalHeight = image.height;

    // Вычисляем размеры для обрезки в пикселях
    const cropWidth = (crop.width / 100) * originalWidth;
    const cropHeight = (crop.height / 100) * originalHeight;
    const cropX = (crop.x / 100) * originalWidth;
    const cropY = (crop.y / 100) * originalHeight;

    // Устанавливаем размеры канваса
    canvas.width = cropWidth;
    canvas.height = cropHeight;

    // Обрезаем изображение
    ctx.drawImage(
      image,
      cropX, cropY, cropWidth, cropHeight, // Исходная область (x, y, width, height)
      0, 0, cropWidth, cropHeight           // Целевая область (x, y, width, height)
    );

    if (darken > 0) {
      ctx.fillStyle = `rgba(0, 0, 0, ${darken / 100})`;
      ctx.fillRect(0, 0, image.naturalWidth, image.naturalHeight);
    }

    canvas.toBlob((blob) => {
      if (!blob) return reject(new Error("Failed to create blob"));

      resolve(blob);
    });
  });
}
