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

interface PlayerControlsProps {
	playerState: Accessor<PlayerState>;
	setPlayerState: Setter<PlayerState>;
	togglePlay: () => void;
	playPrevious: () => void;
	playNext: () => void;
	isShuffled: Accessor<boolean>;
	setShuffled: Setter<boolean>;
	isRepeated: Accessor<boolean>;
	setRepeated: Setter<boolean>;
	audioElement: HTMLAudioElement;
}

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

	// Set volume
	function setVolume(e: Event) {
		const input = e.target as HTMLInputElement;
		const volume = Number.parseFloat(input.value);

		props.setPlayerState({
			...props.playerState(),
			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.duration;
		props.audioElement.currentTime = Math.min(pos * duration, playerState.buffered - 1);
		props.setPlayerState({
			...playerState,
			currentTime: pos * duration,
		});
	}

	return (
		<div class="player-controls">
			<div class="track-info">{props.playerState().currentTrack?.name || "No track selected"}</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?.duration ?? Number.POSITIVE_INFINITY)) *
												100,
										)
									: 0
							}%`,
						}}
					/>
					<div
						class="progress-fill"
						style={{
							width: `${
								props.playerState().currentTrack
									? Math.min(
											100,
											(props.playerState().currentTime /
												(props.playerState().currentTrack?.duration ?? Number.POSITIVE_INFINITY)) *
												100,
										)
									: 0
							}%`,
						}}
					/>
				</div>
			</div>
			<div class="time-container">
				<span>{formatTime(props.playerState().currentTime)}</span>/
				<span>{formatTime(props.playerState().currentTrack?.duration || 0)}</span>
			</div>

			<div class="control-buttons">
				<button disabled={controlsDisabled()} onClick={props.playPrevious}>
					<PreviousTrackSVG disabled={controlsDisabled} />
				</button>
				<button disabled={controlsDisabled()} onClick={props.togglePlay}>
					{props.playerState().isPlaying ? (
						<PauseSVG disabled={controlsDisabled} />
					) : (
						<PlaySVG disabled={controlsDisabled} />
					)}
				</button>
				<button 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">
					<VolumeSVG />
					<input type="range" min="0" max="1" step="0.01" value={props.playerState().volume} onInput={setVolume} />
				</div>
			</div>
		</div>
	);
}