<script>
    import { onMount } from 'svelte'
    import { locations } from 'utils/store'

    // Props
    export let type = ''
    let scope
    let globe

    // Functions
    const resize = () => {
        globe.resize()
        globe.update()
    }
    const update = () => {
        requestAnimationFrame(update)
        globe.update()
    }


    /*
    ** Run code when mounted
    */
    onMount(async () => {
        // Import libraries and code
        let InteractiveGlobe
        await import('globe/index').then(module => InteractiveGlobe = module.default)
        // Init the globe from library
        globe = new InteractiveGlobe({
            el: scope,
            texture: `/img/globe/map-${window.innerWidth >= 992 ? '3k' : '2k'}.png`,
            markers: [...$locations.map(location => {
                return {
                    name: location.name,
                    slug: location.slug,
                    countryName: location.country.name,
                    countrySlug: location.country.slug,
                    lat: location.coordinates.lat,
                    lng: location.coordinates.lng
                }
            })],
            cameraDistance: 3,
            onLinkClicked: () => {}
        })

        // Run the globe
        resize()
        update()
    })
</script>

<svelte:window on:resize={resize} />

{#if type === 'part'}
<div class="globe__cut">
    <div class="globe" bind:this={scope} />
</div>
{:else}
<div class="globe" bind:this={scope} />
{/if}
