import { createEffect, createSignal, For, onMount, 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 { 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, setDownloadItems] = createStore<Record<string, Progress | undefined>>({});

	createEffect(() => {
		const paths = Object.keys(downloadStatusMap);
		untrack(() => {
			// Update the downloadItems store with the current status of each path
			for (const path of paths) {
				const status = downloadStatusMap[path];
				if (typeof status === "object" && "status" in status) setDownloadItems(path, status);
				else setDownloadItems(path, undefined);
			}
			// Remove any paths that no longer exist in downloadStatusMap
			for (const path of Object.keys(downloadItems)) {
				if (!Object.keys(downloadStatusMap).includes(path)) {
					setDownloadItems(path, undefined);
				}
			}
		});
	});

	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={() => {
							for (const status of Object.values(downloadItems)) {
								if (status && "retry" in status) status.retry();
							}
						}}
					>
						<RefreshSVG />
					</button>
					<button
						title="stop all running downloads"
						onClick={() => {
							for (const status of Object.values(downloadItems)) {
								if (status && typeof status.status === "number") status.abort();
							}
						}}
					>
						<StopSVG />
					</button>
					<button
						title="Clear all failed/aborted downloads"
						onClick={() => {
							for (const [path, status] of Object.entries(downloadItems)) {
								if (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={Object.entries(downloadItems)}>
						{([path, status]) => {
							if (!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>
	);
}