//-----------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.eyJ1Ijoibm9ydnZyIiwiYSI6ImNreXQ5N2M2ajFiaTQyc3BlbmNuMnc1aTIifQ.ysZ1NdFhK8VMQFfAvvDhog";
mapboxgl.accessToken =
  'pk.eyJ1IjoidmVudG5vcndlYmRlc2lnbiIsImEiOiJjbTN6d2l3YmQyMHF6MnFzOXRydXFwcHMzIn0.RlVexmXVLU9n1JgvKh2lvA';
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

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

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const selectedMapLocations = [];

// 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: [-1.2886981345198094, 50.68373447658633], // Initial center coordinates [longitude, latitude]
  zoom: 9.9, // 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(8); // Set map zoom level for mobile size
}

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

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

// 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() {
  let locationLat = '';
  let locationLong = '';
  listLocations.forEach(function (location) {
    //console.log(location);
    //console.log(location.nodeName);
    const nodeType = String(location.nodeName);
    if (nodeType !== '#text') {
      const googleGeoCode = location.querySelector('#googleGeoCode').value;
      //console.log(googleGeoCode);
      if (googleGeoCode === '') {
        locationLat = '';
        locationLong = '';
        //console.log("Empty geocode");
      } else {
        const geoCodeArray = googleGeoCode.split(', ');
        locationLat = geoCodeArray[0];
        locationLong = geoCodeArray[1];
        //console.log(locationLat, locationLong);
      }

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

      if (mapLocations.features.includes(geoData) === false) {
        mapLocations.features.push(geoData);
      }
    }
  });
  // console.log(mapLocations);
}

// Invoke function
getGeoData();

// Define mapping function to be invoked later
function addMapPoints() {
  map.addSource('localWIs', {
    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: mapLocations,
    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',
    /* Add a GeoJSON source containing place coordinates and information. */
    source: 'localWIs',
    filter: ['!', ['has', 'point_count']],
    paint: {
      'circle-radius': 8,
      'circle-stroke-width': 1,
      //"circle-color": "#FFC700",
      //"circle-color": "#f2cd14",
      'circle-color': '#f2acb9',
      'circle-opacity': 1,
      'circle-stroke-color': '#00211b',
    },
  });

  map.addLayer({
    id: 'clusters',
    type: 'circle',
    source: 'localWIs',
    filter: ['has', 'point_count'],
    paint: {
      // Use step expressions (https://docs.mapbox.com/style-spec/reference/expressions/#step)
      // with three steps to implement three types of circles:
      //   * Blue, 20px circles when point count is less than 100
      //   * Yellow, 30px circles when point count is between 100 and 750
      //   * Pink, 40px circles when point count is greater than or equal to 750
      //'circle-color': [
      //    'step',
      //    ['get', 'point_count'],
      //    '#51bbd6',
      //    100,
      //    '#f1f075',
      //    750,
      //    '#f28cb1'
      //],
      'circle-stroke-width': 1,
      'circle-color': '#f2acb9',
      'circle-opacity': 1,
      'circle-stroke-color': '#00211b',
      'circle-radius': ['step', ['get', 'point_count'], 15, 50, 30, 750, 40],
    },
  });

  map.addLayer({
    id: 'cluster-count',
    type: 'symbol',
    source: 'localWIs',
    filter: ['has', 'point_count'],
    layout: {
      'text-field': ['get', 'point_count_abbreviated'],
      'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
      'text-size': 12,
    },
  });

  // When a click event occurs on a feature in the places layer, open a popup at the
  // location of the feature, with description HTML from its properties.
  map.on('click', 'locations', (e) => {
    // Copy coordinates array.
    const coordinates = e.features[0].geometry.coordinates.slice();
    const { description } = e.features[0].properties;

    // Ensure that if the map is zoomed out such that multiple
    // copies of the feature are visible, the popup appears
    // over the copy being pointed to.
    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
      coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
    }

    new mapboxgl.Popup().setLngLat(coordinates).setHTML(description).addTo(map);
  });

  // Center the map on the coordinates of any clicked circle from the 'locations' layer.
  map.on('click', 'locations', (e) => {
    map.flyTo({
      center: e.features[0].geometry.coordinates,
      speed: 0.5,
      curve: 1,
      easing(t) {
        return t;
      },
    });
  });

  map.on('click', 'clusters', (e) => {
    const features = map.queryRenderedFeatures(e.point, {
      layers: ['clusters'],
    });
    //console.log(features);
    const clusterId = features[0].properties.cluster_id;
    map.getSource('localWIs').getClusterExpansionZoom(clusterId, (err, zoom) => {
      if (err) return;

      map.easeTo({
        center: features[0].geometry.coordinates,
        zoom: zoom,
      });
    });
  });

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

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

//When map is loaded initialize with data
map.on('load', function (e) {
  addMapPoints();
});

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