/**
 * Carte_Js_Maps.js
 * @author Samuel Langlois
 */
var $ = jQuery.noConflict();

"use strict";

/**
 * Globals
 */
let rea_map = null;

/**
 * Dom ready
 */
$(document).ready(function($){
	
	/**
	 * Triggers
	 */
	$('.trigger__redessiner-les-markers')            .click( function(){ rea__carte_redessiner_les_markers();                      } );
	$('.trigger__reloader-la-map-avec-des-param-uri').click( function(){ rea__carte_reloader_la_map_avec_des_param_uri( $(this) ); } );
	//$('.trigger__toggle-modal')                      .click( function(){ rea__carte_toggle_modal();                                } );
	$('.trigger__toggle-filtre')                     .click( function(){ rea__carte_toggle_filtre();                               } );
	$('.trigger__centrer-marqueur')                  .click( function(){ rea__centrer_marqueur( $(this) );                         } );

	/**
	 * Initier la Google Map
	 */
	$('.rea__carte__container__carte').each( function(){ 
		rea_map = rea__carte_new_map( $(this) ); 
		rea__carte_redessiner_les_markers();
	});

});

/**
 * Dom load
 */
$(window).load(function(){

	jQuery('#rea__carte').removeClass('loading');

});

/**
 * rea__carte_add_marker() : On ajoute un marker
 *
 * @since 2020
 * @author Samuel Langlois
 * 
 * @param $marker Le marker (qui est un élément)
 * @param map     La carte nouvellement instancier
 * 
 * @return void
 */
function rea__carte_add_marker( $marker, map )
{
	/**
	 * Validation
	 */
	if ( $marker.attr('lat') == '' || $marker.attr('lng') == '' )
		return;

	/**
	 * Variables
	 */
	let latlng            = new google.maps.LatLng( $marker.attr('lat'), $marker.attr('lng') );
	let post_id           = $marker.attr( 'post-id' );
	let target_sidebar_id = $marker.attr( 'target-sidebar-id' );
	let target_list_id    = $marker.attr( 'target-list-id' );

	/**
	 * On ajoute l'image du marker
	 */
	let img_marker =  `${rea__carte.pluginurl}public/images/marker.png`;
	if ( $marker.attr('marker') != '' && $marker.attr('marker') !== undefined ) 
		img_marker = $marker.attr('marker');

	/**
	 * Instantion du marker
	 */
	let args = {
		position             : latlng,
		map		             : map,
		icon                 : img_marker,
		icon_normal          : $marker.attr('marker'),
		icon_selected        : $marker.attr('marker-selected'),
		secteur              : $marker.attr('secteur'),
		secteur_name         : $marker.attr('secteur-name'),
		est_commerce_detail  : $marker.attr('est-commerce-detail'),
		nb_employes          : $marker.attr('nb-employes'),
		categorie_entreprise : $marker.attr('categorie-entreprise'),
		recherche            : `${$marker.attr('titre')}||${$marker.attr('excerpt')}||${$marker.attr('responsables')}`,
		photo                : $marker.attr('photo'),
		titre                : $marker.attr('titre'),
		adresse              : $marker.attr('adresse'),
		site_web             : $marker.attr('site-web'),
		permalien            : $marker.attr('permalien'),
		post_id              : post_id,
		target_marqueur_id   : `rea__carte__article-carte__marqueur--${post_id}`,
		target_sidebar_id    : target_sidebar_id,
		target_list_id       : target_list_id,
	};

	let marker = new google.maps.Marker(args);

	/**
	 * On l'ajoute à la variable global
	 */
	map.markers.push( marker );

	/**
	 * On ajoute un evenement au click
	 */
	if ( post_id )
	{
		/**
		 * Triggers evenements
		 */
		google.maps.event.addListener( marker, 'click',    function(){ 
			rea__highligther_marqueur( map, marker, target_sidebar_id, latlng, 'click' ); 
			rea__populer_infos_mobile( args ); 
		} );
		google.maps.event.addListener( marker, 'dblclick', function(){ 
			rea__highligther_marqueur( map, marker, target_sidebar_id, latlng, 'mouseover-sidebar' ); 
			rea__populer_infos_mobile( args ); 
		});
	}
		
}

/**
 * rea__carte_center_map() : On centre la carte
 *
 * @since 2020
 * @author Samuel Langlois
 * 
 * @param map La carte nouvellement instancier
 * 
 * @return void
 */
function rea__carte_center_map( map ) 
{
	/**
	 * Variables
	 */
	var bounds = new google.maps.LatLngBounds();

	/**
	 * On boucle sur tous les markers
	 */
	$.each( map.markers, function( i, marker ){
		var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
		bounds.extend( latlng );
	});

	/**
	 * Est-ce qu'on a un seul marker
	 */
	if( map.markers.length == 1 )
	{
	    map.setCenter( bounds.getCenter() );
	    map.setZoom( 14 );
	}
	else
		map.fitBounds( bounds );
}

/**
 * rea__carte_new_map() : On créer la map
 *
 * @since 2020
 * @author Samuel Langlois
 * 
 * @param $el L'élément qui va y avoir la map
 * 
 * @return google.maps.Map
 */
function rea__carte_new_map( $el )
{
	/**
	 * Variables
	 */
	let $markers       = $el.find('.marker');
	let lat_center     = 0;
	let lng_center     = 0;
	let zoom           = 14;
	let afficher_route = false;

	/**
	 * Validation des donner qu'on parse en attribut
	 */
	if ( $el.attr('lat-center') != '' && $el.attr('lat-center') !== undefined )
		lat_center = parseFloat( $el.attr('lat-center') );

	if ( $el.attr('lng-center') != '' && $el.attr('lng-center') !== undefined )
		lng_center = parseFloat( $el.attr('lng-center') );

	if ( $el.attr('zoom') != '' && $el.attr('zoom') !== undefined )
		zoom = parseInt( $el.attr('zoom') );

	if ( $el.attr('afficher-route') == 'true' )
		afficher_route = true;

	/**
	 * Arguments de la Google map
	 */
	let args = {
		zoom              : zoom,
		center            : new google.maps.LatLng( lat_center, lng_center ),
		mapTypeId         : google.maps.MapTypeId.ROADMAP,
		mapTypeControl    : false,
		gestureHandling   : 'greedy',
		fullscreenControl : false,
		streetViewControl : false,

		styles: [{"featureType":"administrative","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"},{"color":"#ffffff"}]},{"featureType":"poi","elementType":"all","stylers":[{"saturation":-100},{"lightness":"50"},{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":"-100"},{"visibility":"on"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"color":"#eeeeee"}]},{"featureType":"road","elementType":"labels.text","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"lightness":"30"}]},{"featureType":"road.local","elementType":"all","stylers":[{"lightness":"40"}]},{"featureType":"transit","elementType":"all","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#cbd7d4"}]},{"featureType":"water","elementType":"labels","stylers":[{"lightness":-25},{"saturation":-100}]}],
	};

	/**
	 * Instantiation de la Google Map
	 */
	let map = new google.maps.Map( $el[0], args );

	/**
	 * Tableaux de markers
	 */
	map.markers = [];
	map.marker_clusterer;

	/**
	 * On ajoute les markers
	 */
	$markers.each(function(){
    	rea__carte_add_marker( $(this), map );
	});
	
	/**
	 * Succès
	 */
	return map;
}

/**
 * rea__carte_redessiner_les_markers() : On toggle les marker de la map
 *
 * @since 2020
 * @author Samuel Langlois
 * 
 * @return void
 */
function rea__carte_redessiner_les_markers()
{
	// Filtre OR ////

	/**
	 * Variables
	 */
	// let $liste_filtre_checked = $(`.rea__carte__input-check__champ--marker:checked`);

	/**
	 * On retire tous les markers de la map
	 */
	// rea_map.markers.forEach( function( marker, i ){
	// 	rea_map.markers[i].setMap( null );
	// });

	/**
	 * On réaffiche les markers qui on été sélectionner
	 */
	// $liste_filtre_checked.each( function(){

	// 	let $filtre = $(this);

	// 	rea_map.markers.forEach( function( marker, i ){
	// 		if ( marker.categorie_entreprise == $filtre.attr('name') )
	// 			rea_map.markers[i].setMap( rea_map );
	// 		else if ( marker.secteur == $filtre.attr('name') )
	// 			rea_map.markers[i].setMap( rea_map );
	// 		else if ( marker.est_commerce_detail == $filtre.attr('name') )
	// 			rea_map.markers[i].setMap( rea_map );
	// 	});

	// });


	// Filtre AND ////
	/**
	 * Variables
	 */
	let $liste_filtre_checked_cat_entreprise = $(`.rea__carte__input-check__champ--marker[groupe=cat_entreprise]:checked`);
	let $liste_filtre_checked_secteur        = $(`.rea__carte__input-check__champ--marker[groupe=secteur]:checked`);

	/**
	 * On retire tous les markers de la map
	 */
	rea_map.markers.forEach( function( marker, i ){
		rea_map.markers[i].setVisible( false );
		$(`#${marker.target_sidebar_id}`).hide();
		$(`#${marker.target_list_id}`).hide();
	});

	/**
	 * On réaffiche les markers qui on été sélectionner
	 */
	let arr_filtre_cat_entreprise = [];
	$liste_filtre_checked_cat_entreprise.each( function(){
		arr_filtre_cat_entreprise.push( $(this).attr('name') );
	});

	let arr_filtre_secteur = [];
	$liste_filtre_checked_secteur.each( function(){
		arr_filtre_secteur.push( $(this).attr('name') );
	});

	rea_map.markers.forEach( function( marker, i ){

		let secteurs = JSON.parse( marker.secteur );

		secteurs.forEach( function( secteur, j ){
			if ( arr_filtre_cat_entreprise.includes( marker.categorie_entreprise ) && arr_filtre_secteur.includes( secteur ) ) 
			{
				rea_map.markers[i].setVisible( true );

				$(`#${marker.target_sidebar_id}`).show();
				$(`#${marker.target_list_id}`).show();
			}
		});
	});


	/**
	 * Marker Cluster
	 */
	if ( rea_map.marker_clusterer === undefined )
	{
		rea_map.marker_clusterer = new MarkerClusterer( rea_map, [], {
		    //imagePath: "//developers.google.com/maps/documentation/javascript/examples/markerclusterer/m", // Par défaut
		    imagePath: `${rea__carte.pluginurl}public/images/clusters/m`,                                    // Custom
		    ignoreHidden: true,
		});
		rea_map.marker_clusterer.setStyles( rea_map.marker_clusterer.getStyles().map( function( style ){
			style.textColor = '#fff';
	    	return style;
		}));
		rea_map.marker_clusterer.addMarkers( rea_map.markers );
	}
	else 
	{
		rea_map.marker_clusterer.repaint();
	}
}

/**
 * rea__carte_reloader_la_map_avec_des_param_uri() : 
 *
 * @since 2020
 * @author Samuel Langlois
 * 
 * @param $el L'élément qui va y avoir la map
 * 
 * @return void
 */
function rea__carte_reloader_la_map_avec_des_param_uri( $el )
{
	/**
	 * Variables
	 */
	let permalink = $el.attr('permalink');

	/**
	 * On active le loader
	 */
	$el.siblings('.rea__carte__input-check__chargement').addClass('rea__carte__input-check__chargement--active');

	/**
	 * @todo Faire qu'on garde les checked au load
	 */
	$('.rea__carte__input-check__champ').each(function(){
		let filtre = $(this).attr('name');

		if ( $(this).is(':checked') )
			permalink += `&${filtre}`;
	});

	/**
	 * On change de page
	 */
	window.location.href = permalink;
}

/**
 * rea__carte_afficher_les_infos_d_un_attrait()
 *
 * @since 2020
 * @author Samuel Langlois
 * 
 * @return void
 */
function rea__carte_toggle_filtre()
{
	$( 'body' ).toggleClass( 'rea__carte__filtre-active' );

	if ( $( 'body' ).hasClass( 'rea__carte__filtre-active' ) )
		$('.rea__carte__btn-filtre').html( '<i class="fa fa-close"></i>' );
	else 
	{
		let texte = $('.rea__carte__btn-filtre').attr('texte');
		$('.rea__carte__btn-filtre').html( `${texte} <i class="fa fa-bars"></i>` );
	}
}

/**
 * rea__centrer_marqueur()
 *
 * @since 2020
 * @author Samuel Langlois
 * 
 * @param $this
 * 
 * @return void
 */
function rea__centrer_marqueur( $this )
{
	/**
	 * Variables
	 */
	let target_marqueur_id = $this.attr( 'target-marqueur-id' );
	let marqueur_key       = -1;

	/**
	 * 
	 */
	rea_map.markers.forEach( function( marker, i ){
		if ( marker['target_marqueur_id'] == target_marqueur_id )
			marqueur_key = i;
	});

	/**
	 * 
	 */
	google.maps.event.trigger( rea_map.markers[marqueur_key], 'dblclick' );
	rea_map.setZoom( 16 );
}

/**
 * rea__highligther_marqueur()
 *
 * @since 2020
 * @author Samuel Langlois
 * 
 * @param map
 * @param marker
 * @param target_sidebar_id
 * @param latlng
 * @param type_evenement
 * 
 * @return void
 */
function rea__highligther_marqueur( map, marker, target_sidebar_id, latlng, type_evenement )
{
	/**
	 * On change les icons et on en met un selected
	 */
	map.markers.forEach( ( element ) => { 
		element.setIcon( element.icon_normal );
	});
	marker.setIcon( marker.icon_selected );

	/**
	 * On recentre
	 */
	map.panTo( latlng );

	/**
	 * On scroll à notre commerce sur la liste de gauche
	 */
    if ( type_evenement != 'mouseover-sidebar' )
    {
    	let target_el = document.getElementById( target_sidebar_id );

    	$('#rea__carte .ccem-repertoire-membre-sidelist').animate({
		    scrollTop: target_el.offsetTop - target_el.parentNode.offsetTop
		}, 1200);
    }

	/**
	 * On highlight le commerce dans la sidebar
	 */
	$('.rea__carte__article-carte').removeClass('active');
	$(`#${target_sidebar_id}`).addClass('active');
}

/**
 * rea__populer_infos_mobile()
 *
 * @since 2020
 * @author Samuel Langlois
 * 
 * @param args
 * 
 * @return void
 */
function rea__populer_infos_mobile( args )
{
	$('#ccem-repertoire-membre-modal .logo')      .attr( 'src', args.photo );
	$('#ccem-repertoire-membre-modal .titre')     .text( args.titre );
	$('#ccem-repertoire-membre-modal .secteur')   .text( JSON.parse( args.secteur_name )[0] );
	$('#ccem-repertoire-membre-modal .l-adresse') .text( args.adresse );
	$('#ccem-repertoire-membre-modal .site-web')  .attr( 'href', args.site_web );
	$('#ccem-repertoire-membre-modal .plus-infos').attr( 'href', args.permalien );

	if ( args.site_web == '' )
		$('#ccem-repertoire-membre-modal .site-web').hide();
	else
		$('#ccem-repertoire-membre-modal .site-web').show();

	if ( args.est_commerce_detail == "true" )
		$('#ccem-repertoire-membre-modal .est-commerce-detail').attr( 'src', $('#ccem-repertoire-membre-modal .est-commerce-detail').attr( 'data-src' ) );
	else
		$('#ccem-repertoire-membre-modal .est-commerce-detail').attr( 'src', '' );

	$('#ccem-repertoire-membre-modal').addClass( 'active' );
}