/**
 * Script for Bing Map
 */

const devMap = function () {
	let mapStyle = {};
	let mapFilter = "";
	let locationData = {};
	let clusterLayer = undefined;
	let radius = 22;
	let zoomOnClick = false;
	let zoomClusterOnClick = true;

	const communitiesList = '#communityList';
	const selectClass = '#selectCommunity';

	const optionTemplate = '<option value="{value}">{option}</option>';

	let defaultLocations = {}


	function loadData() {
		loadJSON('maphttps://www.microsoft.com/json/locations.js?v=28-09-22', function (response) {
			defaultLocations = response;

			loadJSON('maphttps://www.microsoft.com/json/style.js', function (response) {
				mapStyle = response;


				loadJSON('maphttps://www.microsoft.com/json/pins.js?v=28-09-22', function (response) {
					locationData = response;

					for (let i = 0; i < locationData.length; i++) {

						const loc = locationData[i];

						if (typeof loc["position"].lat == "undefined") {

							loc["position"] = {
								"lat": defaultLocations[loc['position']['location']].lat || 0,
								"lng": defaultLocations[loc['position']['location']].lng || 0
							}
						}
					}

					LoadTechSelector();
					initMap();
				});

			});

		});
	}


	window.initDevMap = function () {
		loadData();
	}


	function LoadTechSelector() {
		var availableOptions = GetTechnologies();

		$('#selectTech').append('<option value="">All technologies</option>');

		for (let i = 0; i < availableOptions.length; i++) {
			$('#selectTech').append('<option value="' + availableOptions[i] + '">' + availableOptions[i] + '</option>');
		}
		$('#selectTech').select2({
			minimumResultsForSearch: -1
		});

		$('#selectTech').on('change', function () {
			mapFilter = $('#selectTech').val();
			$(communitiesList).addClass('hide').hide();
			GetMap();
		});

	}
	function GetPinByType(type, text) {

		if (typeof text == "undefined") {
			text = '';
		}
		var svgTemplate = '';
		if (type.toLowerCase() == "hybrid") {
			svgTemplate = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 43.9" width="44" height="44"><defs><style>.cls-1{fill:#d59dff;}.cls-2{fill:none;stroke:#d59dff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:4px;stroke-dasharray:27.91 13.96;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Map"><circle class="cls-1" cx="22" cy="21.9" r="14"/><path class="cls-2" d="M22,41.9a20,20,0,0,1-20-20c1.1-26.54,38.91-26.53,40,0a20,20,0,0,1-20,20Z"/></g></g>';
		} else if (type.toLowerCase() == "virtual") {
			svgTemplate = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 43.9" width="44" height="44"><defs><style>.cls-1{fill:#30e5d0;}.cls-2{fill:none;stroke:#30e5d0;stroke-linecap:round;stroke-miterlimit:10;stroke-width:4px;stroke-dasharray:15.7 15.7;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Map"><circle class="cls-1" cx="22" cy="21.9" r="14"/><path class="cls-2" d="M22,41.9a20,20,0,0,1-20-20c1.1-26.54,38.91-26.53,40,0a20,20,0,0,1-20,20Z"/></g></g>';
		} else if (type.toLowerCase() == "cluster") {
			svgTemplate = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="44" height="44"><defs><style>.cls-1{fill:#3aa0fa;}.cls-2{fill:none;stroke:#3aa0fa;stroke-linecap:round;stroke-miterlimit:10;stroke-width:4px;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Map"><circle class="cls-1" cx="22" cy="22" r="14"/><circle class="cls-2" cx="22" cy="22" r="20"/></g></g>';
		} else svgTemplate = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 43.9" width="44" height="44"><defs><style>.cls-1{fill:#fef000;}.cls-2{fill:none;stroke:#fef000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:4px;stroke-dasharray:0 7.85;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Map"><circle class="cls-1" cx="22" cy="21.9" r="14"/><path class="cls-2" d="M22,41.9a20,20,0,0,1-20-20c1.1-26.54,38.91-26.53,40,0a20,20,0,0,1-20,20Z"/></g></g>';

		svgTemplate += '<text x="50%" y="62%" font-size="12" font-family="Segoe UI" font-weight="bold" fill="#000000" text-anchor="middle">{text}</text></svg>'.replaceAll('{text}', text)

		return svgTemplate;
	}

	function GetPins() {
		var mapPins = [];
		var mapData = GetLocationsByTechnology(mapFilter);

		for (let i = 0; i < mapData.length; i++) {
			const loc = mapData[i];


			const pinLat = loc["position"].lat;
			const pinLong = loc["position"].lng;


			let pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(pinLat, pinLong), {
				icon: GetPinByType(loc['type'])
			});

			//Store some metadata with the pushpin.
			pin.metadata = {
				title: loc['title'],
				lat: pinLat,
				lng: pinLong,
				data: loc
			};

			//Add a click event handler to the pushpin.
			Microsoft.Maps.Events.addHandler(pin, 'click', function (e) {

				popupCommunities(e);

			});

			//Add pushpin to the map.
			mapPins.push(pin);
		}

		return mapPins;
	}

	function GetLocationsByLatLng(lat, lng) {
		var locations = [];
		var filteredData = GetLocationsByTechnology(mapFilter);

		for (let i = 0; i < filteredData.length; i++) {
			const loc = filteredData[i];
			if (loc["position"].lat == lat && loc["position"].lng == lng) {
				locations.push(loc);
			}

		}
		return locations;
	}


	function GetLocationsByTechnology(selectedTech) {
		var locations = [];

		if (selectedTech == "") {
			return locationData;
		} else {
			for (let i = 0; i < locationData.length; i++) {
				const loc = locationData[i];
				if (loc["technologies"].indexOf(selectedTech) > -1) {
					locations.push(loc);
				}

			}
			return locations;
		}
	}



	function GetTechnologies() {
		var techList = [];

		for (let i = 0; i < locationData.length; i++) {
			var tech = locationData[i].technologies;

			for (let j = 0; j < tech.length; j++) {
				if (techList.indexOf(tech[j]) == - 1) {
					techList.push(tech[j]);
				}
			}
		}
		return techList.sort();
	}

	function initMap() {
		const bounds = Microsoft.Maps.LocationRect.fromLocations(
			new Microsoft.Maps.Location(59.050091, -11.134312),
			new Microsoft.Maps.Location(48.872988, 2.369934));

		const mapOptions = {
			center: new Microsoft.Maps.Location(55.3781, -3.4360),
			credentials: 'AhyTgA8dUBlw4utoGlWMk5N-_2PAv2h8GCtLaQhYlTTU-73Txq70L7vVF7AqG6pt',
			customMapStyle: mapStyle,
			maxBounds: bounds,
			maxZoom: 18,
			minZoom: 6,
			zoom: 6
		}

		map = new Microsoft.Maps.Map('#communitiesMap', mapOptions);
		GetMap();
	}

	function GetMap() {

		if (clusterLayer != undefined) {
			clusterLayer.clear();
		}

		//Load the Clustering module.
		Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
			//Generate 1,000 random pushpins in the map view. 
			var pins = GetPins();

			//Create a ClusterLayer and add it to the map.
			clusterLayer = new Microsoft.Maps.ClusterLayer(pins, {
				clusteredPinCallback: customizeClusteredPin,
				gridSize: 45
			});
			map.layers.insert(clusterLayer);


		});



	}

	function RenderCommunities(communities) {
		let sliderConfig = {
			accessibility: true,
			arrows: true,
			dots: true,
			infinite: true,
			mobileFirst: true,
			useCSS: true,
			useTransform: true,
			slidesToShow: 1,
			slidesToScroll: 1,
			speed: 400,
			touchThreshold: 8,
			dotsClass: 'custom_paging',
			customPaging: function (slider, i) {
				return (i + 1) + ' of ' + slider.slideCount;
			}
		};

		// Prepares the wrapper
		$(communitiesList).html('');
		$(selectClass).html('');
		$(communitiesList).addClass('hide').hide();

		if ($(communitiesList).hasClass('slick-initialized')) {
			$(communitiesList).slick('unslick');
			$(communitiesList).html('');
		}

		for (let i = 0; i < communities.length; i++) {
			replacePlaceholder(communities[i], name, i);
		}

		$(communitiesList).show();
		// If community is more than one, initiate slider and select

		if (communities.length > 1) {
			$(communitiesList).slick(sliderConfig);
			$(selectClass).select2({
				minimumResultsForSearch: -1
			});

		}

		// Delay the removal of role attribute created by the Slick Slider
		setTimeout(function () {
			$('.custom_paging').removeAttr('role');
			$('.custom_paging li').removeAttr('role');
		}, 200);

		// Eventlistener for select
		$(selectClass).change(function (event) {
			event.preventDefault();
			event.stopPropagation();

			const goTo = $(selectClass).val();
			$(communitiesList).slick('goTo', goTo);
		});
		$(communitiesList).removeClass('hide');

	}

	function getClusterType(cluster) {
		var clusterType = cluster.containedPushpins[0].metadata.data.type;

		for (var v = 0; v < cluster.containedPushpins.length; v++) {

			if (cluster.containedPushpins[v].metadata.data.type !== clusterType) {
				clusterType = "cluster";
			}
		}

		return clusterType.toLowerCase();
	}
	function customizeClusteredPin(cluster) {

		cluster.setOptions({
			icon: GetPinByType(getClusterType(cluster), cluster.containedPushpins.length),
			anchor: new Microsoft.Maps.Point(radius, radius),
			text: '',
			textOffset: new Microsoft.Maps.Point(0, radius - 7) //Subtract 8 to compensate for height of text.
		});

		Microsoft.Maps.Events.addHandler(cluster, 'click', clusterClicked);
	}

	function clusterClicked(e) {

		if (e.target.containedPushpins) {
			RenderCluster(e.target.containedPushpins);
		}
	}

	function RenderCluster(cluster) {

		const items = [];
		const lat = cluster[0].metadata.lat;
		const lng = cluster[0].metadata.lng;


		let zoom = map.getZoom();
		if (zoomClusterOnClick) {
			zoom = map.getZoom() + 3;
		}

		map.setView({
			center: new Microsoft.Maps.Location(lat, lng),
			zoom: zoom
		});

		for (let i = 0; i < cluster.length; i++) {
			items.push(cluster[i].metadata.data);
		}

		RenderCommunities(items);
	}

	// Function to get json files response
	function loadJSON(fileURL, callback) {
		let xobj = new XMLHttpRequest();
		xobj.overrideMimeType("applicationhttps://www.microsoft.com/json");
		xobj.open('GET', fileURL, true);
		xobj.onreadystatechange = function () {
			if (xobj.readyState == 4 && xobj.status == "200") {
				callback(JSON.parse(xobj.responseText));
			}
		}
		xobj.send(null);
	}

	// Communities Pop up Function
	function popupCommunities(e) {


		if (e.target.metadata.data) {

			const name = e.target.metadata.data.title;

			const communities = GetLocationsByLatLng(e.target.metadata.lat, e.target.metadata.lng);

			let zoom = map.getZoom();
			if (zoomOnClick) {
				zoom = map.getZoom() + 3;
			}


			// Center the map to the clicked pushpin
			map.setView({
				center: new Microsoft.Maps.Location(e.target.metadata.lat, e.target.metadata.lng),
				zoom: zoom
			});


			RenderCommunities(communities);
		}
	}

	// Funtion that replace placeholder with actual value
	function replacePlaceholder(community, name, index) {
		const communityTemplate = $('#listTemplate').html();
		let communityMarkup = communityTemplate;
		let optionMarkup = optionTemplate;

		communityMarkup = communityMarkup.replaceAll('{community}', community.title);
		communityMarkup = communityMarkup.replaceAll('{location}', community.location);
		communityMarkup = communityMarkup.replaceAll('{technology}', community.technologies.join(", "));
		communityMarkup = communityMarkup.replaceAll('{postcode}', community.postcode);
		communityMarkup = communityMarkup.replaceAll('{type}', community.type);
		communityMarkup = communityMarkup.replaceAll('{url}', community.url);

		optionMarkup = optionMarkup.replaceAll('{value}', index);
		optionMarkup = optionMarkup.replaceAll('{option}', community.title);

		$(communitiesList).append(communityMarkup);
		$(selectClass).append(optionMarkup);
	}


};

devMap();