"use strict";

import Config from './ClientConfig.mjs';

import L from 'leaflet';

import LayerGateways from './LayerGateways.mjs';
import LayerAI from './LayerAI.mjs';
import Guage from './Guage.mjs';

class MapManager {
	constructor() {
		
	}
	
	async setup() {
		document.querySelector("main").classList.add("working", "working-visual");
		this.map = L.map("map", {
			fullscreenControl: true
		});
		this.map.setView(Config.default_location, Config.default_zoom);
		
		// Add the OpenStreetMap tile layer
		this.layer_openstreet = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
			id: "openstreetmap",
			maxZoom: 19,
			attribution: "&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap contributors</a>"
		}).addTo(this.map);
		
		// Add the gateway markers layer
		this.layer_gateways = new LayerGateways(this.map);
		await this.layer_gateways.setup();
		
		this.setup_guage();
		
		// Add the AI coverage prediction layer
		this.layer_ai = new LayerAI(this.map);
		await this.layer_ai.setup();
		
		this.setup_layer_control();
		
		
		document.querySelector("main").classList.remove("working", "working-visual");
	}
	
	setup_layer_control() {
		this.layer_control = L.control.layers({
			// Base layer(s)
			"OpenStreetMap": this.layer_openstreet
		}, { // Overlay(s)
			"Gateways": this.layer_gateways.layer,
			// FUTURE: Have 1 heatmap layer per reading type?
			"Heatmap": this.layer_ai.layer
		}, { // Options
			
		});
		this.layer_control.addTo(this.map);
	}
	
	setup_guage() {
		this.guage = new Guage(document.getElementById("canvas-guage"));
		this.guage.set_spec({
			gradient: Config.colour_scale,
			max: -30
		});
		this.guage.render();
	}
}

export default MapManager;