import { RotateLeftIcon, RotateRightIcon } from "@navikt/aksel-icons";

import type { ActionPlugin } from "../types.js";

function rotateBlob(imageUrl: string, direction: "cw" | "ccw"): Promise<Blob> {
	return new Promise((resolve, reject) => {
		let img = new Image();
		img.onload = () => {
			let canvas = document.createElement("canvas");
			canvas.width = img.naturalHeight;
			canvas.height = img.naturalWidth;
			let ctx = canvas.getContext("2d")!;
			if (direction === "cw") {
				ctx.translate(canvas.width, 0);
				ctx.rotate(Math.PI / 2);
			} else {
				ctx.translate(0, canvas.height);
				ctx.rotate(-Math.PI / 2);
			}
			ctx.drawImage(img, 0, 0);
			canvas.toBlob((b) => (b ? resolve(b) : reject(new Error("toBlob failed"))), "image/jpeg", 0.92);
		};
		img.onerror = () => reject(new Error("Failed to load image"));
		img.src = imageUrl;
	});
}

export const rotateCcwPlugin: ActionPlugin = {
	type: "action",
	id: "rotate-ccw",
	label: "Rotate left",
	Icon: RotateLeftIcon,
	execute: (url) => rotateBlob(url, "ccw"),
};

export const rotateCwPlugin: ActionPlugin = {
	type: "action",
	id: "rotate-cw",
	label: "Rotate right",
	Icon: RotateRightIcon,
	execute: (url) => rotateBlob(url, "cw"),
};