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

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);

	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";
		link.click();
		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 imports = JSON.parse(await file.text()) 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: crypto.randomUUID() }));
	}

	return (
		<Modal
			show={props.showPlaylistManager}
			setShow={props.setShowPlaylistManager}
			onOpen={() => fetchPlaylists.refetch()}
		>
			{(close) => (
				<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={close}>
							<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]);
														close();
													}}
												>
													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>
			)}
		</Modal>
	);
}