import { Controller } from "@hotwired/stimulus"
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 iconRetinaUrl from '../images/leaflet/marker-icon-2x.png';
import shadowUrl from 'leaflet/dist/images/marker-shadow.png';

export default class extends Controller {
    static values = {
        latitude: Number,
        longitude: Number
    }

    init() {
    }

    connect() {

        delete L.Icon.Default.prototype._getIconUrl
        L.Icon.Default.mergeOptions({
            // iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
            // iconUrl: require('leaflet/dist/images/marker-icon.png'),
            // shadowUrl: require('leaflet/dist/images/marker-shadow.png')
            iconRetinaUrl: iconRetinaUrl,
            iconUrl: iconUrl,
            shadowUrl: shadowUrl,
        });

        this.initializeMap()
    }

    initializeMap() {
        // 创建地图实例
        this.map = L.map(this.element).setView(
            [this.latitudeValue, this.longitudeValue],
            4  // 缩放级别
        )

        // 添加地图图层
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(this.map)

        // 添加标记
        L.marker([this.latitudeValue, this.longitudeValue])
            .addTo(this.map)
            .bindPopup(document.querySelector('h1').textContent)
            .openPopup()
    }

    disconnect() {
        if (this.map) {
            this.map.remove()
        }
    }
}