import "./PlayerControls.css";
import { type AppOptions, getItemName, type PlayerState } from "../types";
import { type Accessor, createEffect, createSignal, type Setter } from "solid-js";
import { NextTrackSVG, PauseSVG, PlaySVG, PreviousTrackSVG, RepeatSVG, ShuffleSVG, VolumeSVG } from "./SVG";
import { formatTime } from "../utils";
import type { SetStoreFunction } from "solid-js/store";
import { LoadingSpinner } from "./LoadingScreen";

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>;
	options: AppOptions;
	audioElement: HTMLAudioElement;
}

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.audioElement) {
			props.audioElement.volume = volume;
		}
	}

	// Seek to position
	function seekTo(e: MouseEvent) {
		const playerState = props.playerState;
		if (!props.audioElement || !playerState.currentTrack) return;

		const progressBar = e.currentTarget as HTMLDivElement;
		const rect = progressBar.getBoundingClientRect();
		const pos = (e.clientX - rect.left) / rect.width;

		const duration = playerState.currentTrack.metadata.duration;
		props.audioElement.currentTime = Math.min(pos * duration, playerState.buffered - 1);
		props.setPlayerState("currentTime", pos * duration);
	}

	return (
		<div class="player-controls">
			<div class="track-info">
				{getItemName(props.playerState.currentTrack) || "No track selected"}
				{props.playerState.waitingForStart ? (
					<div>
						<LoadingSpinner center={true} />
					</div>
				) : (
					""
				)}
			</div>
			<div class="progress-container">
				<div class="progress-bar" onClick={seekTo} style={controlsDisabled() ? { cursor: "default" } : {}}>
					<div
						class="buffered-fill"
						style={{
							width: `${
								props.playerState.currentTrack
									? Math.min(
											100,
											(props.playerState.buffered /
												(props.playerState.currentTrack?.metadata.duration ?? Number.POSITIVE_INFINITY)) *
												100,
										)
									: 0
							}%`,
						}}
					/>
					<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>
			</div>
			<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>
			</div>
		</div>
	);
}