import { createEffect, createResource, createSignal, For, Show, Signal, type Accessor, type Setter } from "solid-js";
import "./PlaylistManager.css";
import "./Dialog.css";
import "toastify-js/src/toastify.css";
import type { AppOptions, Playlist, PlaylistItem } from "../types";
import { formatFilename, formatTime, generateUUID, toast } from "../utils";
import { ClearSVG, DeleteSVG, DownloadSVG, UploadSVG } from "./SVG";
import { deletePlaylist, loadPlaylists, savePlaylist } from "../offline";
import { LoadingScreen } from "./LoadingScreen";

interface PlaylistManagerProps {
	showPlaylistManager: Accessor<boolean>;
	setShowPlaylistManager: Setter<boolean>;
	playlist: Accessor<PlaylistItem[]>;
	setPlaylist: Setter<PlaylistItem[]>;
	playTrack: (track: PlaylistItem) => void;
	options: AppOptions;
}

export default function PlaylistManager(props: PlaylistManagerProps) {
	const [playlists, fetchPlaylists] = createResource<Playlist[]>(
		async () => {
			return await loadPlaylists();
		},
		{ initialValue: [] },
	);
	const [loadingActions, setLoadingActions] = createSignal(0);
	let dialogElement!: HTMLDialogElement;

	createEffect(() => {
		if (props.showPlaylistManager()) {
			dialogElement.showModal();
			fetchPlaylists.refetch();
		}
	});

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

	function getTotalDuration(playlist: Playlist) {
		if (playlist.items.length === 0) return 0;
		//for some reason "duration" is a string at runtime...
		return playlist.items
			.map((item) => Number.parseFloat(item.metadata.duration as unknown as string))
			.reduce((a, b) => a + b);
	}

	function exportPlaylists() {
		toast("Exporting playlists...", "info");
		const blob = new Blob([JSON.stringify(playlists())], { type: "application/json" });

		const link = document.createElement("a");
		link.href = URL.createObjectURL(blob);
		link.download = "pico-playlists.json";
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);
		URL.revokeObjectURL(link.href);
	}

	function importPlaylists() {
		const input = document.createElement("input");
		input.type = "file";

		input.onchange = async (event) => {
			const target = event.target as HTMLInputElement;
			const file = target.files?.[0];
			if (file) {
				try {
					toast("Importing playlists...", "info");
					setLoadingActions((prev) => prev + 1);
					const decoder = new TextDecoder();
					const imports = JSON.parse(decoder.decode(await file.bytes())) as Playlist[];
					for (const imported of imports) {
						await savePlaylist(imported, true);
					}
					setLoadingActions((prev) => prev - 1);
					fetchPlaylists.refetch();
				} catch (e) {
					toast("Importing playlists failed", "error", e);
				}
			}
		};
		input.click();
	}

	function generateIds(items: Omit<PlaylistItem, "id">[]): PlaylistItem[] {
		return items.map((item) => ({ ...item, id: generateUUID() }));
	}

	return (
		<dialog ref={dialogElement} onClose={handleClose} onclick={(e) => e.target.nodeName === "DIALOG" && handleClose()}>
			<div>
				<div class="playlistmanager-header title">
					Playlists
					<div class="spacer" />
					<button title="Export playlists" onClick={exportPlaylists}>
						<DownloadSVG />
					</button>
					<button title="Import playlists" onClick={importPlaylists}>
						<UploadSVG />
					</button>
					<button title="Close dialog" onClick={handleClose}>
						<ClearSVG />
					</button>
				</div>
				<hr />
				<div class="playlistmanager-content">
					<Show when={playlists.loading || loadingActions() > 0}>
						<LoadingScreen />
					</Show>
					<Show when={!playlists.loading}>
						<For each={playlists()}>
							{(item) => {
								const [showSongs, setShowSongs] = createSignal(false);
								return (
									<div class="playlistmanager-item">
										<span>{item.name}</span>
										<hr />
										<div class="playlistmanager-buttons">
											<span>
												{item.items.length} Items ({formatTime(getTotalDuration(item))})
											</span>
											<button
												title="Show playlist items"
												onClick={() => {
													setShowSongs(!showSongs());
												}}
											>
												Show
											</button>
											<button
												title="Replace current playlist with this one"
												onClick={() => {
													const playlist = generateIds(item.items);
													props.setPlaylist(playlist);
													if (item.items.length > 0) props.playTrack(playlist[0]);
													handleClose();
												}}
											>
												Play
											</button>
											<button
												title="Add items from this playlist to current one"
												onClick={() => props.setPlaylist(props.playlist().concat(generateIds(item.items)))}
											>
												Queue
											</button>
											<button
												title="Delete playlist"
												onClick={async () => {
													setLoadingActions((prev) => prev + 1);
													try {
														await deletePlaylist(item.name);
														fetchPlaylists.refetch();
													} finally {
														setLoadingActions((prev) => prev - 1);
													}
												}}
											>
												<DeleteSVG />
											</button>
										</div>
										<Show when={showSongs()}>
											<For each={item.items}>
												{(item) => {
													return (
														<>
															{formatFilename(item, props.options.playlistDisplay)}
															<br />
														</>
													);
												}}
											</For>
										</Show>
									</div>
								);
							}}
						</For>
					</Show>
				</div>
			</div>
		</dialog>
	);
}