import "./DownloadButton.css";
import type { Directory, MediaFile } from "music-server-shared/types";
import { type Accessor, createMemo, type ResourceActions } from "solid-js";
import type { FlatFileListing } from "../App";
import { deleteFile, download, getDownloadStatus } from "../offline";
import type { AppOptions } from "../types";
import { formatBytes } from "../utils";
import { LoadingSpinner } from "./LoadingScreen";
import { DeleteSVG, RefreshSVG, SyncSVG } from "./SVG";

interface DownloadButtonProps {
	fullPath: string;
	item: MediaFile | Directory;
	fetchFiles: ResourceActions<FlatFileListing>;
	isOffline: Accessor<boolean>;
	currentDir: Accessor<string>;
	options: AppOptions;
}

export function DownloadButton(props: DownloadButtonProps) {
	return (
		<div
			class="download-item"
			onClick={(event) => {
				event.stopPropagation();
				//ignore clicks while this item is already downloading or a directory walk is still running:
				//the button shows a byte counter/spinner then, and a second click would start a duplicate download
				const progress = getDownloadStatus(props.fullPath);
				if (typeof progress === "object" && ("amount" in progress || typeof progress.status === "number")) return;
				if (!props.isOffline())
					download(props.fullPath, props.item, props.options, props.fetchFiles, "metadata" in props.item);
				else deleteFile(props.fullPath, props.item, props.fetchFiles);
			}}
		>
			{(() => {
				//memo needed so progress amount doesn't cause rerenders
				type ButtonType = "Spinner" | "Delete" | "Sync" | "Refresh" | { status: number };
				const progressMemo = createMemo<ButtonType>(() => {
					const progress = getDownloadStatus(props.fullPath);
					if (typeof progress === "object" && "amount" in progress) return "Spinner";
					if (props.isOffline()) return "Delete";
					if (progress === "Synced") return "Refresh";
					if (progress === undefined || ("status" in progress && typeof progress.status !== "number")) return "Sync";
					if (typeof progress.status === "number") return { status: progress.status };
					throw new Error(`Unexpected: ${progress}`);
				});
				const progress = progressMemo();
				if (progress === "Spinner") return <LoadingSpinner center={true} />;
				if (progress === "Delete") {
					return (
						<button title="Purge this file/these files from local sync storage">
							<DeleteSVG />
						</button>
					);
				}
				if (progress === "Sync") {
					return (
						<button title="Sync missing files this file/directory to your browser for offline use">
							<SyncSVG />
						</button>
					);
				}
				if (progress === "Refresh") {
					return (
						<button title="Re-sync this file">
							<RefreshSVG />
						</button>
					);
				}
				if ("status" in progress) return <span>{formatBytes(progress.status)}</span>;
				console.error("Unexpected", progress);
			})()}
		</div>
	);
}