<style lang="scss">
    @import "../../style/modules/globe2";
</style>

<script lang="ts">
    import { getContext, onMount } from 'svelte'
    import { fly } from 'svelte/transition'
    import { quartOut } from 'svelte/easing'
    import { Globe, type Marker } from '$modules/globe2'
    import { getRandomItem, debounce } from '$utils/functions'
    // Components
    import Image from '$components/atoms/Image.svelte'

    export let type: string = undefined
    export let enableMarkers: boolean = true
    export let speed: number = 0.003
    export let pane: boolean = import.meta.env.DEV
    export let width: number = undefined

    let innerWidth: number
    let globeParentEl: HTMLElement, globeEl: HTMLElement
    let globe: any
    let observer: IntersectionObserver
    let animation: number
    let popinOpen: boolean = false
    let clusterLocations: Marker[] = []

    $: globeResolution = innerWidth > 1440 && window.devicePixelRatio > 1 ? '4k' : '2k'

    const { continents, locations }: any = getContext('global')
    const randomContinent: any = getRandomItem(continents)
    const markers = locations.map(({ name, slug, country, coordinates: { coordinates }}): Marker => ({
        name,
        slug,
        country: { ...country },
        lat: coordinates[1],
        lng: coordinates[0],
    }))


    onMount(() => {
        globe = new Globe({
            el: globeEl,
            parent: globeParentEl,
            mapFile: `/images/globe-map-${globeResolution}.png`,
            dpr: Math.min(Math.round(window.devicePixelRatio), 2),
            autoRotate: true,
            speed,
            rotationStart: randomContinent.rotation,
            enableMarkers,
            markers,
            pane,
        })

        // TODO: Define cluster locations and position it
        clusterLocations = locations.filter((loc: any) => loc.country.slug === 'france')

        resize()

        // Render only if in viewport
        observer = new IntersectionObserver(entries => {
            entries.forEach(({ isIntersecting }: IntersectionObserverEntry) => {
                if (isIntersecting) {
                    update()
                    console.log('render globe2')
                } else {
                    stop()
                    console.log('stop globe2')
                }
            })
        }, { threshold: 0 })
        observer.observe(globeEl)


        // Destroy
        return () => {
            destroy()
            observer && observer.disconnect()
        }
    })


    /**
     * Methods
     */
    // Update
    const update = () => {
        animation = requestAnimationFrame(update)
        globe.render()
    }

    // Stop
    const stop = () => {
        cancelAnimationFrame(animation)
    }

    // Resize
    const resize = debounce(() => {
        globe.resize()
    }, 100)

    // Destroy
    const destroy = () => {
        stop()
        globe.destroy()
    }
</script>

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

<div class="globe" bind:this={globeParentEl}
    class:is-cropped={type === 'cropped'}
    style:--width={width ? `${width}px` : null}
>
    <div class="globe__inner">
        <div class="globe__canvas" bind:this={globeEl} />
    </div>

    {#if enableMarkers}
        <ul class="globe__markers" data-sveltekit-noscroll>
            {#each markers as { name, slug, country, lat, lng }}
                <li class="globe__marker" data-location={slug} data-lat={lat} data-lng={lng}>
                    <a href="/{country.slug}/{slug}">
                        <dl>
                            <dt class="title-small">{name}</dt>
                            <dd class="text-label text-label--small">{country.name}</dd>
                        </dl>
                    </a>
                </li>
            {/each}

            <li class="globe__cluster">
                <button on:click={() => popinOpen = !popinOpen} aria-label="{popinOpen ? 'Close' : 'Open'} cluster" />
            </li>
        </ul>

        {#if popinOpen}
            <div class="globe__popin" transition:fly={{ y: 16, duration: 500, easing: quartOut }}>
                <ul data-sveltekit-noscroll>
                    {#each clusterLocations as { name, slug, country }}
                        <li>
                            <a href="/{country.slug}/{slug}" tabindex="0">
                                <Image
                                    class="flag"
                                    id={country.flag.id}
                                    sizeKey="square-small"
                                    width={32} height={32}
                                    alt="Flag of {country.name}"
                                />
                                <dl>
                                    <dt class="title-small">{name}</dt>
                                    <dd class="text-label text-label--small">{country.name}</dd>
                                </dl>
                            </a>
                        </li>
                    {/each}
                </ul>
                <button class="close" aria-label="Close" on:click={() => popinOpen = false}>
                    <svg width="9" height="9">
                        <use xlink:href="#cross" />
                    </svg>
                </button>
            </div>
        {/if}
    {/if}
</div>