<div id="map" class="w-full h-full"></div>

<script>
	import { Deck } from "@deck.gl/core";
	import { MapboxOverlay } from '@deck.gl/mapbox';
	import { MVTLayer } from "@deck.gl/geo-layers";
	import { MaskExtension } from '@deck.gl/extensions';
	import mapboxgl from 'mapbox-gl';
	import { GL } from "@luma.gl/constants";

	const MAPBOX_TOKEN = import.meta.env.PUBLIC_MAPBOX_TOKEN;

	// Initialize Mapbox map
	const map = new mapboxgl.Map({
		container: 'map',
		style: "mapbox://styles/mapbox/dark-v11",
		center: [-4.2026, 56.4907],
		zoom: 6,
		accessToken: MAPBOX_TOKEN,
	});

	map.on('load', () => {
		const firstLabelLayerId = map
				.getStyle()
				.layers.find((layer) => layer.type === "symbol").id;

		console.log(firstLabelLayerId);

		// Define the mask layer
		const areasLayer = new MVTLayer({
			id: "mask",
			data: "https://map.jacobweinbren.workers.dev/scottish-areas-ages/{z}/{x}/{y}.mvt",
			minZoom: 0,
			maxZoom: 22,
			getFillColor: [255, 255, 255, 255],
			beforeId: firstLabelLayerId,
			extensions: [new MaskExtension({ maskId: 'mask-layer' })],
			maskId: 'mask-layer',
		});

		// Define the intersected layer
		const buildingsLayer = new MVTLayer({
			id: "mask-layer",
			data: "https://map.jacobweinbren.workers.dev/scottish-intersected-ages/{z}/{x}/{y}.mvt",
			minZoom: 0,
			maxZoom: 22,
			operation: 'mask',
			beforeId: firstLabelLayerId
		});

		const deckOverlay = new MapboxOverlay({
			interleaved: true,
			layers: [areasLayer, buildingsLayer],
		});

		map.addControl(deckOverlay);
	});
</script>