import "./FileBrowser.css";
import {
	type Accessor,
	createEffect,
	createResource,
	createSignal,
	For,
	onMount,
	type Setter,
	Show,
	Suspense,
} from "solid-js";
import { type MediaFile, type FileListing, fileSort } from "music-server-shared/types";
import type { AppOptions, PlaylistItem } from "../types";
import { generateUUID, joinPath, LocalStorageValues, toast } from "../utils";
import { ClosedFolderSVG, MusicSVG, RefreshSVG } from "./SVG";
import { clearCoverCache as deleteCover, clearDirectoryCache, getCover, listFiles } from "../offline";
import { DownloadButton } from "./DownloadButton";
import { LoadingScreen } from "./LoadingScreen";

interface FileBrowserProps {
	breadcrumbs: Accessor<string[]>;
	currentDir: Accessor<string>;
	setCurrentDir: Setter<string>;
	playTrack: (track: PlaylistItem) => void;
	playlist: Accessor<PlaylistItem[]>;
	setPlaylist: Setter<PlaylistItem[]>;
	showFileBrowser: Accessor<boolean>;
	setShowFileBrowser: Setter<boolean>;
	options: Accessor<AppOptions>;
	isOffline: Accessor<boolean>;
	setOffline: Setter<boolean>;
}

export default function FileBrowser(props: FileBrowserProps) {
	const [loadingActions, setLoadingActions] = createSignal(0);
	const [files, fetchFiles] = createResource(
		//TODO: try using store
		() => ({ dir: props.currentDir(), offline: props.isOffline() }),
		async (args) => {
			//new map to force rerender
			return new Map(await listFiles(args.dir, args.offline, false));
		},
		{ initialValue: new Map() },
	);
	const [cover, fetchCover] = createResource<string | undefined, { dir: string; offline: boolean }>(
		() => ({ dir: props.currentDir(), offline: props.isOffline() }),
		async (args, info) => {
			if (info.value) URL.revokeObjectURL(info.value as string);
			return await getCover(args.dir, args.offline);
		},
		{ initialValue: undefined },
	);

	function handleBreadcrumbClick(index: number) {
		if (index === 0) {
			props.setCurrentDir("");
		} else {
			props.setCurrentDir(joinPath(...props.breadcrumbs().slice(1, index + 1)));
		}
	}

	function fileToPlaylistItem(path: string, item: MediaFile): PlaylistItem {
		return {
			id: generateUUID(),
			metadata: item.metadata,
			path: path,
		};
	}

	// Recursively convert file listing to PlaylistItem array
	function listingToPlaylistItems(basePath: string, files: FileListing): PlaylistItem[] {
		let result: PlaylistItem[] = [];
		for (const [fileName, file] of files) {
			const fullPath = joinPath(basePath, fileName);
			if ("metadata" in file) {
				// It's an audio file
				result.push(fileToPlaylistItem(fullPath, file));
			} else if (file.files && file.files.size > 0) {
				// It's a directory with files, recursively add its contents
				result = [...result, ...listingToPlaylistItems(fullPath, file.files)];
			}
		}
		return result.sort((a, b) => a.path.localeCompare(b.path, undefined, { numeric: true }));
	}

	function playFile(path: string, item: MediaFile) {
		props.playTrack(fileToPlaylistItem(path, item));
	}

	function addToPlaylist(path: string, file: MediaFile) {
		const newItem: PlaylistItem = {
			id: generateUUID(),
			metadata: file.metadata,
			path: path,
		};

		props.setPlaylist([...props.playlist(), newItem]);
		if (props.playlist().length === 1) {
			props.playTrack(newItem);
		}
	}

	async function playFiles(recursive: boolean, queue: boolean, dir?: string) {
		if (recursive) {
			setLoadingActions(loadingActions() + 1);
		}
		try {
			const selectedDir = dir || props.currentDir();
			const files = await listFiles(selectedDir, props.isOffline(), recursive);
			const newPlaylist = listingToPlaylistItems(selectedDir, files);
			const oldPlaylist = props.playlist();
			if (queue) {
				props.setPlaylist([...oldPlaylist, ...newPlaylist]);
				if (oldPlaylist.length === 0 && newPlaylist.length !== 0) props.playTrack(newPlaylist[0]);
			} else {
				props.setPlaylist(newPlaylist);
				if (newPlaylist.length !== 0) props.playTrack(newPlaylist[0]);
			}
		} finally {
			if (recursive) {
				setLoadingActions(loadingActions() - 1);
			}
		}
	}

	function reloadDirectory() {
		clearDirectoryCache(props.currentDir());
		//TODO: only clears the current dir, not recursively like clearDirectoryCache
		deleteCover(props.currentDir());
		fetchFiles.refetch();
		fetchCover.refetch();
	}

	onMount(() => {
		try {
			const savedOffline = localStorage.getItem(LocalStorageValues.offline);
			props.setOffline(savedOffline === "true");
		} catch (e) {
			toast("loading values from localStorage failed", "error", e);
			localStorage.clear();
		}

		createEffect(() => {
			createEffect(() => localStorage.setItem(LocalStorageValues.offline, props.isOffline().toString()));
		});
	});

	return (
		<>
			<div classList={{ "file-browser": true, hidden: !props.showFileBrowser() }}>
				<div class="breadcrumb">
					<For each={props.breadcrumbs()}>
						{(crumb, index) => (
							<>
								<span onClick={() => handleBreadcrumbClick(index())}>{decodeURIComponent(crumb)}</span>
								{index() < props.breadcrumbs().length - 1 && "/"}
							</>
						)}
					</For>
				</div>

				<div class="browser-actions">
					<div>
						<button
							title="Replace playlist with all files in current directory"
							onClick={() => playFiles(false, false)}
						>
							Play Directory
						</button>
						<button
							title="Replace playlist with all files in current directory and all subdirectories"
							onClick={() => playFiles(true, false)}
						>
							Play All
						</button>
						<button title="Add all files in current directory to playlist" onClick={() => playFiles(false, true)}>
							Queue Directory
						</button>
						<button
							title="Add all files in current directory and all subdirectories to playlist"
							onClick={() => playFiles(true, true)}
						>
							Queue All
						</button>
					</div>
					<div class="spacer" />
					<Show when={!props.isOffline()}>
						<button class="refresh-button" title="Refresh current directory, bypassing cache" onClick={reloadDirectory}>
							<RefreshSVG />
						</button>
					</Show>
					<button
						title="Switch between online and offline mode. In offline mode only locally cached files are listed"
						class="offline-button"
						style={{ background: props.isOffline() ? "lightgreen" : "indianred" }}
						textContent={props.isOffline() ? "Go online" : "Go offline"}
						onclick={() => props.setOffline(!props.isOffline())}
					/>
				</div>

				<div class="file-list-wrapper">
					<Show when={files.loading}>
						<LoadingScreen />
					</Show>

					<div class="file-list">
						<For each={Array.from(files.latest.entries()).sort(fileSort)}>
							{([fileName, item]) => {
								const isDirectory = !("metadata" in item);
								const fullPath = joinPath(props.currentDir(), fileName);
								return (
									<>
										<div
											class={(isDirectory && "directory-item") || "file-item"}
											onClick={() =>
												(isDirectory && props.setCurrentDir(fullPath)) || playFile(fullPath, item as MediaFile)
											}
										>
											{(isDirectory && <ClosedFolderSVG forButton={false} />) || <MusicSVG />}
											<span>{fileName}</span>
											<div class="spacer" />
											<DownloadButton
												fileName={fileName}
												item={item}
												fetchFiles={fetchFiles}
												isOffline={props.isOffline}
												currentDir={props.currentDir}
												options={props.options}
											/>
											<button
												title="Add to Playlist"
												onClick={(event) => {
													event.stopPropagation();
													if (isDirectory) {
														playFiles(true, true, fullPath);
													} else {
														addToPlaylist(fullPath, item as MediaFile);
													}
												}}
											>
												Add
											</button>
										</div>
									</>
								);
							}}
						</For>
					</div>
				</div>
				<Show when={cover.loading || cover()}>
					<div class="cover">
						<Suspense fallback={<LoadingScreen />}>
							<img src={cover()} alt="" />
						</Suspense>
					</div>
				</Show>
				<Show when={loadingActions() > 0}>
					<LoadingScreen text="Loading files from subdirectories, this might take a while.." />
				</Show>
			</div>
			<div
				class="file-browser-overlay"
				style={{ display: props.showFileBrowser() ? "block" : "none" }}
				onClick={() => props.setShowFileBrowser(false)}
			/>
		</>
	);
}