/**
 * Load script or css files
 * @param {*} paths the array of paths
 * @param {*} callback callback function to get called after all items loaded 
 */
function loadScripts(paths, callback) {
  if (!Array.isArray(paths) || !paths.length) return callback && callback();
  var loader = function (src, handler) {
    var item, _src = src && src.toLowerCase();

    if (_src.endsWith('.css')) {
      item = this.document.createElement('link');
      item.type = 'text/css';
      item.href = src;
      item.rel = 'stylesheet';
    } else if (_src.includes('key') || _src.endsWith('.js')) {
      item = document.createElement("script");
      item.src = src;
      item.defer = true;
      item.async = true;
    }

    if (item) {
      item.onload = item.onreadystatechange = function () {
        item.onreadystatechange = item.onload = null;
        handler();
      }
      var head = document.getElementsByTagName("head")[0];
      (head || document.body).appendChild(item);
    }
  };
  (function run() {
    if (paths.length != 0) {
      loader(paths.shift(), run);
    } else {
      callback && callback();
    }
  })();
}

function initMapLib(params, cb) {
  // Skip download additional map lib if base background is Open Street Map
  if (params.base && params.base == 'osm')
    return cb && cb();

  // Dynamically load GGmap or Esri-leaflet map tiles according to the user's premium level
  // if not using OpenStreetMap => Load map library on premium level >=1 ? GGMap : Esri
  loadScripts(+params.premium ? [
    'https://maps.googleapis.com/maps/api/js?key=AIzaSyC-tHMYY66FidOuWn8u5byiLyNuBZJS58s',
    '/assets/js/Leaflet.GoogleMutant.js'] : ['/public/js/esri-leaflet.js'],
    cb);
}

function initMapBaseLayer(map, params) {
  if (!map || !L) return;

  var baseLayer, useGGMutant = false;
  if (params.base && params.base.toLowerCase() == 'osm') {
    baseLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      maxZoom: 19, maxNativeZoom: 17, keepBuffer: this.keepBuf
    });
  } else {
    if (+params.premium) {
      baseLayer = L.gridLayer.googleMutant({
        maxZoom: 19, maxNativeZoom: 18,
        type: 'hybrid',
        noAttr: true,
        styles: makeGMapStyle()
      });
      useGGMutant = true;
    } else {
      baseLayer = L.esri.basemapLayer('Imagery');
    }
  }
  var loadedFunc = function (e) {
    setTimeout(() => window.loaded = true, 50);
  };
  if (baseLayer) {
    // Mark as all tiles loaded; some delay to make sure all images drawn visually perfect    
    if (useGGMutant) baseLayer.on('spawned', loadedFunc);
    else baseLayer.on('load', loadedFunc);

    baseLayer.addTo(map);
  } else loadedFunc();
}

function loadStyles(paths, callback) {
  if (!Array.isArray(paths)) return callback && callback();
  var loader = function (url, handler) {
    var style = this.document.createElement('link');
    style.type = 'text/css';
    style.href = url;
    style.rel = 'stylesheet';

    style.onload = style.onreadystatechange = function () {
      style.onreadystatechange = style.onload = null;
      handler();
    }
    var head = document.getElementsByTagName("head")[0];
    (head || document.body).appendChild(style);
  };
  (function run() {
    if (paths.length != 0) {
      loader(paths.shift(), run);
    } else {
      callback && callback();
    }
  })();
}

function makeGMapStyle(labels, streets) {
  return [
    { elementType: 'labels', stylers: [{ visibility: (labels ? 'on' : 'off') }] },
    { featureType: 'road', stylers: [{ visibility: (streets ? 'on' : 'off') }] },
    { featureType: 'poi', stylers: [{ visibility: 'off' }] },
    { featureType: "transit", stylers: [{ visibility: "off" }] },
    { featureType: "transit.station.airport", stylers: [{ visibility: (streets ? 'on' : 'off') }] }
  ];
}

function toMeter(value, isUS) {
  return isUS ? value * 0.3048 : value;
}

function toArea(value, isUS) {
  var result = 0.0;
  if (!value) return result;
  result = isUS ? value / 4046.86 : value / 10000;
  return result;
}

function getUnit(isUS) {
  return isUS ? 'acre' : 'ha';
}