// SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc>
//
// SPDX-License-Identifier: AGPL-3.0-or-later

// Visit The Stimulus Handbook for more details
// https://stimulusjs.org/handbook/introduction
//

import { Controller } from "stimulus"
import "leaflet/dist/leaflet.css"
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package
import L from "leaflet"


export default class extends Controller {
    static targets = [ "container" ]

    initialize() {

    }

    connect() {
        this.map = L.map(this.containerTarget, {
            zoomDelta: 0.5,
            zoomSnap: 0.5,
        }).setView(this._coordinates(), this._zoom());

        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
		        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery <a href="https://www.mapbox.com/">Mapbox</a>',
		        maxZoom: 18,
		        id: 'mapbox/streets-v11',
		        tileSize: 512,
		        zoomOffset: -1,
		        accessToken: 'pk.eyJ1IjoibmVtYWVsIiwiYSI6ImNrZzBrYjBudTB3bnMyenFmNWtrN3h3bmMifQ.Rkeyhm-9iIQOV7NAMA5LaA'
        }).addTo(this.map);
    }

    disconnect() {
        this.map.remove();
        console.log('Map controller disconnected.')
    }

    _coordinates() {
        return [this.data.get('latitude'), this.data.get('longitude')];
    }

    _zoom() {
        return this.data.get('zoom');
    }

}