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

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

export function DownloadButton(props: DownloadButtonProps) {
	const fullPath = joinPath(props.currentDir(), props.fileName);

	const containsProgressChildren = createMemo(() => {
		const status = getDownloadStatusWithChildren(fullPath);
		if (!status.children) return false;

		function inProgress(signal: Signal<DownloadStatus>) {
			const status = signal[0]();
			return status === "UnspecificProgress" || (typeof status === "object" && "bytes" in status);
		}

		function recurse(statusWithChildren: StatusWithChildren) {
			for (const [, child] of statusWithChildren.children || []) {
				if (inProgress(child.status) || recurse(child)) return true;
			}
			return false;
		}
		return recurse(status);
	});

	return (
		<div
			class="download-item"
			onClick={(event) => {
				event.stopPropagation();
				if (!props.isOffline())
					download(props.fileName, props.item, props.currentDir(), props.currentDir, props.options, props.fetchFiles);
				else deleteFile(props.fileName, props.item, props.currentDir(), props.fetchFiles);
			}}
		>
			{(() => {
				const [getStatus] = getDownloadStatus(fullPath);
				const progress = getStatus();
				if (progress === "UnspecificProgress" || containsProgressChildren()) return <LoadingSpinner center={true} />;
				if (props.isOffline()) {
					return (
						<button title="Purge this file/these files from local sync storage">
							<DeleteSVG />
						</button>
					);
				}
				if (progress === undefined) {
					return (
						<button title="Sync this file/directory to your browser for offline use">
							<SyncSVG />
						</button>
					);
				}
				if (progress === "Synced") {
					return (
						<button title="Re-sync this file">
							<RefreshSVG />
						</button>
					);
				}
				if ("bytes" in progress) return <span>{progress.bytes === 0 ? "Queued..." : formatBytes(progress.bytes)}</span>;
				console.error("Unexpected", progress);
			})()}
		</div>
	);
}