'use strict'

let map = L.map('map');
map.setMaxBounds(L.latLngBounds(L.latLng(33.9033300, 134.2141300), L.latLng(34.08, 134.4836400)));

let default_marker = null;
(() => {
	map.setView([33.96515, 134.34889], 13);
	const params = new URLSearchParams(document.location.search);
	let lat = params.get('lat');
	let lon = params.get('lon');
	if(lat !== null && lon != null)
	{
		map.setView([lat, lon], 16);
		default_marker = L.marker([lat, lon]);
		default_marker.addTo(map);
	}
})();

//L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
L.tileLayer('/{z}/{x}/{y}.png', {
	minZoom: 13,
	maxZoom: 19,
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);


// Click event
let popup = L.popup();
function onMapClick(event) {
	popup
		.setLatLng(event.latlng)
		.setContent(`<div>Latitude: ${event.latlng.lat}</div>
			<div>Longitude: ${event.latlng.lng}</div>
			<div><a href='/?lat=${event.latlng.lat}&lon=${event.latlng.lng}'>link</a></div>`)
		.openOn(map);
}
map.on('click', onMapClick);

// Markers
let markers = {};
let categories = {};
fetch('/marker.json').then(response => response.json()).then(marker_data => {
	const params = new URLSearchParams(document.location.search);
	let default_place = params.get('place');
	for(let category_name in marker_data)
	{
		const category_data = marker_data[category_name];
		let category_markers = [];
		let icon = L.icon({iconUrl: `/images/${category_data.icon}`, iconSize: [32, 32]});
		category_data.places.forEach(marker_info => {
			const marker = L.marker(
				[marker_info.lat, marker_info.lon],
				{title: marker_info.name, icon: icon}).bindPopup(
					`<h3>${marker_info.name}</h3>
					<div class="description">${marker_info.description}</div>
					<div><a href="/?place=${marker_info.name}">link<\a></div>`);
			category_markers.push(marker);
			if(marker_info.name === default_place)
			{
				marker.addTo(map);
				map.setView([marker_info.lat, marker_info.lon], 16);
			}
		});
		categories[category_name] = {
			icon: icon, icon_url: `/images/${category_data.icon}`, name: category_data.name, enable: false};
		markers[category_name] = category_markers;
	}

	// Menu
	let menu = L.control();
	menu.onAdd = _map => {
		let div = L.DomUtil.create('div', 'menu')
		for(let category_name in markers)
		{
			let category_elt = document.createElement('div');
			category_elt.classList.add('menu-category');
			category_elt.classList.add('menu-disable');

			let category_icon = document.createElement('img');
			category_icon.src = categories[category_name].icon_url;
			category_elt.appendChild(category_icon);

			let category_label = document.createElement('label');
			category_label.innerHTML = categories[category_name].name;
			category_elt.appendChild(category_label);

			category_elt.onclick = event => {
				if(categories[category_name].enable)
				{
					category_elt.classList.add('menu-disable');
					markers[category_name].forEach(marker => { marker.remove(); });
				}
				else
				{
					markers[category_name].forEach(marker => { marker.addTo(map); });
					category_elt.classList.remove('menu-disable');
				}
				categories[category_name].enable = !categories[category_name].enable;
				event.preventDefault();
				event.stopPropagation();
			};
			div.appendChild(category_elt);
		}
		return div;
	};
	menu.addTo(map);
});