import {
	batch,
	createEffect,
	createMemo,
	createSignal,
	For,
	Show,
	untrack,
	type Accessor,
	type Setter,
} from "solid-js";
import "./DownloadManager.css";
import "./Dialog.css";
import "toastify-js/src/toastify.css";
import { formatBytes } from "../utils";
import { ClearSVG, RefreshSVG, StopSVG } from "./SVG";
import { type DownloadStatus, downloadStatusMap, setDownloadStatusMap, type Progress } from "../offline";
import { createStore } from "solid-js/store";

interface DownloadManagerProps {
	showDownloadManager: Accessor<boolean>;
	setShowDownloadManager: Setter<boolean>;
}

export default function DownloadManager(props: DownloadManagerProps) {
	let dialogElement!: HTMLDialogElement;

	createEffect(() => {
		if (props.showDownloadManager()) {
			dialogElement.showModal();
		}
	});

	function handleClose() {
		dialogElement.close();
		props.setShowDownloadManager(false);
	}

	const downloadItems = createMemo(() => {
		return Object.entries(downloadStatusMap).filter(([_path, status]) => isProgress(status));
	});

	function isProgress(status: DownloadStatus | undefined): status is Progress {
		return status !== undefined && typeof status === "object" && "status" in status;
	}

	return (
		<dialog
			style={{ height: "90%" }}
			ref={dialogElement}
			onClose={handleClose}
			onclick={(e) => e.target.nodeName === "DIALOG" && handleClose()}
		>
			<div style={{ height: "100%" }}>
				<div class="downloadmanager-header title">
					Download
					<div class="spacer" />
					<button
						title="Retry all failed/aborted downloads"
						onClick={() => {
							batch(() => {
								for (const [, status] of downloadItems()) {
									if (isProgress(status) && "retry" in status) status.retry();
								}
							});
						}}
					>
						<RefreshSVG />
					</button>
					<button
						title="stop all running downloads"
						onClick={async () => {
							batch(async () => {
								for (const [, status] of downloadItems()) {
									if (isProgress(status) && typeof status.status === "number") {
										status.abort();
									}
								}
							});
						}}
					>
						<StopSVG />
					</button>
					<button
						title="Clear all failed/aborted downloads"
						onClick={() => {
							batch(() => {
								for (const [path, status] of downloadItems()) {
									if (isProgress(status) && (status.status === "Aborted" || status.status === "Failed"))
										setDownloadStatusMap(path, undefined);
								}
							});
						}}
					>
						Clear
					</button>
					<button title="Close dialog" onClick={handleClose}>
						<ClearSVG />
					</button>
				</div>
				<hr />
				<div class="downloadmanager-content">
					<For each={downloadItems()}>
						{([path, status]) => {
							if (!isProgress(status)) return;
							const [showReason, setShowReason] = createSignal(false);
							return (
								<div
									classList={{
										"downloadmanager-item": true,
										"downloadmanager-item-failed": status.status === "Failed",
										"downloadmanager-item-aborted": status.status === "Aborted",
									}}
								>
									<span>{path}</span>
									<hr />
									<div class="downloadmanager-buttons">
										{status && typeof status.status === "number" ? (
											<>
												<span>{formatBytes(status.status)}</span>
												<button title="Stop Download" onClick={() => status.abort()}>
													<StopSVG />
												</button>
											</>
										) : (
											<>
												{(status.status === "Failed" && (
													<button title="Show reason" onclick={() => setShowReason(!showReason())}>
														Reason
													</button>
												)) ||
													"Aborted"}
												<button title="Retry download" onClick={() => status.retry()}>
													<RefreshSVG />
												</button>
												<button title="Clear Download" onClick={() => setDownloadStatusMap(path, undefined)}>
													<ClearSVG />
												</button>
											</>
										)}
									</div>
									<Show when={showReason()}>{"reason" in status && status.reason}</Show>
								</div>
							);
						}}
					</For>
				</div>
			</div>
		</dialog>
	);
}