/**
 * @name		Page Builder CK
 * @copyright	Copyright (C) 2024. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 * @author		Cedric Keiflin - https://www.template-creator.com - https://www.joomlack.fr
 */


/*
 * Plugin to manage the audio element
 */
(function() {
	"use strict";
	var PBCK_audio = function(selector, opts) {
		if (!(this instanceof PBCK_audio)) return new PBCK_audio(selector, opts);

		var defaults = {
			'src' : ''
			, 'loop' : true
			, 'autoplay' : true
			, 'displaytime' : true
			, 'displaytime_total' : true
			, 'thumb' : '/images/audio/layout3.jpg'
			, 'thumb_width' : '200'
			, 'thumb_height' : '200'
			, 'album' : 'I Took a Pill in Ibiza'
			, 'artist' : 'Mike Posner'
		};

		let t = getInstance(this, selector, opts);

		if (t === false) return false;

		const iconPlay = '<svg xmlns="http://www.w3.org/2000/svg" class="pbck-audio-play" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--pbck-audio-svg-icon-color)" fill="none" stroke-linecap="round" stroke-linejoin="round"> \
		  <path stroke="none" d="M0 0h24v24H0z" fill="none"/> \
		  <path d="M6 4v16a1 1 0 0 0 1.524 .852l13 -8a1 1 0 0 0 0 -1.704l-13 -8a1 1 0 0 0 -1.524 .852z" stroke-width="0" fill="var(--pbck-audio-svg-icon-color)" /> \
		</svg>';
		const iconPause = '<svg xmlns="http://www.w3.org/2000/svg" class="pbck-audio-pause" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--pbck-audio-svg-icon-color)" fill="none" stroke-linecap="round" stroke-linejoin="round"> \
		  <path stroke="none" d="M0 0h24v24H0z" fill="none"/> \
		  <path d="M9 4h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2z" stroke-width="0" fill="var(--pbck-audio-svg-icon-color)" /> \
		  <path d="M17 4h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2z" stroke-width="0" fill="var(--pbck-audio-svg-icon-color)" /> \
		</svg>';
		const iconVolume = '<svg xmlns="http://www.w3.org/2000/svg" class="pbck-audio-volume-on" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--pbck-audio-svg-icon-color)" fill="none" stroke-linecap="round" stroke-linejoin="round"> \
		  <path stroke="none" d="M0 0h24v24H0z" fill="none"/> \
		  <path d="M15 8a5 5 0 0 1 0 8" /> \
		  <path d="M17.7 5a9 9 0 0 1 0 14" /> \
		  <path d="M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a.8 .8 0 0 1 1.5 .5v14a.8 .8 0 0 1 -1.5 .5l-3.5 -4.5" fill="var(--pbck-audio-svg-icon-color)" /> \
		</svg>';
		const iconVolumeOff = '<svg xmlns="http://www.w3.org/2000/svg" class="pbck-audio-volume-off" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--pbck-audio-svg-icon-color)" fill="none" stroke-linecap="round" stroke-linejoin="round"> \
		  <path stroke="none" d="M0 0h24v24H0z" fill="none"/> \
		  <path d="M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a.8 .8 0 0 1 1.5 .5v14a.8 .8 0 0 1 -1.5 .5l-3.5 -4.5" fill="var(--pbck-audio-svg-icon-color)" /> \
		  <path d="M16 10l4 4m0 -4l-4 4" /> \
		</svg>';

		function getInstance(instance, selector, opts) {
			var PBCK_audios = window.PBCK_audios || {};
			if (PBCK_audios.hasOwnProperty(selector)) {
				return PBCK_audios[selector]; // instance already exists in the page
			}

			// merge options
			instance.opts = {
				...defaults,
				...opts
			};
			instance.id =  selector;
			instance.wrap =  document.querySelector('#' + selector + ' .pbck-audio-advanced');

			if (! instance.wrap) {
				console.log('PBCK Audio : Error, no player container found in ' + selector + ' selector');
				instance.state = false;
				return instance;
			}

			instance.state = true;
			instance.audio =  document.querySelector('#' + selector + ' audio');
			instance.html = {};

			PBCK_audios[selector] = instance;
			window.PBCK_audios = PBCK_audios; // adds the new instance in the page

			return instance;
		}

		t.create = function(opts) {
			// implement the new options
			if (opts && typeof opts === 'object') {
				t.opts = {
					...t.opts,
					...opts
				};
			}

			if (! t.audio) {
				let audioPlayerFake = t.wrap.querySelector('.pbck-audio-element');
				if (! audioPlayerFake) {
					console.log('PBCK Audio : Error, no player created in ' + t.id + ' selector');
					return;
				}
				audioPlayerFake.innerHTML = '<audio src="' + t.opts.audioSrc + '"> \
					Your browser does not support the audio element. \
					</audio>';
				t.audio = t.wrap.querySelector('audio');
			}

			// define the base html
			t.html.play = '<div class="pbck-audio-play-pause-button">' + iconPlay + iconPause + '</div>';
			t.html.timeline = '<div class="pbck-audio-timeline"><input type="range" max="100" value="0"></div>';
			t.html.volume = '<div class="pbck-audio-volume-controls"> \
					<div class="pbck-audio-volume-toggler">' + iconVolume + iconVolumeOff + '</div> \
					<input type="range" class="pbck-audio-volume-control" min="0" max="1" step="0.01" value="1"> \
				</div>';
			source();
			reset();
			loop();
			autoPlay();
			displayTime();
			artist();
			album();
			thumb();
			render();
			addEvents();
		}

		t.destroy = function(selector) {
			if (typeof(PBCK_audios) === 'undefined') return;
			if (typeof(t.audio) === 'undefined') return;
			if (PBCK_audios.hasOwnProperty(selector)) {
				delete window.PBCK_audios[selector];
			}
			t.audio.setAttribute('controls', '');
			t.wrap.innerHTML = '';
			t = null;
		}

		t.enable = function() {
			if (t.state === false) return;
			let player = t.wrap.querySelector('.pbck-audio-player');
			if (! player) {
				console.log('PBCK Audio enable info : No player found in ' + t.id + ' selector');
				return;
			}
			addEvents();
		}

		function reset() {
			t.audio.pause();
			t.audio.currentTime = 0;
		}

		function source() {
			if (t.opts.src !== '') {
				t.audio.setAttribute('src', t.opts.src);
			}
			t.audio.removeAttribute('controls');
		}

		function loop() {
			if (t.opts.loop === true) {
				t.audio.setAttribute('loop', '');
			} else {
				t.audio.removeAttribute('loop');
			}
		}

		function autoPlay() {
			if (t.opts.autoplay === true) {
				t.audio.setAttribute('autoplay', 'autoplay');
			} else {
				t.audio.removeAttribute('autoplay');
			}
		}

		function displayTime() {
			t.html.timer = '';
			if (t.opts.displaytime === true) {
				let html = '<div class="pbck-audio-time"> \
					<div class="pbck-audio-time-current">0:00</div>';
				if (t.opts.displaytime_total === true) {
					html += '<div class="pbck-audio-time-separator">/</div> \
						<div class="pbck-audio-time-total">' + t.audio.duration + '</div>';
				}
				html += '</div>';
				t.html.timer = html;
			}
		}

		function artist() {
			t.html.artist = '';
			if (t.opts.artist !== '') {
				let html = '<div class="pbck-audio-artist">' + t.opts.artist + '</div>';

				// if (t.wrap.querySelector('.artist')) t.wrap.querySelector('.artist').remove();
				t.html.artist = html;
			}
		}

		function album() {
			t.html.album = '';
			if (t.opts.album !== '') {
				let html = '<div class="pbck-audio-album">' + t.opts.album + '</div>';
				t.html.album = html;
			}
		}

		function thumb() {
			t.html.thumb = '';
			if (t.opts.thumb !== '') {
				let img_src = t.opts.thumb;
				let html = '<div class="pbck-audio-thumb"><img src="' + img_src + '" data-src="' + t.opts.thumb + '" alt="' + (t.opts.album !== '' ? t.opts.album : 'Audio image') + '" width="' + t.opts.thumb_width + '" height="' + t.opts.thumb_height + '" /></div>';
				t.html.thumb = html;
			}
		}

		function render() {
			t.wrap.innerHTML = '<div class="pbck-audio-player">' + t.html.thumb + t.html.album + t.html.artist 
				+ '<div class="pbck-audio-player-bar">' + t.html.play + t.html.timeline + t.html.timer + t.html.volume + '</div>'
				+ '</div>';
			t.wrap.style.setProperty('--pbck-audio-thumb', 'url(\'' + t.opts.thumb + '\')');
			if (t.opts.thumb_width) t.wrap.style.setProperty('--pbck-audio-thumb-width', t.opts.thumb_width);
			if (t.opts.thumb_height) t.wrap.style.setProperty('--pbck-audio-thumb-height', t.opts.thumb_height);
		}

		function addEvents() {
			const playPauseButton = t.wrap.querySelector('.pbck-audio-play-pause-button');
			const volumeControl = t.wrap.querySelector('.pbck-audio-volume-control');
			const volumeToggler = t.wrap.querySelector('.pbck-audio-volume-toggler');
			const seekSlider = t.wrap.querySelector('.pbck-audio-timeline input[type="range"]');
			const currentTimeDisplay = t.wrap.querySelector('.pbck-audio-time-current');
			const totalTimeDisplay = t.wrap.querySelector('.pbck-audio-time-total');

			let isPlaying = false;
			let volume;

			// needed to get the update of the total time on update
			t.audio.addEventListener("loadedmetadata", () => {
				t.audio.currentTime = 0;
			});

			playPauseButton.addEventListener("click", () => {
				if (isPlaying) {
					t.audio.pause();
					playPauseButton.classList.remove('pause');
					playPauseButton.classList.add('play');
				} else {
					t.audio.play();
					playPauseButton.classList.remove('play');
					playPauseButton.classList.add('pause');
				}
				isPlaying = !isPlaying;
			});

			volumeControl.addEventListener("input", () => {
				t.audio.volume = volumeControl.value;
			});

			seekSlider.addEventListener("input", () => {
				t.audio.currentTime = seekSlider.value / 100 * t.audio.duration;
			});

			volumeToggler.addEventListener("click", () => {
				if (volumeToggler.classList.contains('volume-off')) {
					volumeToggler.classList.remove('volume-off');
					if (! volume) volume = 50;
					volumeControl.value = t.audio.volume = volume;
				} else {
					volumeToggler.classList.add('volume-off');
					volume = t.audio.volume;
					volumeControl.value = t.audio.volume = 0;
				}
			});

			t.audio.addEventListener("timeupdate", () => {
				const currentTime = t.audio.currentTime;
				const duration = t.audio.duration;
				const currentMinutes = Math.floor(currentTime / 60);
				const currentSeconds = Math.floor(currentTime % 60);
				const totalMinutes = Math.floor(duration / 60);
				const totalSeconds = Math.ceil(duration % 60);

				if (currentTimeDisplay) currentTimeDisplay.textContent = `${currentMinutes}:${currentSeconds < 10 ? '0' : ''}${currentSeconds}`;
				if (totalTimeDisplay) totalTimeDisplay.textContent = `${totalMinutes}:${totalSeconds < 10 ? '0' : ''}${totalSeconds}`;
				const progress = (currentTime / duration) * 100;
				seekSlider.value = `${progress}`;
			});

			t.audio.addEventListener("play", () => {
				playPauseButton.classList.remove('play');
				playPauseButton.classList.add('pause');
				isPlaying = true;
			});
		}

		// return instance
		return t;
	}
	window.PBCK_audio = PBCK_audio;
})(document);

// function used in the interface when creating a new audio
//function pbck_audio_init(id) {
//	new PBCK_audio(id);
//}

document.addEventListener("DOMContentLoaded", (event) => {
	document.querySelectorAll('.cktype[data-type="audio"]').forEach(function(item) {
		let audioplayer = new PBCK_audio(item.id);
		audioplayer.enable();
	});
});