/*
 * Small single-purpose Leaflet maps:
 *  - #escaperoom-detail-map : read-only pin on a room's detail page
 *  - #escaperoom-suggest-map : click to drop / move a pin on the "suggest a room"
 *    form, writing the coordinates into the hidden latitude/longitude fields.
 */
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

import iconUrl from 'leaflet/dist/images/marker-icon.png';
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
import shadowUrl from 'leaflet/dist/images/marker-shadow.png';

delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({ iconUrl, iconRetinaUrl, shadowUrl });

const OSM = {
    url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
    opts: {
        maxZoom: 19,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    },
};

function initDetailMap(el) {
    const lat = parseFloat(el.dataset.lat);
    const lng = parseFloat(el.dataset.lng);
    if (Number.isNaN(lat) || Number.isNaN(lng)) {
        return;
    }

    const map = L.map(el, { scrollWheelZoom: false }).setView([lat, lng], 15);
    L.tileLayer(OSM.url, OSM.opts).addTo(map);
    L.marker([lat, lng]).addTo(map);
}

function initSuggestMap(el) {
    const form = el.closest('form');
    const latField = form && form.querySelector('input[name$="[latitude]"]');
    const lngField = form && form.querySelector('input[name$="[longitude]"]');
    if (!latField || !lngField) {
        return;
    }

    const startLat = parseFloat(latField.value);
    const startLng = parseFloat(lngField.value);
    const hasStart = !Number.isNaN(startLat) && !Number.isNaN(startLng);

    const map = L.map(el).setView(hasStart ? [startLat, startLng] : [20, 0], hasStart ? 15 : 2);
    L.tileLayer(OSM.url, OSM.opts).addTo(map);

    let marker = hasStart ? L.marker([startLat, startLng], { draggable: true }).addTo(map) : null;

    const write = (latlng) => {
        latField.value = latlng.lat.toFixed(7);
        lngField.value = latlng.lng.toFixed(7);
        latField.dispatchEvent(new Event('change', { bubbles: true }));
    };

    if (marker) {
        marker.on('dragend', () => write(marker.getLatLng()));
    }

    map.on('click', (e) => {
        if (marker) {
            marker.setLatLng(e.latlng);
        } else {
            marker = L.marker(e.latlng, { draggable: true }).addTo(map);
            marker.on('dragend', () => write(marker.getLatLng()));
        }
        write(e.latlng);
    });
}

document.addEventListener('DOMContentLoaded', () => {
    const detail = document.getElementById('escaperoom-detail-map');
    if (detail) {
        initDetailMap(detail);
    }

    const suggest = document.getElementById('escaperoom-suggest-map');
    if (suggest) {
        initSuggestMap(suggest);
    }
});