import "./DownloadButton.css";
import type { AudioFile, Directory, FileListing } from "music-server-shared/types";
import { deleteFile, download, signalMap, type SignalMapEntry } from "../offline";
import { createSignal, type Accessor, type ResourceActions } from "solid-js";
import type { AppOptions } from "../types";
import { joinPath } from "../utils";
import { DeleteSVG, DownloadSVG, RefreshSVG } from "./SVG";
import { LoadingSpinner } from "./LoadingScreen";

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

function formatBytes(bytes: number): string {
	if (bytes === 0) return "Queued...";

	const k = 1024;
	const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
	const i = Math.floor(Math.log(bytes) / Math.log(k));
	const value = bytes / k ** i;

	return `${value.toFixed(2)} ${sizes[i]}`;
}

export function DownloadButton(props: DownloadButtonProps) {
	const fullPath = joinPath(props.currentDir(), props.item.name);
	let signal = signalMap.get(fullPath);
	if (!signal) {
		signal = createSignal<SignalMapEntry>();
		signalMap.set(fullPath, signal);
	}
	const [getProgress] = signal;

	return (
		<div
			class="download-item"
			onClick={(event) => {
				event.stopPropagation();
				if (!props.isOffline()) download(props.item, props.currentDir(), props.options(), props.fetchFiles);
				else deleteFile(props.item, props.currentDir(), props.fetchFiles);
			}}
		>
			{(() => {
				const progress = getProgress();
				if (progress === undefined) {
					if (props.isOffline()) {
						//only happens if this is a directory
						return (
							<button title="Purge the cache from all files recursively in this directory">
								<DeleteSVG />
							</button>
						);
					}
					return (
						<button title="Cache this file/directory on your browser for offline use">
							<DownloadSVG />
						</button>
					);
				}
				if (progress === "DirectoryProgress") return <LoadingSpinner center={true} />;
				if (progress === "CachedFile") {
					if (props.isOffline()) {
						return (
							<button title="Purge this file from cache">
								<DeleteSVG />
							</button>
						);
					}
					return (
						<button title="Re-download this file">
							<RefreshSVG />
						</button>
					);
				}

				if ("bytes" in progress) return <span>{formatBytes(progress.bytes)}</span>;
				console.log(progress);
				console.error("Unexpected", progress);
			})()}
		</div>
	);
}