//-----------MAPBOX SETUP CODE BELOW-----------
import mapboxgl from 'mapbox-gl'; // or "const mapboxgl = require('mapbox-gl');"
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// !!! REPLACE ACCESS TOKEN WITH YOUR OWN HERE !!!
//mapboxgl.accessToken = "pk.eyJ1IjoidmVudG5vcmxvY2FsIiwiYSI6ImNtaDNndDdtMzB3ODQybHF6OTh4OHh3bncifQ.OepPq3h4v4ysa3Vv01Qvvg";
mapboxgl.accessToken =
  'pk.eyJ1IjoidmVudG5vcmxvY2FsIiwiYSI6ImNtaDNndDdtMzB3ODQybHF6OTh4OHh3bncifQ.OepPq3h4v4ysa3Vv01Qvvg';
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

// create empty locations geojson object
const mapVenues = {
  type: 'FeatureCollection',
  features: [],
};

/* geolocation IS NOT available, handle it */
const currentLat = '50.72972747589827';
const currentLon = '-1.1597026481142139';

// get current location
// if ('geolocation' in navigator) {
//   navigator.geolocation.getCurrentPosition((position) => {
//     console.log(position.coords.latitude, position.coords.longitude);
//     currentLat = position.coords.latitude;
//     currentLon = position.coords.longitude;
//   });
// }

// Initialize map and load in #map wrapper
const map = new mapboxgl.Map({
  container: 'map',
  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  // !!! REPLACE MAP STYLE WITH YOUR OWN STYLE URL HERE (ASSOCIATED TO ACCESS TOKEN) !!!
  //style: "mapbox://styles/norvvr/ckyultx23000314qoa1uxwvg9",
  //style: 'mapbox://styles/ventnorwebdesign/cm69gn56c001s01pk1tp14xq7',
  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  // center: [currentLon, currentLat], // Initial center coordinates [longitude, latitude]
  // center: [-1.2880246194126153, 50.57703334517599],
  zoom: 14.5, // Initial zoom level
});

// Adjust the zoom level of the map based on the screen size
const mq = window.matchMedia('(max-width: 762px)');
if (mq.matches) {
  map.setZoom(15); // Set map zoom level for mobile size
}
// console.log('fitBounds');
// map.fitBounds([
//   //  [-1.1526427517517965, 50.73374640826303],
//   //  [-1.1669607111017897, 50.72610467402316],
//   [-1.1671970357183914, 50.72536467517697],
//   [-1.1515484599430654, 50.73378711471186],
// ]);

// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());

// disable mouse scroll
//map.scrollZoom.disable();
//map.dragPan.disable();

// Add geolocate control to the map.
map.addControl(
  new mapboxgl.GeolocateControl({
    positionOptions: {
      enableHighAccuracy: true,
    },
    // When active the map will receive updates to the device's location as it changes.
    trackUserLocation: true,
    // Draw an arrow next to the location dot to indicate which direction the device is heading.
    showUserHeading: true,
  })
);

//When map is loaded initialize with data
map.on('load', function (e) {
  // Load the map pin image
  map.loadImage(
    'https://cdn.prod.website-files.com/65cddaa433c3bb4745d6fb4d/68fb6a198ec861031c5de44a_map-pin.png',
    (error, image) => {
      if (error) throw error;
      map.addImage('mapPin', image);
    }
  );
  console.log('Add map points');
  addMapPoints();
});

/////////////////////////////////////////
// Get cms items
/////////////////////////////////////////
// const listLocations = document.getElementById('location-list').childNodes;
// console.log(listLocations);
// For each colleciton item, grab hidden fields and convert to geojson proerty
function getGeoData() {
  // const locationLat = '';
  // let locationLong = '';
  // listLocations.forEach(function (location) {
  //   //console.log(location);
  //   //console.log(location.nodeName);
  //   const nodeType = String(location.nodeName);
  //   if (nodeType !== '#text') {
  console.log('Start to find geoCode');
  let locationLat, locationLong;
  const googleGeoCode = document.getElementById('googleGeoCode').innerHTML;
  console.log(googleGeoCode);
  if (googleGeoCode === '') {
    locationLat = '';
    locationLong = '';
    console.log('Empty geocode');
  } else {
    const geoCodeArray = googleGeoCode.split(', ');
    locationLat = geoCodeArray[0];
    locationLong = geoCodeArray[1];
    map.setCenter([locationLong, locationLat]);
    console.log(locationLat, locationLong);
  }

  /*
  		let locationLat = location.querySelector("#locationLatitude").value;
	  	let locationLong = location.querySelector("#locationLongitude").value;
      */
  // const locationInfo = location.querySelector('.locations-map_card').innerHTML;
  // console.log(location.querySelector('.locations-map_card').innerHTML);
  const coordinates = [locationLong, locationLat];
  // const locationID = location.querySelector('#locationID').value;
  // console.log(locationID);
  const geoData = {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: coordinates,
    },
    //   properties: {
    //     id: locationID,
    //     description: locationInfo,
    //   },
  };
  console.log('geoData: ', geoData);

  mapVenues.features.push(geoData);
}

// Invoke function
getGeoData();

// Define mapping function to be invoked later
function addMapPoints() {
  map.addSource('locations', {
    type: 'geojson',
    // Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
    // from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
    data: mapVenues,
    // cluster: true,
    // clusterMaxZoom: 14, // Max zoom to cluster points on
    // clusterRadius: 5, // Radius of each cluster when clustering points (defaults to 50)
  });

  /* Add the data to your map as a layer */
  map.addLayer({
    id: 'locations',
    // type: 'circle',
    type: 'symbol',
    /* Add a GeoJSON source containing place coordinates and information. */
    source: 'locations',
    filter: ['!', ['has', 'point_count']],
    // paint: {
    //   'circle-radius': 9,
    //   'circle-stroke-width': 5,
    //   'circle-color': '#f4debd',
    //   'circle-opacity': 1,
    //   'circle-stroke-color': '#8b1847',
    // },
    layout: {
      'icon-image': 'mapPin', // reference the image
      'icon-size': 0.3,
    },
  });

  // Change the cursor to a pointer when the mouse is over the 'locations' layer.
  map.on('mouseenter', ['locations', 'parking', 'vendors', 'toilets'], () => {
    map.getCanvas().style.cursor = 'pointer';
  });

  // Change it back to a pointer when it leaves.
  map.on('mouseleave', ['locations', 'parking', 'vendors', 'toilets'], () => {
    map.getCanvas().style.cursor = '';
  });
}

/*
document.getElementById("map-tab").onclick = function(event) {
   //console.log("Map click"); 
   //await delay(50);
   map.resize();
};
*/