const video = document.getElementById("video");
const videoParent = document.getElementById("video-parent");
const videoSection = document.getElementById("video-section");
const videoControlsProgress = document.getElementById("video-controls-progress");
const videoControlsPlay = document.getElementById("video-controls-play");
const videoControlsVolume = document.getElementById("video-controls-mutetoggle");
const videoControlsMaximise = document.getElementById("video-controls-maximise");
const videoControlsTimeCurrent = document.getElementById("video-controls-currenttime");
const videoControlsTimeTotal = document.getElementById("video-controls-totaltime");

let videoPlaying = false;
let audioEnabled = true;
let videoMaximised = false;

function toggleVideo() {
	if (videoPlaying) {
		videoPlaying = false;
		videoControlsPlay.innerHTML = `<i class="fa-solid fa-play"></i>`;
		video.pause();
	} else {
		videoPlaying = true;
		videoControlsPlay.innerHTML = `<i class="fa-solid fa-pause"></i>`;
		video.play();
	}
}

function videoUpdate() {
	videoControlsProgress.value = video.currentTime / video.duration;
	videoControlsTimeCurrent.innerHTML = secondsToFormatted(video.currentTime);
	updateSlider();
}

function updateSlider() {
	const value = (videoControlsProgress.value - videoControlsProgress.min) / (videoControlsProgress.max - videoControlsProgress.min) * 100;
	videoControlsProgress.style.background = `linear-gradient(to right, var(--accent1) 0%, var(--accent2) ${value}%, #ddd ${value}%, #ddd 100%)`;
}

function seekVideo() {
	updateSlider();
	const time = videoControlsProgress.value * video.duration;
	video.currentTime = time;
}

function toggleAudio() {
	if (audioEnabled) {
		audioEnabled = false;
		videoControlsVolume.innerHTML = `<i class="fa-solid fa-volume-xmark"></i>`;
		video.muted = true;
	} else {
		audioEnabled = true;
		videoControlsVolume.innerHTML = `<i class="fa-solid fa-volume"></i>`;
		video.muted = false;
	}
}

function toggleMaximisation() {
	if (videoMaximised) {
		videoMaximised = false;
		videoControlsMaximise.innerHTML = `<i class="fa-solid fa-maximize"></i>`;
		videoParent.classList.remove("video-fullscreen");
		videoSection.appendChild(videoParent);
		document.exitFullscreen();
	} else {
		videoMaximised = true;
		videoControlsMaximise.innerHTML = `<i class="fa-solid fa-minimize"></i>`;
		videoParent.classList.add("video-fullscreen");
		document.body.appendChild(videoParent);
		document.documentElement.requestFullscreen();
	}
}

function secondsToFormatted(seconds) {
	seconds = Math.round(seconds);
	let hours = seconds / 3600;
	let hoursMod = seconds % 3600;  // in seconds
	let minutes = hoursMod / 60;
	let secs = hoursMod % 60;
	
	if (hours >= 1) {
		return `${Math.floor(hours)}:${Math.floor(minutes).toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`;
	} else {
		return `${Math.floor(minutes).toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`
	}
}

videoControlsProgress.value = 0;
updateSlider();
video.addEventListener("loadeddata", function () {
	videoControlsTimeTotal.innerHTML = `/${secondsToFormatted(video.duration)}`
});
videoControlsProgress.addEventListener("input", seekVideo);
videoControlsPlay.addEventListener("click", toggleVideo);
videoControlsVolume.addEventListener("click", toggleAudio);
videoControlsMaximise.addEventListener("click", toggleMaximisation);
video.addEventListener("timeupdate", videoUpdate);