<template>
    <div
        id="leaflet-container"
        ref="$container"
    >
        <slot
            v-if="$map"
            :map="$map"
        />
    </div>
</template>

<script setup>
import {onMounted, provide, ref, shallowRef} from "vue";
import L from "~/vendor/leaflet";
import {useAzuraCast} from "~/vendor/azuracast";

const props = defineProps({
    attribution: {
        type: String,
        required: true
    }
});

const $container = ref(); // Template Ref
const $map = shallowRef();

provide('map', $map);

const {theme} = useAzuraCast();

onMounted(() => {
    // Init map
    const map = L.map($container.value);
    map.setView([40, 0], 1);

    $map.value = map;

    // Add tile layer
    const tileUrl = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/{theme}_all/{z}/{x}/{y}.png';
    const tileAttribution = 'Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap, under ODbL.';

    L.tileLayer(tileUrl, {
        theme: theme,
        attribution: tileAttribution,
    }).addTo(map);

    /*
    // Add fullscreen control
    const fullscreenControl = new L.Control.Fullscreen();
    map.addControl(fullscreenControl)
     */

});
</script>

<style lang="scss">
@import 'leaflet/dist/leaflet.css';

.leaflet-container {
    height: 300px;
    z-index: 0;
}
</style>
