import { getContext, setContext } from "svelte";

const AUDIO_CTX_KEY = "amqtrain:player:audio-ctx";

export class AudioContext {
	currentTime = $state(0);
	duration = $state(0);
	paused = $state(true);

	private audioEl: HTMLAudioElement | null = null;

	setElement(el: HTMLAudioElement) {
		this.audioEl = el;
	}

	// Bindings will handle state updates, but we need methods to control play/pause
	// from other components.
	// Since we bind to `this.paused`, toggling it here will trigger the audio element.

	play() {
		this.paused = false;
	}

	pause() {
		this.paused = true;
	}

	toggle() {
		this.paused = !this.paused;
	}

	seek(time: number) {
		// Seeking is done by updating currentTime, which is bound to the audio element.
		this.currentTime = Math.max(0, Math.min(time, this.duration));
	}
}

export function setAudioContext() {
	const ctx = new AudioContext();
	setContext(AUDIO_CTX_KEY, ctx);
	return ctx;
}

export function getAudioContext() {
	return getContext<AudioContext>(AUDIO_CTX_KEY);
}