import 'ol/ol.css';
import 'ol-layerswitcher/dist/ol-layerswitcher.css';

import Map from 'ol/Map';
import View from 'ol/View';
import { transform } from 'ol/proj';
import LayerGroup from 'ol/layer/Group';
import LayerImage from 'ol/layer/Image';
import LayerTile from 'ol/layer/Tile';
import LayerVector from 'ol/layer/Vector';

import SourceImageArcGISRest from 'ol/source/ImageArcGISRest';
import SourceTileArcGISRest from 'ol/source/TileArcGISRest';
import SourceWMS from 'ol/source/TileWMS';
import SourceOSM from 'ol/source/OSM';
import SourceXYZ from 'ol/source/XYZ';
import SourceVector from 'ol/source/Vector';

import Attribution from 'ol/control/Attribution';

import { fromLonLat } from 'ol/proj';
import Feature from 'ol/Feature';
import { circular } from 'ol/geom/Polygon';
import Point from 'ol/geom/Point';

import {Control, FullScreen, defaults as defaultControls} from 'ol/control';
import LayerSwitcher from 'ol-layerswitcher';


const source           = new SourceVector();
const ownLocationLayer = new LayerVector({ source: source });

const locate = document.createElement('div');
locate.className = 'ol-control ol-unselectable locate';
locate.innerHTML = '<button title="Locate me">◎</button>';
locate.addEventListener('click', function() {
	let buttonPressed = true;

	navigator.geolocation.watchPosition(
		function (pos) {
			const coords   = [pos.coords.longitude, pos.coords.latitude];
			const accuracy = circular(coords, pos.coords.accuracy);

			source.clear(true);
			source.addFeatures([
				new Feature(accuracy.transform('EPSG:4326', map.getView().getProjection())),
				new Feature(new Point(fromLonLat(coords)))
			]);

			if (buttonPressed) {
				buttonPressed = false;
				map.getView().fit(source.getExtent(), {
					maxZoom: 18,
					duration: 500
				});
			}
		},

		function (error) {
			alert(`ERROR: ${error.message}`);
		},

		{
			enableHighAccuracy: true
		}
	);
});

let telefonicaAttribution = '&copy; <a href="https://www.o2online.de/service/netzabdeckung/" target="_blank">O2 Netzabdeckung</a>';
let telefonicaVersion     = '269';
let telefonicaURL         = 'https://dccb7552-tiles.spatialbuzz.net/tiles/o2_de-v' + telefonicaVersion + '/styles/o2_de_v' + telefonicaVersion + '_';

let telekomAttribution    = '&copy; <a href="https://t-map.telekom.de" target="_blank">Telekom Netzabdeckung</a>';
let telekomURL            = 'https://t-map.telekom.de/arcgis/rest/services/public/coverage/MapServer';

let vodafoneAttribution   = '&copy; <a href="https://netmap.vodafone.de/cokart-client/index.html?lang=de&app=cokart_4x" target="_blank">Vodafone Netzkarte</a>';
let vodafoneURL           = 'https://wifionic.de/vodafone-map/MapServer';

let a1Attribution         = '&copy; <a href="https://www.a1.net/hilfe-support/netzabdeckung/" target="_blank">A1 Netzabdeckungz</a>';
let a1URL                 = 'https://cdn2.a1.net/final/tiles/a1/LIVE/tiles-0/{z}/{x}/{y}.png';

let magentaAttribution    = '&copy; <a href="https://app.wigeogis.com/kunden/tmobile/map.php" target="_blank">T-Mobile Speedmap</a>';
let magentaURL            = 'https://wifionic.de/magenta-at-map';

let swisscomAttribution   = '&copy; <a href="https://scmplc.begasoft.ch/plcapp/pages/gis/netzabdeckung.jsf" target="_blank">Swisscom Mobilfunk-Abdeckung</a>';
let swisscomURL           = 'https://scmplc.begasoft.ch/plcapp/netzabdeckung/swisscom?layer=';

let sunriseAttribution    = '&copy; <a href="https://www.sunrise.ch/de/privatkunden/mobil-abos/mobilnetz/netzabdeckung/netzabdeckungskarte.html" target="_blank">Sunrise Netzbdeckung</a>';
let sunriseURL            = 'https://maps.sunrise.ch/cgi-bin/mapserv?map=/opt/app/data/sunrise_coverages_2019.map&LAYERS=coverage&mode=tile&tilemode=gmap&tile=';

let saltAttribution       = '&copy; <a href="https://www.salt.ch/de/coverage/" target="_blank">Salt Netzbdeckung</a';
let saltURL               = 'https://mapserver.salt.ch/public/gmaps';

let o2czAttribution       = '&copy; <a href="https://www.o2.cz/osobni/mapa-pokryti" target="_blank">O2 Mapa pokrytí</a';
let o2czVersion           = '230505.4';
let o2czURL               = 'https://mapy.o2.cz/o2mapy/data/tiles/'

let vodafoneczURL         = 'https://lte.mapy.vodafone.cz/tiles/';
let vodafoneczAttribution = '&copy; <a href="https://www.vodafone.cz/mapa-pokryti/" target="_blank">Vodafone Mapa pokrytí</a';


var map = new Map({
	target: 'map',
	maxTilesLoading: 512,
	controls: defaultControls().extend([ new FullScreen(), new Control({ element: locate }), new LayerSwitcher({ startActive: true, activationMode: 'click', reverse: true }) ]),

	layers: [
		new LayerGroup({
			'title': 'Grundkarte',
			layers: [
				new LayerTile({
					title: 'OSM DE',
					type: 'base',
					visible: true,
					source: new SourceXYZ({
						url: "https://gauss.openstreetmap.de/{z}/{x}/{y}.png",
						attributions: [ 'Tiles &copy; <a href="https://openstreetmap.de/">OpenStreetMap - Deutschland</a>', '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.' ]
					})
				}),
				new LayerTile({
					title: 'OSM',
					type: 'base',
					visible: true,
					source: new SourceOSM()
				})
			]
		}),

		ownLocationLayer,


		//
		// Czech layer
		//


		new LayerGroup({
			title: 'CZ',
			layers: [

				//
				// o2 CZ
				//

				new LayerTile({
					title: 'o2-cz 5G',
					visible: false,
					opacity: 0.3,
					source: new SourceXYZ({
						url: o2czURL + '5g/' + o2czVersion + '/{z}/{x}/{y}.png',
						attributions: [ o2czAttribution ],
						minZoom: 3,
						maxZoom: 23
					})
				}),
				new LayerTile({
					title: 'o2-cz 4G',
					visible: false,
					opacity: 0.3,
					source: new SourceXYZ({
						url: o2czURL + '4g/' + o2czVersion + '/{z}/{x}/{y}.png',
						attributions: [ o2czAttribution ],
						minZoom: 3,
						maxZoom: 23
					})
				}),
				new LayerTile({
					title: 'o2-cz 2G',
					visible: false,
					opacity: 0.3,
					source: new SourceXYZ({
						url: o2czURL + '2g/'  + o2czVersion + '/{z}/{x}/{y}.png',
						attributions: [ o2czAttribution ],
						minZoom: 3,
						maxZoom: 23
					})
				}),

				//
				// Vodafone CZ
				//

				new LayerTile({
					title: 'Vodafone.cz 5G',
					visible: false,
					opacity: 0.3,
					source: new SourceXYZ({
						url: vodafoneczURL + '5g700_5g1800_5g2100_5g3500/{z}/{x}/{y}.png',
						attributions: [ vodafoneczAttribution ],
						minZoom: 3,
						maxZoom: 23
					})
				}),
				new LayerTile({
					title: 'Vodafone.cz 4G',
					visible: false,
					opacity: 0.3,
					source: new SourceXYZ({
						url: vodafoneczURL + 'lte800_lte1800_lte2100_lte2600_ltea_5g700_5g1800_5g2100_5g3500//{z}/{x}/{y}.png',
						attributions: [ vodafoneczAttribution ],
						minZoom: 3,
						maxZoom: 23
					})
				})
			]
		}),

		//
		// Swiss layer
		//

		new LayerGroup({
			title: 'CH',
			layers: [

				//
				// Swisscom
				//

				new LayerTile({
					title: 'Swisscom: GSM',
					visible: false,
					opacity: 0.3,
					source: new SourceXYZ({
						url: swisscomURL + 'gsm&zoom={z}&x={x}&y={y}',
						attributions: [ swisscomAttribution ],
						minZoom: 3,
						maxZoom: 23
					})
				}),

				new LayerTile({
					title: 'Swisscom: UMTS',
					visible: false,
					opacity: 0.3,
					source: new SourceXYZ({
						url: swisscomURL + 'umts&zoom={z}&x={x}&y={y}',
						attributions: [ swisscomAttribution ],
						minZoom: 3,
						maxZoom: 23
					})
				}),

				new LayerTile({
					title: 'Swisscom: LTE',
					visible: false,
					opacity: 0.3,
					source: new SourceXYZ({
						url: swisscomURL + 'lte;lteAdvanced&zoom={z}&x={x}&y={y}',
						attributions: [ swisscomAttribution ],
						minZoom: 3,
						maxZoom: 23
					})
				}),

				new LayerTile({
					title: 'Swisscom: NR',
					visible: false,
					opacity: 0.3,
					source: new SourceXYZ({
						url: swisscomURL + 'newRadioWide;newRadioFast&zoom={z}&x={x}&y={y}',
						attributions: [ swisscomAttribution ],
						minZoom: 3,
						maxZoom: 23
					})
				}),


				//
				// Sunrise
				//

				new LayerTile({
					title: 'Sunrise',
					visible: false,
					opacity: 0.3,
					source: new SourceXYZ({
						url: sunriseURL + '{x}+{y}+{z}',
						attributions: [ sunriseAttribution ],
						minZoom: 3,
						maxZoom: 23
					})
				}),


				//
				// Salt
				//

				new LayerTile({
					title: 'Salt: GSM + UMTS',
					visible: false,
					opacity: 0.3,
					source: new SourceXYZ({
						url: saltURL + '2G3G@GoogleMapsCompatible/{z}/{x}/{y}.png',
						attributions: [ saltAttribution ],
						maxZoom: 19
					})
				}),

				new LayerTile({
					title: 'Salt: GSM + UMTS + LTE',
					visible: false,
					opacity: 0.3,
					source: new SourceXYZ({
						url: saltURL + '2G3G4G@GoogleMapsCompatible/{z}/{x}/{y}.png',
						attributions: [ saltAttribution ],
						maxZoom: 19
					})
				})
			]
		}),



		//
		// Austrian layer
		//

		new LayerGroup({
			title: 'AT',
			layers: [

				//
				// A1
				//

				new LayerTile({
					title: 'A1: Kombi-Layer',
					visible: false,
					opacity: 0.7,
					source: new SourceXYZ({
						url: a1URL,
						attributions: [ a1Attribution ],
						maxZoom: 10
					})
				}),


				//
				// Magenta
				//

				new LayerTile({
					title: 'Magenta: Internet',
					visible: false,
					opacity: 0.7,
					source: new SourceWMS({
						url: magentaURL,
						params: { LAYERS: 'tmobile:tmobile', SLD: 'http://appserverpu.wigeo.lan/kunden/tmobile/sld/internet.xml' },
						attributions: [ magentaAttribution ],
						maxZoom: 10
					})
				}),

				new LayerTile({
					title: 'Magenta: NR',
					visible: false,
					opacity: 0.7,
					source: new SourceWMS({
						url: magentaURL,
						params: { LAYERS: 'tmobile:tmobile', SLD: 'http://appserverpu.wigeo.lan/kunden/tmobile/sld/5g.xml' },
						attributions: [ magentaAttribution ],
						maxZoom: 10
					})
				}),
			]
		}),



		//
		// Germany layers
		//

		new LayerGroup({
			title: 'DE',
			layers: [

				//
				// Vodafone Germany
				//

				new LayerImage({
					title: 'Vodafone: GSM',
					visible: false,
					opacity: 0.3,
					source: new SourceImageArcGISRest({
						url: vodafoneURL,
						params: { LAYERS: 'show:4,5' },
						attributions: [ vodafoneAttribution ],
					})
				}),

				new LayerImage({
					title: 'Vodafone: LTE',
					visible: false,
					opacity: 0.3,
					source: new SourceImageArcGISRest({
						url: vodafoneURL,
						params: { LAYERS: 'show:110' },
						attributions: [ vodafoneAttribution ],
					})
				}),

				new LayerImage({
					title: 'Vodafone: NR',
					visible: false,
					opacity: 0.3,
					source: new SourceImageArcGISRest({
						url: vodafoneURL,
						params: { LAYERS: 'show:105' },
						attributions: [ vodafoneAttribution ],
					})
				}),


				//
				// Telekom Germany
				//

				new LayerImage({
					title: 'Telekom: GSM',
					visible: false,
					opacity: 0.3,
					source: new SourceImageArcGISRest({
						url: telekomURL,
						ratio: 1,
						params: { LAYERS: 'show:5' },
						attributions: [ telekomAttribution ],
					})
				}),

				new LayerImage({
					title: 'Telekom: LTE',
					visible: false,
					opacity: 0.3,
					source: new SourceImageArcGISRest({
						url: telekomURL,
						ratio: 1,
						params: { LAYERS: 'show:3' },
						attributions: [ telekomAttribution ],
					})
				}),

				new LayerImage({
					title: 'Telekom: NR',
					visible: false,
					opacity: 0.3,
					source: new SourceImageArcGISRest({
						url: telekomURL,
						ratio: 1,
						params: { LAYERS: 'show:6' },
						attributions: [ telekomAttribution ],
					})
				}),


				//
				// Telefonica Germany
				//

				new LayerTile({
					title: 'o2: GSM',
					visible: false,
					opacity: 0.3,
					source: new SourceXYZ({
						url: telefonicaURL + '2g/{z}/{x}/{y}.png',
						attributions: [ telefonicaAttribution ],
						minZoom: 11,
						maxZoom: 19
					})
				}),

				new LayerTile({
					title: 'o2: UMTS',
					visible: false,
					opacity: 0.3,
					source: new SourceXYZ({
						url: telefonicaURL + '3g/{z}/{x}/{y}.png',
						attributions: [ telefonicaAttribution ],
						minZoom: 11,
						maxZoom: 19
					})
				}),

				new LayerTile({
					title: 'o2: LTE',
					visible: false,
					opacity: 0.3,
					source: new SourceXYZ({
						url: telefonicaURL + '4g/{z}/{x}/{y}.png',
						attributions: [ telefonicaAttribution ],
						minZoom: 11,
						maxZoom: 19
					})
				}),

				new LayerTile({
					title: 'o2: NR',
					visible: false,
					opacity: 0.3,
					source: new SourceXYZ({
						url: telefonicaURL + '5g/{z}/{x}/{y}.png',
						attributions: [ telefonicaAttribution ],
						minZoom: 11,
						maxZoom: 19
					})
				})
			]
		}),



		new LayerTile({
			title: 'Bahnstrecken',
			visible: false,
			source: new SourceXYZ({
				url: "https://{a-c}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png",
				attributions: [ 'Tiles &copy; <a href="https://openrailwaymaps.org/">OpenRailwayMaps</a>', '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.' ]
			})
		})

	],

	view: new View({
		center: transform([10.150, 54.397], 'EPSG:4326', 'EPSG:3857'),
		zoom: 11
	})
});