import 'ol/ol.css';
import Map from 'ol/Map';

import SourceOSM from 'ol/source/OSM';
import SourceXYZ from 'ol/source/XYZ';
import SourceVector from 'ol/source/Vector';

import LayerVector from 'ol/layer/Vector';
import LayerTile from 'ol/layer/Tile';

import View from 'ol/View';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';

import { transform, fromLonLat } from 'ol/proj';
import { circular } from 'ol/geom/Polygon';
import { Control, FullScreen, defaults as defaultControls } from 'ol/control';

fetch('lastUpdated.json').then(res => res.json()).then(json => {
		document.title = "Bike-Map (Stand: " + json.lastUpdated + ")"
});

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
		}
	);
});

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

	layers: [
		new LayerTile({
			className: 'grayscale',
			source: new SourceOSM()
		}),

		new LayerTile({
			source: new SourceXYZ({
				url: './tiles/{z}/{x}/{y}.png',
				minZoom: 6,
				maxZoom: 16
			}),
		}),

		ownLocationLayer
	],

	view: new View({
		center: transform([10.1227652, 54.3232927], 'EPSG:4326', 'EPSG:3857'),
		zoom: 12,
		minZoom: 6,
		maxZoom: 16
	}),
});