import { createSelector, type Accessor, type Setter } from "solid-js";
import "./Playlist.css";
import type { PlayerState, PlaylistItem } from "../types";
import { formatTime, toast } from "../utils";
import { ClearSVG, DownloadSVG, DragSVG, SaveSVG } from "./SVG";
import { savePlaylist } from "../offline";
import { DraggableList } from "./DraggableList";

interface PlaylistProps {
	currentDir: Accessor<string>;
	playlist: Accessor<PlaylistItem[]>;
	setPlaylist: Setter<PlaylistItem[]>;
	playerState: Accessor<PlayerState>;
	setPlayerState: Setter<PlayerState>;
	playTrack: (item: PlaylistItem) => void;
	audioElement: HTMLAudioElement;
}

export default function Playlist(props: PlaylistProps) {
	function removeFromPlaylist(id: string) {
		const currentTrack = props.playerState().currentTrack;
		const newPlaylist = props.playlist().filter((i) => i.id !== id);
		if (currentTrack && currentTrack.id === id) {
			const idx = props.playlist().findIndex((i) => i.id === id);
			if (newPlaylist.length > 0) {
				props.playTrack(idx < newPlaylist.length ? newPlaylist[idx] : newPlaylist[0]);
			}
		}
		props.setPlaylist(newPlaylist);
	}

	function browserDownload(name: string, path: string) {
		const a = document.createElement("a");
		a.href = `/download/${path}`;
		a.download = name;
		document.body.appendChild(a);
		a.click();
		document.body.removeChild(a);
	}

	async function browserDownloadAll() {
		try {
			toast("Started playlist download", "info");
			const playlist = props.playlist();
			const filePaths = playlist.map((item) => item.path);
			const form = document.createElement("form");
			form.method = "POST";
			form.action = "/download-playlist";
			const input = document.createElement("input");
			input.type = "hidden";
			input.name = "files";
			input.value = btoa(encodeURIComponent(JSON.stringify(filePaths)));
			form.appendChild(input);
			document.body.appendChild(form);
			form.submit();
			document.body.removeChild(form);
		} catch (e) {
			toast("Playlist items download failed", "error", e);
		}
	}

	let dialogElement!: HTMLDialogElement;
	let playlistNameInput!: HTMLInputElement;
	let allowOverwriteCheckbox!: HTMLInputElement;

	async function save() {
		try {
			if (!playlistNameInput.reportValidity()) return;
			await savePlaylist({ name: playlistNameInput.value, items: props.playlist() }, allowOverwriteCheckbox.checked);
			closeDialog();
		} catch (e) {
			if (e instanceof Error && e.name === "ConstraintError") {
				toast("Playlist with this name already exists", "error");
			} else {
				toast("Saving playlist failed", "error", e);
			}
		}
	}

	function closeDialog() {
		dialogElement.close();
		playlistNameInput.value = "";
		allowOverwriteCheckbox.checked = false;
	}

	return (
		<div class="playlist-container">
			<dialog class="save-dialog" ref={dialogElement}>
				<div>
					<input ref={playlistNameInput} required type="text" placeholder="Playlist name" />
					<div class="save-buttons">
						<label for="overwrite-checkbox">allow overwrite</label>
						<input ref={allowOverwriteCheckbox} id="overwrite-checkbox" type="checkbox" />
						<button onClick={save}>Save</button>
						<button onClick={closeDialog}>Cancel</button>
					</div>
				</div>
			</dialog>

			<div class="playlist-header">
				<span>Playlist ({props.playlist().length} tracks)</span>
				<div class="spacer" />
				<button title="Save playlist" onClick={() => dialogElement.showModal()}>
					<SaveSVG />
				</button>
				<button
					title="Download all files in the playlist in their original format as a tar file"
					onClick={browserDownloadAll}
				>
					<DownloadSVG />
				</button>
				<button title="Clear Playlist" onClick={() => props.setPlaylist([])}>
					<ClearSVG />
				</button>
			</div>

			<DraggableList<PlaylistItem> items={props.playlist} setItems={props.setPlaylist}>
				{(item, _, { dragHandlers, isDragging, dropPosition }) => {
					const isActive = createSelector(
						() => props.playerState().currentTrack?.id,
						(itemId, currentId) => currentId === itemId,
					);
					return (
						<div
							classList={{
								"playlist-item": true,
								"draggable-item": true,
								active: isActive(item.id),
								"drop-target-top-border": dropPosition() === "before",
								"drop-target-bottom-border": dropPosition() === "after",
							}}
							style={{ opacity: isDragging() ? 0.5 : 1 }}
							onClick={() => props.playTrack(item)}
						>
							<div class="playlist-drag-btn" {...dragHandlers}>
								<DragSVG />
							</div>
							<span>{item.name}</span>
							<div class="spacer" />
							{formatTime(item.duration)}
							<button
								title={"Download this file in its original format to your file system"}
								onClick={(e) => {
									e.stopPropagation();
									browserDownload(item.name, item.path);
								}}
							>
								<DownloadSVG />
							</button>
							<button
								title={`Remove ${item.name}`}
								onClick={(e) => {
									e.stopPropagation();
									removeFromPlaylist(item.id);
								}}
							>
								<ClearSVG />
							</button>
						</div>
					);
				}}
			</DraggableList>
		</div>
	);
}