'use strict';

const audioPlayer  = new Audio();
let   selectedItem = 0;
let   playingItem  = 0;
let   playerState  = 'idle';
let   continuous   = true;
let   repeat       = false;
let   total        = 0;
let   onlyDirs     = true;

const handleKeyEvent = (event) => {
	if (event.ctrlKey === true || event.altKey === true || event.metaKey == true) return;
	event.preventDefault();
	event.stopPropagation();

	switch (event.key) {
		case ' ':
		case 'p':
			if (onlyDirs !== false) return;
			if (playerState == 'idle' && total !== 0) {
				if (document.getElementById(playingItem).classList.contains('dir')) {
					return nextTrack();
				}

				playSong(playingItem)
			} else {
				togglePlayback();
			}
			break;

		case 'r':
			toggleRepeat();
			break;

		case 'c':
			toggleContinue();
			break;

		case 'ArrowUp':
			selectPreviousItem();
			break;

		case 'ArrowDown':
			selectNextItem();
			break;

		case 'ArrowLeft':
			if (audioPlayer.currentTime < 10) {
				audioPlayer.currentTime = 0;
			} else {
				audioPlayer.currentTime = audioPlayer.currentTime-10;
			}
			break;

		case 'ArrowRight':
			audioPlayer.currentTime = audioPlayer.currentTime+10;
			break;

		case 'Enter':
			document.getElementById(selectedItem).click()
			break;

		case 'Escape':
			document.getElementById('back').click();
			break;

		case '0':
		case '1':
		case '2':
		case '3':
		case '4':
		case '5':
		case '6':
		case '7':
		case '8':
		case '9':
			audioPlayer.currentTime = audioPlayer.duration / 100 * (event.key * 10);
			break;
	}
};

const initState = () => {
	const dirElements  = document.querySelectorAll('.dir');
	const fileElements = document.querySelectorAll('.file');
	let   id           = 0;

	document.getElementById('state').addEventListener('click', togglePlayback)
	document.getElementById('repeatButton').addEventListener('click', toggleRepeat)
	document.getElementById('continuousButton').addEventListener('click', toggleContinue)

	audioPlayer.addEventListener('canplay', () => {
		audioPlayer.play();
	});

	audioPlayer.addEventListener('play', () => {
		setPlayerState('playing');
	});

	audioPlayer.addEventListener('pause', () => {
		setPlayerState('paused');
	});

	audioPlayer.addEventListener('error', () => {
		setPlayerState('error loading track');
	});

	audioPlayer.addEventListener('ended', () => {
		setPlayerState('idle');
		nextTrack();
	});

	audioPlayer.addEventListener('timeupdate', () => {
		updatePlayerState();
	});

	dirElements.forEach((element) => {
		element.id = id++;
	});

	fileElements.forEach((element) => {
		element.id = id++;
		onlyDirs   = false;

		element.addEventListener('click', (event) => {
			event.preventDefault();
			event.stopPropagation();
			playSong(event.target.id);
		});
	});

	total = id;
	updatePlayerState();
	updateButtonState();
}

const setPlayerState = (state) => {
	playerState = state;

	console.log('now in state: ' + state);
	updatePlayerState();
}

const updatePlayerState = () => {
	let statestr = '[' + playerState;

	if (!audioPlayer.paused) {
		statestr += ' ' + formatTime(audioPlayer.currentTime) + '/' + formatTime(audioPlayer.duration) + '  ' + Math.round(audioPlayer.currentTime / audioPlayer.duration * 100) + '%';
	}

	statestr += ']';
	document.getElementById('state').innerHTML = statestr;
}

const updateButtonState = () => {
	if (repeat !== false) {
		document.getElementById('repeatButton').classList.add('active');
	} else {
		document.getElementById('repeatButton').classList.remove('active');
	}

	if (continuous !== false) {
		document.getElementById('continuousButton').classList.add('active');
	} else {
		document.getElementById('continuousButton').classList.remove('active');
	}
}

const playSong = (id) => {
	const element = document.getElementById(id);

	if (element === null) return;
	if (element.classList.contains('dir')) return;

	if (document.getElementsByClassName('playing').length > 0) {
		document.getElementsByClassName('playing')[0].classList.remove('playing');
	}

	if (document.getElementsByClassName('selected').length > 0) {
		document.getElementsByClassName('selected')[0].classList.remove('selected');
	}

	audioPlayer.pause()

	playingItem = element.id;
	element.classList.add('playing');

	audioPlayer.src = element.href;

	setPlayerState('loading');
	audioPlayer.load();
}

const togglePlayback = () => {
	if (audioPlayer.paused) {
		audioPlayer.play();
	} else {
		audioPlayer.pause();
	}
}

const toggleRepeat = () => {
	repeat = !repeat;
	continuous = !repeat;
	audioPlayer.loop = repeat;
	updateButtonState();
}

const toggleContinue = () => {
	continuous = !continuous;
	updateButtonState();
}

const previousTrack = () => {
	if (!continuous) return;
	if (playingItem-- === 0) playingItem = total-1;

	if (document.getElementById(playingItem).classList.contains('dir')) {
		return previousTrack();
	}

	playSong(playingItem);
}

const nextTrack = () => {
	if (!continuous) return;
	if (++playingItem === total) playingItem = 0;

	if (document.getElementById(playingItem).classList.contains('dir')) {
		return nextTrack();
	}

	playSong(playingItem);
}

const selectPreviousItem = () => {
	if (selectedItem-- === 0) selectedItem = total-1;
	updateSelectedItem();
}

const selectNextItem = () => {
	if (++selectedItem === total) selectedItem = 0;
	updateSelectedItem();
}

const updateSelectedItem = () => {
	if (document.getElementsByClassName('selected').length > 0) {
		document.getElementsByClassName('selected')[0].classList.remove('selected');
	}

	document.getElementById(selectedItem).classList.add('selected');
}

const formatTime = (secs) => {
	secs = Math.round(secs);
	const minutes = Math.floor(secs / 60) || 0;
	const seconds = (secs - minutes * 60) || 0;
	return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
}

document.addEventListener('DOMContentLoaded', initState);
document.addEventListener('keydown', handleKeyEvent);