<script>
	import { getContext } from 'svelte';
	let classNames = undefined;
	export { classNames as class };
	export let popup = undefined;
	let showContents = false;
	let popupOpen = false;
	const layer = getContext('layer')();

	async function createPopup(popupElement) {
        const L = await import('leaflet');
		popup = L.popup().setContent(popupElement);
		layer.bindPopup(popup);
		layer.on('popupopen', (e) => {
			popupOpen = true;
			showContents = true;
		});
		layer.on('popupclose', () => {
			popupOpen = false;
			// Wait for the popup to completely fade out before destroying it.
			// Otherwise the fade out looks weird as the contents disappear too early.
			setTimeout(() => {
				if (!popupOpen) {
					showContents = false;
				}
			}, 500);
		});
		return {
			destroy() {
				if (popup) {
					layer.unbindPopup();
					popup.remove();
					popup = undefined;
				}
			}
		};
	}
</script>

<div class="hidden">
	<div use:createPopup class={classNames}>
		{#if showContents}
			<slot />
		{/if}
	</div>
</div>
