/*--------------------------------------------------------------------------
				Onglets de navigation pour le Bloc Groupe
---------------------------------------------------------------------------*/
/*
Crédit code: https://redpishi.com/wordpress-tutorials/add-tabs-in-wordpress-without-plugins/
code initial en JS adapter en Jquery

On utilise:
• Le bloc Boutons ou chaque bouton va représenter un onglet avec son item de menu.
• Des blocs Groupe Gutenberg pour le contenu de chaque onglet.

Chaque bloc bouton se voit attribuer la classe: is-style-tab-item en sélectionnant 
le style Tab Item au panneau styles des paramètres du bloc
Chaque bloc groupe se voit attribuer la classe: is-style-tab-content en sélectionnant 
le style Tab Content au panneau styles des paramètres du bloc

Ces classes vont permettre d'appliquer des régles CSS en Front End via
le fichier asset\eccp-custom-front-end.php pour le bloc Boutons

Résumé des fonctionnalités du script:

• Au chargement de la page, le premier onglet et le premier contenu 
  sont définis comme actifs (affichés).
• Lorsque l'utilisateur clique sur un onglet, la fonction activeTab est appelée.
• La fonction activeTab désactive tous les onglets et masque les contenus 
  en supprimant la classe active.
• La fonction activeTab active l'onglet cliqué et affiche le contenu correspondant 
  en ajoutant respectivement la classe active à l'onglet et le bloc groupe correspondant.

*/

jQuery(document).ready(function($) {
	
	//Configuration initiale: définir le premier onglet comme actif
	$('.wp-block-buttons .is-style-tab-item').first().addClass('active');
	  
	// Configuration initiale: définir le premier contenu comme actif
	$('.is-style-tab-content').first().addClass('active');
	
	// Ajoute un gestionnaire d'événements "click" à chaque élément avec la classe is-style-tab-item.
    // Quand un onglet est cliqué, la fonction redTab() est appelée avec l'onglet cliqué en paramètre.
	$('.is-style-tab-item').click(function(){
		activeTab($(this));
	})

	//la fonction activeTab qui prend en paramètre l'onglet cliqué.
	function activeTab(tab) {
		
		// Sélectionne tous les éléments div.is-style-tab-item(soit les onglets) 
		// à l'intérieur du bloc boutons
		let tabItem = $('.wp-block-buttons div.is-style-tab-item');
		
		// sélectionne tous les blocs groupe
		let tabcontents = $('.is-style-tab-content');
		
		// affecte l'index de l'onglet cliqué parmi tous les onglets dans tabItem
		let activeTabIndex = tabItem.index(tab);

		// Supprime la classe active de tous les onglets pour les désactiver.
		tabItem.removeClass('active');
		
		// Supprime la classe active de tous les contenus pour les cacher.
		tabcontents.removeClass('active');

		// Ajoute la classe active à l'onglet cliqué pour le rendre actif.
		tabItem.eq(activeTabIndex).addClass('active');
		
		// Ajoute la classe active au contenu correspondant à l'onglet cliqué pour l'afficher.
		tabcontents.eq(activeTabIndex).addClass('active');
		
    }

});