/*
 * Copyright 2017 Google Inc. All rights reserved.
 *
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */

var map;

const locations = '/files/theme/locations.json';
const defaultCenter = {lat:43.43279009015258, lng:-96.8022108078003};
//const apiKey = 'AIzaSyB3egH7wHJZJdwb3AJxsmjDezIKGTWtkmE';
const apiKey = 'AIzaSyCK4JZbG-ARBRiMvDjKjsOv5KT2qgZrVHY';

// Style credit: https://snazzymaps.com/style/1/pale-dawn
const mapStyle = [
  {
    "featureType": "administrative",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "on"
      },
      {
        "lightness": 33
      }
    ]
  },
  {
    "featureType": "landscape",
    "elementType": "all",
    "stylers": [
      {
        "color": "#f2e5d4"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#c5dac6"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "on"
      },
      {
        "lightness": 20
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "all",
    "stylers": [
      {
        "lightness": 20
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#c5c6c6"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e4d7c6"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#fbfaf7"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "on"
      },
      {
        "color": "#acbcc9"
      }
    ]
  }
];

// Escapes HTML characters in a template literal string, to prevent XSS.
// See https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet#RULE_.231_-_HTML_Escape_Before_Inserting_Untrusted_Data_into_HTML_Element_Content
function sanitizeHTML(strings) {
  const entities = {'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'};
  let result = strings[0];
  for (let i = 1; i < arguments.length; i++) {
    result += String(arguments[i]).replace(/[&<>'"]/g, (char) => {
      return entities[char];
    });
    result += strings[i];
  }
  return result;
}

function recenterMap()
{
	
	var latlng = map.getCenter();
	var geocoder = new google.maps.Geocoder();
    var address = document.getElementById('addressInput').value;
	var radiusMi = document.getElementById('radiusSelect').value;
	/* https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=YOUR_API_KEY*/
    geocoder.geocode({ 'address': '{zip_code=' + address + '}' }, function (results, status) 
	{
		if (status == google.maps.GeocoderStatus.OK) 
		{
			var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            //alert("Latitude: " + latitude + "\nLongitude: " + longitude);
			//map.setCenter({lat: latitude, lng:longitude});
			
			// latlng is the point of the zipcode
			var circ = new google.maps.Circle();
			circ.setRadius(radiusMi * 1609.0);
			circ.setCenter({lat: latitude, lng:longitude});
			map.setCenter({lat: latitude, lng:longitude});
			map.fitBounds(circ.getBounds(), 0);
map.data.loadGeoJson(locations);
    // updates markers
    google.maps.event.trigger(map,'dragend');
			
			
			
        } else 
		{
			alert("Please enter a valid zip code.")
        }
	});
    
	
}	

function initMap() {

  // Create the map.
  map = new google.maps.Map(document.getElementsByClassName('map')[0], {
    zoom: 15,
    //center: {lat: 43.4433863, lng:-96.7164975},
	center: defaultCenter,
    styles: mapStyle
  });

/*
	try
	{
		if (navigator.geolocation) 
		{
			navigator.getlocation.getCurrentPosition(function(pos) 
			{
				map.setCenter({lat: pos.coords.latitude, lng:pos.coords.longitude});
			}, 
			{
				console.log("Unable to get current position.");
			});
		}
	}
	catch(err)
	{
		console.log("Error getting users location: " + err.message);
	}
*/

  // Load the stores GeoJSON onto the map.
  map.data.loadGeoJson(locations);

  // Define the custom marker icons, using the store's "category".
  /*
  map.data.setStyle(feature => {
    return {
      icon: {
        url: `/img/point.png`,
        scaledSize: new google.maps.Size(64, 64)
      }
    };
  });
  */

  
  const infoWindow = new google.maps.InfoWindow();
  infoWindow.setOptions({pixelOffset: new google.maps.Size(0, -30)});

  // Show the information for a store when its marker is clicked.
  map.data.addListener('click', event => {

    const category = event.feature.getProperty('category');
    const name = event.feature.getProperty('name');
    const description = event.feature.getProperty('description');
    const hours = event.feature.getProperty('hours');
	const address = event.feature.getProperty('address');
	const phone = event.feature.getProperty('phone');
	email = event.feature.getProperty('email');
	logo = event.feature.getProperty('logo');
    const position = event.feature.getGeometry().get();
	
	
	if (email === null || email === undefined)
	{
		email = 'Not available.';
	}
	
	if (logo === null || logo === undefined)
	{
		logo = 'https://promags.weebly.com/uploads/1/2/0/3/120391094/pm-logo-1_1_orig.png';
	}
	
    const content = sanitizeHTML`
      <!-- Need Logo -->
	  <!-- <img style="float:left; width:200px; margin-top:30px" src="img/logo_${category}.png"> -->
	  <img style="float:left; width:200px; margin-top:30px" src="${logo}">
      <div style="margin-left:220px; margin-bottom:20px;">
        <h2>${name}</h2><p>${description}</p>
        <p><b>Open:</b> ${hours}<br/><b>Phone:</b> ${phone}<br/><b>Email:</b> ${email}<br/>
		<b>Address:</b> ${address}</p>
        <!-- <p><img src="https://maps.googleapis.com/maps/api/streetview?size=350x120&location=${position.lat()},${position.lng()}&key=${apiKey}"></p> -->
      </div>
    `;

    infoWindow.setContent(content);
    infoWindow.setPosition(position);
    infoWindow.open(map);
  });

}