import { PixelCrop } 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 getCroppedImageBlob(image: HTMLImageElement, crop: PixelCrop) {
    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 scale = 1;
        const scaleX = image.naturalWidth / image.width;
        const scaleY = image.naturalHeight / image.height;
        const pixelRatio = window.devicePixelRatio;

        canvas.width = Math.floor(crop.width * scaleX * pixelRatio);
        canvas.height = Math.floor(crop.height * scaleY * pixelRatio);

        ctx.scale(pixelRatio, pixelRatio);
        ctx.imageSmoothingQuality = "high";

        const cropX = crop.x * scaleX;
        const cropY = crop.y * scaleY;

        const centerX = image.naturalWidth / 2;
        const centerY = image.naturalHeight / 2;

        ctx.translate(-cropX, -cropY);
        ctx.translate(centerX, centerY);
        ctx.scale(scale, scale);
        ctx.translate(-centerX, -centerY);
        ctx.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight, 0, 0, image.naturalWidth, image.naturalHeight);

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

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

export function getDarkenedAndResizedImageBlob(image: HTMLImageElement, scale: number, 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 width = Math.floor(image.naturalWidth * scale);
        const height = Math.floor(image.naturalHeight * scale);

        canvas.width = width;
        canvas.height = height;

        ctx.drawImage(image, 0, 0, width, height);

        if (darken > 0) {
            ctx.fillStyle = `rgba(0, 0, 0, ${darken})`;
            ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        }

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

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