import { CheckCircleIcon, DownloadIcon } from "@lume/icons";
import { getImageMeta } from "@lume/utils";
import { downloadDir } from "@tauri-apps/api/path";
import { Window } from "@tauri-apps/api/window";
import { download } from "@tauri-apps/plugin-upload";
import { SyntheticEvent, useState } from "react";

export function ImagePreview({ url }: { url: string }) {
	const [downloaded, setDownloaded] = useState(false);

	const downloadImage = async (e: { stopPropagation: () => void }) => {
		try {
			e.stopPropagation();

			const downloadDirPath = await downloadDir();
			const filename = url.substring(url.lastIndexOf("/") + 1);
			await download(url, downloadDirPath + `/${filename}`);

			setDownloaded(true);
		} catch (e) {
			console.error(e);
		}
	};

	const open = async () => {
		const name = new URL(url).pathname.split("/").pop();
		const image = await getImageMeta(url);
		return new Window("image-viewer", {
			url,
			title: name,
			width: image.width,
			height: image.height,
		});
	};

	const fallback = (event: SyntheticEvent<HTMLImageElement, Event>) => {
		event.currentTarget.src = "/fallback-image.jpg";
	};

	return (
		// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
		<div onClick={open} className="relative my-1 group">
			<img
				src={url}
				alt={url}
				loading="lazy"
				decoding="async"
				style={{ contentVisibility: "auto" }}
				onError={fallback}
				className="object-cover w-full h-auto border rounded-lg border-neutral-200/50 dark:border-neutral-800/50"
			/>
			<button
				type="button"
				onClick={(e) => downloadImage(e)}
				className="absolute z-10 items-center justify-center hidden w-10 h-10 bg-blue-500 rounded-lg right-2 top-2 group-hover:inline-flex hover:bg-blue-600"
			>
				{downloaded ? (
					<CheckCircleIcon className="w-5 h-5 text-white" />
				) : (
					<DownloadIcon className="w-5 h-5 text-white" />
				)}
			</button>
		</div>
	);
}
