"use strict";
import Map from 'ol/Map.js';
import WebGLMap from 'ol/WebGLMap.js';
import {WEBGL} from 'ol/has.js'
import View from 'ol/View.js';
import {defaults as defaultControls, Attribution as AttributionControl} from 'ol/control.js';
import LayerSwitcher from 'ol-layerswitcher';
import {all as allStrategy} from 'ol/loadingstrategy';
import {bbox as bboxStrategy} from 'ol/loadingstrategy.js';
import LayerGroup from 'ol/layer/Group';
import LayerImage from 'ol/layer/Image';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM.js';
import XYZ from 'ol/source/XYZ';
import {fromLonLat, toLonLat} from 'ol/proj.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import VectorTileLayer from 'ol/layer/VectorTile.js';
import VectorTileSource from 'ol/source/VectorTile.js';
import OSMXML from 'ol/format/OSMXML.js';
import {Circle as CircleStyle, Fill, Stroke, Style, Text} from 'ol/style.js';


const coordinate_cccamp19 = fromLonLat([13.30735, 53.03127]);

var MapClass;

if (WEBGL) {
	MapClass = WebGLMap;
} else {
	MapClass = Map;
}

var styles = {
	'amenity': {
		'parking': new Style({
			stroke: new Stroke({
				color: 'rgba(170, 170, 170, 1.0)',
				width: 1
			}),
			fill: new Fill({
				color: 'rgba(170, 170, 170, 0.3)'
			})
		})
	},
	'building': {
		'.*': new Style({
			zIndex: 100,
			stroke: new Stroke({
				color: 'rgba(246, 99, 79, 1.0)',
				width: 1
			}),
			fill: new Fill({
				color: 'rgba(246, 99, 79, 0.3)'
			}),
			text: new Text({
				font: '12px Calibri,sans-serif',
				fill: new Fill({
					color: '#000'
				}),
				stroke: new Stroke({
					color: '#fff',
					width: 3
				})
			})
		})
	},
	'highway': {
		'service': new Style({
			stroke: new Stroke({
				color: 'rgba(255, 255, 255, 1.0)',
				width: 2
			})
		}),
		'.*': new Style({
			stroke: new Stroke({
				color: 'rgba(255, 255, 255, 1.0)',
				width: 3
			})
		})
	},
	'landuse': {
		'forest|grass|allotments': new Style({
			stroke: new Stroke({
				color: 'rgba(0, 0, 170, 1.0)',
				width: 1
			}),
			fill: new Fill({
				color: 'rgba(0, 0, 170, 0.3)'
			}),
			text: new Text({
				font: '12px Calibri,sans-serif',
				fill: new Fill({
					color: '#000'
				}),
				stroke: new Stroke({
					color: '#fff',
					width: 3
				})
			})
		})
	},
	'natural': {
		'tree': new Style({
			image: new CircleStyle({
				radius: 2,
				fill: new Fill({
					     color: 'rgba(140, 208, 95, 1.0)'
					   }),
				stroke: null
			})
		})
	},
	'name': {
		'.*': new Style({
			text: new Text({
				font: '12px Calibri,sans-serif',
				fill: new Fill({
					color: '#000'
				}),
				stroke: new Stroke({
					color: '#fff',
					width: 3
				})
			})
		})
	}
};

var vectorSource = new VectorSource({
	format: new OSMXML(),
	url: 'https://seafile.milliways.info/f/688170149668429f9598/?dl=1',
	strategy: allStrategy,
	attributions: '&#169;<a href="https://git.milliways.info/Milliways/cccamp19-map">Milliways</a>',
});

var tileLayer = new TileLayer({
	title: 'Photos',
	type: 'base',
	source: new XYZ({
		url: 'https://cdn.eventphone.de/maps/ziegeleipark/{z}/{x}/{y}.jpg',
		maxZoom: 22,
		minZoom: 14,
		attributions: 'Bianco Veigel & Rene Hansen',
		attributionsCollapsible: false,
	})
});

var vectorLayer =  new VectorLayer({
      title: 'Milliways Overlay',
      source: vectorSource,
      style: function(feature) {
        for (var key in styles) {
          var value = feature.get(key);
          if (value !== undefined) {
            for (var regexp in styles[key]) {
              if (new RegExp(regexp).test(value)) {
                var style = styles[key][regexp];
                var text = feature.get('name');
                if(text !== undefined ) {
                  if(feature.get('size') !== undefined) {
                    text += '\n' + feature.get('size');
                  }
                }
                style.getText().setText(text);
                return style;
              }
            }
          }
        }
        return null;
      }
});


var osmLayer = new TileLayer({
	title: 'OSM',
	type: 'base',
	source: new OSM()
});

var map = new MapClass({
	target: 'map',
	controls: defaultControls().extend([
		new LayerSwitcher()
	]),
	numZoomLevels: 19,
	units: 'm',
	layers: [
		new LayerGroup({
			title: 'Base Layers',
			layers: [
				tileLayer,
				osmLayer
			]
		}),
		new LayerGroup({
			title: 'overlays',
			layers: [
				vectorLayer
			]
		})
	],
	view: new View({
		center: coordinate_cccamp19,
		zoom: 17
	})
});


function parseURL(url) {

	var parser = document.createElement('a'),
		searchObject = {},
		queries, split, i;

	// Let the browser do the work
	parser.href = url;

	// Convert query string to object
	queries = parser.search.replace(/^\?/, '').split('&');
	for( i = 0; i < queries.length; i++ ) {
		split = queries[i].split('=');
		searchObject[split[0]] = split[1];
	}

	return {
		pathname: parser.pathname,
		search: parser.search,
		searchObject: searchObject,
		hash: parser.hash
	};

}

// start show coordinate in param and pars it [[[
function generateHash(info) {
	var params=[]
	for( var param in info.searchObject) {
		if(param!='') {
			params.push(`${param}=${info.searchObject[param]}`);
		}
	}
	return `#${info.pathname}?${params.join('&')}`;
}

var hash_info;

var coordinate_parser = /^(\d+)\/(-?\d*\.?\d*)\/(-?\d*\.?\d*)/;

function setCoordinate() {
	hash_info=parseURL(location.hash.substr(1))
	if( hash_info.searchObject['map'] && coordinate_parser.test(hash_info.searchObject['map'])){
		var map_info = coordinate_parser.exec(hash_info.searchObject['map']);
		map.getView().setCenter(fromLonLat([Number(map_info[3]), Number(map_info[2])]));
		map.getView().setZoom(map_info[1]);
	}
}
setCoordinate();
window.onhashchange = function() {
	setCoordinate()
};

map.on("moveend", function(evt){
	var map = evt.map;
	var [lon, lat] = toLonLat(map.getView().getCenter());
	var zoom = map.getView().getZoom();
	hash_info.searchObject['map'] = `${zoom}/${lat}/${lon}`;
	location.hash = generateHash(hash_info);
});
// end coordinate parser ]]]

document.map = map;

module.export= {
	mapa: map
}