
/*--------------------------------------------------------------------------
				VARIATION DU BLOC GROUPE COUNTDOWN TIMER
---------------------------------------------------------------------------*/
/*
Une post meta:countdown_timer_date_events a été déclaré par la fonction
PHP eccp_register_post_meta().
Le fichier sidebarControlsCountDown.js établi en ReactJS ajoute dans les
paramètres du bloc un panneau ECCP Countdown Timer qui comporte un DatePicker.
La date sélectionnée est affectée a un attribut dateEvents qui met a jour
la post meta:countdown_timer_date_events pour la publication en cours
réciproquement la post meta:countdown_timer_date_events est récupéré
en ReactJS pour initialiser le DatePicker.  

Le hook render_block est utilisé pour modifier en Front End le balisage de 
fin du block groupe de classe is-style-eccp-countdown pour incorporer 
le code HTML de notre compte a rebours, avec deux balisage différent
selon que l'on a des compteurs de formes carré ou circulaire.

la date de l'évènement pour le compte à rebours a été affiché dans une div caché 
par la fonction php: eccp_get_countdown_timer_date_events().
le script JS: eccp-countdown-timer.js va récupérer la date d'èvènement dans cette
balise <div> caché et actualiser l'affichage du compte a rebours toutes les secondes.

Le balisage HTML du compte à rebours a été définit dans le fichier: asset/eccp-custom-gutenberg-block.php  
On récupère une valeur d'attribut circular-countdown renseignée dans le balisage HTML
Lorsqu'on a un compte a rebours de forme circulaire, afin d'appliquer du code JS
spécifiquement pour ce style.


*/


jQuery(document).ready(function($){
	
	
	// la date de l'évènement pour le compte à rebours a été affiché dans une div caché 
	// par la fonction php: eccp_get_countdown_timer_date_events().
	// cette div a pour id: data-date-events
	// c'est pourquoi on vérifie la présence de l'ID: data-date-events
	// avant d'affecter la variable: futured_image_url
	if (document.getElementById("data-date-events")) {
		date_events = document.getElementById("data-date-events").textContent;
	}
	
	// Définir la date de fin du compte à rebours
	var countDownDate = new Date(date_events).getTime();
	
	// on affecte des variables avec les valeurs de 
	// des attribut circular-countdown & circle-diameter
	// qui ont été renseigné lors du balisage HTML	
	// lorsqu'on a un compte à rebours de formes circulaires	 
	var circular_countdown = 0;	
	circular_countdown = $('.is-style-eccp-countdown .countdown-wrapper').attr('circular-countdown');
	circle_diameter = $('.is-style-eccp-countdown .countdown-wrapper').attr('circle-diameter');
	
	// pour Debug
	// console.log('circular_countdown:',circular_countdown);
	// console.log('circle_diameter:',circle_diameter);
	
	// Met à jour le compte à rebours toutes les 1 secondes
	var x = setInterval(function() {
		
		var circle_seconds = document.getElementById("arc-seconds");

		// Récupérer la date et l'heure actuelles
		var date_today = new Date().getTime();
		
		// Ecart en milliseconde
		var time_remaining = (countDownDate - date_today);

		/* pour debug 
		console.log("Temps restant en milliseconde: " + time_remaining);
		*/
		
		if (time_remaining < 0) {
			time_remaining = 0;
		}
		
		// Calculer le nombre de jours, d'heures, de minutes et de secondes restantes
		// floor arrondi a l'entier inférieur
		// exemple pour le nbr de jour: on divise par 1000 pour convertir l'ecart de temps en seconde
		// puis on divise par 60 pour avoir le nbr de minute , a nouveau par 60 pour le nbr d'heure
		// et enfin par 24 pour avoir le nbr de jour.
		var days = Math.floor(time_remaining / (1000 * 60 * 60 * 24));
		var hours = Math.floor((time_remaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		var minutes = Math.floor((time_remaining % (1000 * 60 * 60)) / (1000 * 60));
		var seconds = Math.floor((time_remaining % (1000 * 60)) / 1000);

		/* pour debug
		console.log("compte a rebours:" + days + "j " + hours + "h "
		+ minutes + "m " + seconds + "s ");
		*/
		
		// si c'est un compte à rebours de forme circulaire
		if (circular_countdown) {
		
			/* correspondance des valeurs de date avec des valeurs de rayon
			   initialement in_min pour les jours était à 30 mais passé à 31 
			   car pose probléme lorsque le compte à rebours > 180 jours 
			   l'arc de cercle du SVG est concave au lieu d'être convexe			   
			*/
			const daysRadius = mapNumber(days, 30, 0, 0, 360);
			const hoursRadius = mapNumber(hours, 24, 0, 0, 360);
			const minutesRadius = mapNumber(minutes, 60, 0, 0, 360);
			const secondsRadius = mapNumber(seconds, 60, 0, 0, 360);
			
			
			
			// contour circulaire des compteurs
			// avec la fonction describeArc()
			// qui renvoie pour le SVG circulaire des compteurs 
			// la valeur de l'attribut d pour le <path> 
			// balisage du SVG définit dans le fichier: asset/eccp-custom-gutenberg-block.php 		
			// cette fonction prend pour agument:
			// un arc avec un rayon de 48
			// (basé sur un centre à 50 50) c'est a dire la moitié
			// du diamètre 100 par défaut du cercle appliqué par une régle CSS
			// dans le fichier css/eccp-dynamic-css-front-end.php
			// arc qui varie de 0 à 360° selon la valeur des 
			// arguments daysRadius ou hoursRadius etc..
			// arguments mis à jours toutes les 1 secondes		
			// le rayon de 48 est (50 - 1/2 épaisseur du cercle)
			// épaisseur du cercle définit a 4 par défaut pour l'attribut stroke-width du svg
			// mais peut être on doit tenir compte que le diamètre du cercle des compteurs est variable
			// car c'est une option de réglage 
			
			/*
			const x_circle = Math.floor(circle_diameter/2);
			const y_circle = Math.floor(circle_diameter/2);
			const radius = x_circle - 2;
			*/
			
			document.getElementById("arc-days").setAttribute("d", describeArc(50, 50, 48, 0, daysRadius));
			document.getElementById("arc-hours").setAttribute("d", describeArc(50, 50, 48, 0, hoursRadius));
			document.getElementById("arc-minutes").setAttribute("d", describeArc(50, 50, 48, 0, minutesRadius));
			document.getElementById("arc-seconds").setAttribute("d", describeArc(50, 50, 48, 0, secondsRadius));

		}
		
		// Si la date de fin du compte a rebours n'a pas été atteinte
		// on l'actualise en se basant sur les classes des balises <span> 
		// qui l'affiche
		if ( time_remaining >= 0 ) {
			$('.days').text(caractere(days));
			$('.hours').text(caractere(hours));
			$('.minutes').text(caractere(minutes));
			$('.seconds').text(caractere(seconds));
		}
		
		// mise au format sur deux chiffres pour un temps < 10' ou 10s etc..
		function caractere(nb){
            return (nb < 10) ? '0'+nb : nb;
        }

	}, 1000);
	
	
	/* -----------------------------------------------------------------------------
		les fonctions qui suivent sont pour un compte à rebours de forme circulaire
	--------------------------------------------------------------------------------*/
	
	// From StackOverflow: https://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle
	// From: https://www.florin-pop.com/blog/2019/05/countdown-built-with-react/
	function describeArc(x, y, radius, startAngle, endAngle) {
		
		var start = polarToCartesian(x, y, radius, endAngle);
		var end = polarToCartesian(x, y, radius, startAngle);

		var largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';

		var d = [
			'M',
			start.x,
			start.y,
			'A',
			radius,
			radius,
			0,
			largeArcFlag,
			0,
			end.x,
			end.y
		].join(' ');

		return d;
		
	}
	
	function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
		
		var angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;

		return {
			x: centerX + radius * Math.cos(angleInRadians),
			y: centerY + radius * Math.sin(angleInRadians)
		};
		
	}
	
	// From StackOverflow: https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
	function mapNumber(number, in_min, in_max, out_min, out_max) {
		
		return (
			((number - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
		);
		
	}

		
});
