import "./PlayerControls.css";
import { type Accessor, createEffect, createSignal, For, onMount, type Setter, Show } from "solid-js";
import type { SetStoreFunction } from "solid-js/store";
import type { AppOptions, PlayerState } from "../types";
import { formatFilename, formatTime, LocalStorageValues } from "../utils";
import { LoadingSpinner } from "./LoadingScreen";
import {
	ClearSVG,
	DownSVG,
	FullscreenSVG,
	InfoSVG,
	NextTrackSVG,
	PauseSVG,
	PlaySVG,
	PreviousTrackSVG,
	RepeatSVG,
	ShuffleSVG,
	UpSVG,
	VolumeSVG,
} from "./SVG";

interface PlayerControlsProps {
	playerState: PlayerState;
	setPlayerState: SetStoreFunction<PlayerState>;
	togglePlay: () => void;
	playPrevious: () => void;
	playNext: () => void;
	isShuffled: Accessor<boolean>;
	setShuffled: Setter<boolean>;
	isRepeated: Accessor<boolean>;
	setRepeated: Setter<boolean>;
	needMSESeek: (seekTo: number) => boolean;
	seekTo: (seekTo: number) => void;
	options: AppOptions;
	videoElement: HTMLVideoElement;
}

export default function PlayerControls(props: PlayerControlsProps) {
	const [controlsDisabled, setControlsDisabled] = createSignal(false);
	createEffect(() => {
		setControlsDisabled(!props.playerState.currentTrack);
	});

	function setVolume(e: Event) {
		const input = e.target as HTMLInputElement;
		const volume = Number.parseFloat(input.value);
		props.setPlayerState("volume", volume);

		if (props.videoElement) {
			props.videoElement.volume = volume;
		}
	}

	function progressClick(e: MouseEvent) {
		const progressBar = e.currentTarget as HTMLDivElement;
		const rect = progressBar.getBoundingClientRect();
		seekTo((e.clientX - rect.left) / rect.width);
	}

	// Seek to position
	function seekTo(posPercent: number) {
		const playerState = props.playerState;
		if (!props.videoElement || !playerState.currentTrack) return;
		const duration = playerState.currentTrack.metadata.duration;
		const seekTime = Math.max(0, posPercent * duration);
		if (props.needMSESeek(seekTime)) {
			props.seekTo(seekTime);
		} else {
			props.setPlayerState("waitingForStart", true);
			props.videoElement.currentTime = seekTime;
		}
	}

	const [isDragging, setIsDragging] = createSignal(false);
	const [dragPos, setDragPos] = createSignal(0);
	createEffect(() => {
		if (isDragging()) return;
		setDragPos(
			props.playerState.currentTrack
				? Math.min(
						100,
						(props.playerState.currentTime /
							(props.playerState.currentTrack?.metadata.duration ?? Number.POSITIVE_INFINITY)) *
							100,
					)
				: 0,
		);
	});
	let progressContainerRef!: HTMLDivElement;
	let handleRef!: HTMLDivElement;

	//pointer instead drag events needed, because for some reason e.clientX is always 0 on firefox during the drag
	function handlePointerDown(e: PointerEvent) {
		if (e.button !== 0) return;
		e.preventDefault();
		handleRef.setPointerCapture(e.pointerId); //needed for mobile drag to work
		setIsDragging(true);
		handlePointerMove(e);
		window.addEventListener("pointermove", handlePointerMove);
		window.addEventListener("pointerup", handlePointerUp);
		window.addEventListener("pointercancel", handlePointerUp); //just for safety
	}

	function handlePointerMove(e: PointerEvent) {
		if (!isDragging() || !props.playerState.currentTrack) return;
		e.preventDefault();
		const rect = progressContainerRef.getBoundingClientRect();
		const pos = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
		setDragPos(pos * 100);
	}

	function handlePointerUp(e: PointerEvent) {
		if (!isDragging() || !props.playerState.currentTrack) return;
		setIsDragging(false);
		if (e.type !== "pointercancel") {
			const rect = progressContainerRef.getBoundingClientRect();
			seekTo(Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width)));
		}
		window.removeEventListener("pointermove", handlePointerMove);
		window.removeEventListener("pointerup", handlePointerUp);
		window.removeEventListener("pointercancel", handlePointerUp);
		handleRef.releasePointerCapture(e.pointerId);
	}

	const [showPlayerControls, setShowPlayerControls] = createSignal(true);
	onMount(() => {
		const savePlayerControls = localStorage.getItem(LocalStorageValues.playerControls);
		if (savePlayerControls !== null) setShowPlayerControls(savePlayerControls === "true");
		createEffect(() => localStorage.setItem(LocalStorageValues.playerControls, showPlayerControls().toString()));
	});

	let metadataDialogRef!: HTMLDialogElement;

	function handleClose() {
		metadataDialogRef.close();
	}

	function MetadataEntry(label: string, value: unknown, suffix?: string) {
		if (!value) return undefined;
		return (
			<div>
				<strong>{label}</strong>: {value.toString()}
				{suffix}
				<br />
			</div>
		);
	}

	function bitrateDisplay(bitrate: number | undefined, divisor: number) {
		if (!bitrate) return undefined;
		return bitrate / divisor;
	}

	return (
		<>
			<dialog ref={metadataDialogRef} onclick={(e) => e.target.nodeName === "DIALOG" && handleClose()}>
				<div>
					<div style={{ display: "flex" }}>
						<div class="title">Metadata</div>
						<div class="spacer" />
						<button title="Close dialog" onClick={handleClose}>
							<ClearSVG />
						</button>
					</div>
					<hr />
					<div class="metadata-list">
						{MetadataEntry("Path", props.playerState.currentTrack?.path)}
						{MetadataEntry("Title", props.playerState.currentTrack?.metadata.title)}
						{MetadataEntry("Track number", props.playerState.currentTrack?.metadata.trackNumber)}
						{MetadataEntry("Album", props.playerState.currentTrack?.metadata.album)}
						{MetadataEntry("Artist", props.playerState.currentTrack?.metadata.artist)}
						{MetadataEntry("Genre", props.playerState.currentTrack?.metadata.genre?.join(", "))}
						{MetadataEntry("Duration", props.playerState.currentTrack?.metadata.duration.toFixed(1), " seconds")}
						{MetadataEntry("Container format", props.playerState.currentTrack?.metadata.container)}
						{MetadataEntry("Audio codec", props.playerState.currentTrack?.metadata.audioCodec)}
						{MetadataEntry(
							"Audio bitrate",
							bitrateDisplay(props.playerState.currentTrack?.metadata.audioBitrate, 1000),
							" kbps",
						)}
						{MetadataEntry("Video codec", props.playerState.currentTrack?.metadata.videoCodec)}
						{MetadataEntry(
							"Video bitrate",
							bitrateDisplay(props.playerState.currentTrack?.metadata.videoBitrate, 1000 * 1000),
							"  mbps",
						)}
					</div>
				</div>
			</dialog>
			<div class="player-controls">
				<div class="track-info-toggle-container">
					<button title="Toggle player controls" onclick={() => setShowPlayerControls(!showPlayerControls())}>
						{showPlayerControls() ? <DownSVG /> : <UpSVG />}
					</button>

					<div class="track-info">
						<Show when={props.playerState.currentTrack}>
							<button title="Show metadata" onClick={() => metadataDialogRef.showModal()}>
								<InfoSVG />
							</button>
						</Show>
						<span classList={{ "short-name": !showPlayerControls() }}>
							{props.playerState.currentTrack
								? formatFilename(props.playerState.currentTrack, props.options.controlsDisplay)
								: "No track selected"}
						</span>
						{props.playerState.waitingForStart ? (
							<div>
								<LoadingSpinner center={true} />
							</div>
						) : (
							""
						)}
					</div>
				</div>
				<div class="progress-container" onClick={progressClick} ref={progressContainerRef}>
					<div
						class="progress-bar"
						style={{
							cursor: controlsDisabled() ? "default" : undefined,
							height: `${props.options.progressBarHeight}px`,
						}}
					>
						<For each={props.playerState.buffered}>
							{(bufferRange) => {
								return (
									<div
										class="buffered-fill"
										style={{
											left: `${(bufferRange.start / (props.playerState.currentTrack?.metadata.duration as number)) * 100}%`,
											right: `${100 - (bufferRange.end / (props.playerState.currentTrack?.metadata.duration as number)) * 100}%`,
										}}
									/>
								);
							}}
						</For>
						<div
							class="progress-fill"
							style={{
								width: `${
									props.playerState.currentTrack
										? Math.min(
												100,
												(props.playerState.currentTime /
													(props.playerState.currentTrack?.metadata.duration ?? Number.POSITIVE_INFINITY)) *
													100,
											)
										: 0
								}%`,
							}}
						/>
						<div
							class="progress-handle"
							style={{
								left: `${dragPos()}%`,
								height: `${props.options.progressBarHeight * 2}px`,
								width: `${props.options.progressBarHeight * 2}px`,
							}}
							onPointerDown={handlePointerDown}
							ref={handleRef}
						/>
					</div>
				</div>
				<Show when={showPlayerControls()}>
					<div class="time-container">
						<span>{formatTime(props.playerState.currentTime)}</span>/
						<span>{formatTime(props.playerState.currentTrack?.metadata.duration || 0)}</span>
					</div>

					<div class="control-buttons">
						<button title="Previous track" disabled={controlsDisabled()} onClick={props.playPrevious}>
							<PreviousTrackSVG disabled={controlsDisabled} />
						</button>
						<button title="Toggle play/pause" disabled={controlsDisabled()} onClick={props.togglePlay}>
							{props.playerState.isPlaying ? (
								<PauseSVG disabled={controlsDisabled} />
							) : (
								<PlaySVG disabled={controlsDisabled} />
							)}
						</button>
						<button title="Next track" disabled={controlsDisabled()} onClick={props.playNext}>
							<NextTrackSVG disabled={controlsDisabled} />
						</button>

						<button title="Repeat Playlist" onClick={() => props.setRepeated(!props.isRepeated())}>
							<RepeatSVG disabled={() => !props.isRepeated()} />
						</button>

						<button title="Shuffle" onClick={() => props.setShuffled(!props.isShuffled())}>
							<ShuffleSVG disabled={() => !props.isShuffled()} />
						</button>

						<div class="volume-control" style={props.options.hideVolume ? { display: "none" } : {}}>
							<VolumeSVG />
							<input type="range" min="0" max="1" step="0.01" value={props.playerState.volume} onInput={setVolume} />
						</div>
						<div>
							<select
								value={props.playerState.rate}
								onchange={(e) => props.setPlayerState("rate", Number.parseFloat(e.target.value))}
							>
								<option value={0.25}>0.25x</option>
								<option value={0.5}>0.5x</option>
								<option value={0.75}>0.75x</option>
								<option value={1}>1x</option>
								<option value={1.25}>1.25x</option>
								<option value={1.5}>1.5x</option>
								<option value={1.75}>1.75x</option>
								<option value={2}>2x</option>
								<option value={2.5}>2.5x</option>
								<option value={3}>3x</option>
							</select>
						</div>
						<button
							title="Toggle Fullscreen"
							onClick={() => {
								props.videoElement.controls = true;
								props.videoElement.requestFullscreen();
							}}
						>
							<FullscreenSVG />
						</button>
					</div>
				</Show>
			</div>
		</>
	);
}