<template>
    <div class="map-wrap">
        <div id="map" class="map" ref="mapContainer"></div>
    </div>
</template>


<script>
import maplibregl from "maplibre-gl";
import { markRaw, onMounted, onUnmounted, reactive, shallowRef, } from "vue";
export default {
    name: "item-map-component",
    props: {
        internal_id: {
            type: String,
            required: true,
        },
        x_coord: {
            required: true,
        },
        y_coord: {
            required: true,
        },
    },
    setup(props, _context) {
        const mapContainer = shallowRef(null);
        const map = shallowRef(null);

        onMounted(() => {
            const apiKey = "pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2pncDUwcnRmNDQ4ZjJ4czdjZXMzaHZpNyJ9.3rFyYRRtvLUngHm027HZ7A";

            map.value = markRaw(new maplibregl.Map({
                container: mapContainer.value, // container id
                // DOCS: https://maplibre.org/maplibre-gl-js-docs/style-spec/
                style: {
                    version: 8,
                    sources: {},
                    layers: []
                },
                // we cut our map below, compensate for it while centering
                center: [props.y_coord, props.x_coord - 25], // starting position [lng, lat]
                zoom: 2, // starting zoom
                maxZoom: 10
            }));

            map.value.on('load', () => {
                map.value.addSource('basemap-source', {
                    'type': 'raster',
                    'tiles': [`https://api.mapbox.com/styles/v1/ghermant/cl8vg2r97001m14o4c2qzw9t6/tiles/256/{z}/{x}/{y}@2x?access_token=${apiKey}`]
                })

                map.value.addLayer(
                    {
                        'id': 'basemap-layer',
                        'type': 'raster',
                        'source': 'basemap-source',
                        'paint': {}
                    }
                );

                map.value.addSource('samples', {
                    'type': 'vector',
                    "tiles": ["http://localhost:8080/martin/public.geodata/{z}/{x}/{y}.pbf"],
                    'promoteId': 'fadr',
                });

                map.value.addLayer({
                    'id': 'samples-layer',
                    'source': 'samples',
                    'source-layer': 'public.geodata',
                    'type': 'circle',
                    'paint': {
                        'circle-stroke-width': 1,
                        'circle-stroke-color': '#FFFFFF',
                        'circle-color': '#d95f0e',
                        'circle-opacity': 0.8,
                        'circle-radius': 16
                    },
                    filter: ["==", ["get", "internal_id"], props.internal_id]
                });
            });

        });

        onUnmounted(() => {
            // TODO: remove even listeners too
            map.value?.remove();
        })


        return {
            map, mapContainer,
        }
    }
}

</script>


<style lang="css">
.map-wrap {
    position: relative;
    height: 100vh;
    width: 100%;
}

.map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    /* z-index: -1; */
}
</style>