<script lang="ts">    import { fade } from 'svelte/transition'
    import { browser } from '$app/env'
    import { onMount } from 'svelte'
    import dayjs from 'dayjs'
    import anime from 'animejs'
    import type { AnimeTimelineInstance } from 'animejs'
    // Components
    import Metas from '$components/Metas.svelte'
    import PageTransition from '$components/PageTransition.svelte'
    import Image from '$components/atoms/Image.svelte'
    import Heading from '$components/molecules/Heading.svelte'
    import EmailForm from '$components/molecules/EmailForm.svelte'
    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'

    export let data: any
    export let issues: any



    /**
     * Transition: Anime timeline
     */
     let timeline: AnimeTimelineInstance

    if (browser) {
        requestAnimationFrame(() => {
            // Setup animations
            timeline = anime.timeline({
                duration: 1600,
                easing: 'easeOutQuart',
                autoplay: false,
            })

            anime.set('.subscribe__top > *, .subscribe__issues', {
                opacity: 0,
                translateY: 24,
            })

            // Elements
            timeline.add({
                targets: '.subscribe__top > *, .subscribe__issues',
                opacity: 1,
                translateY: 0,
                delay: anime.stagger(200),
            }, 500)

            // Reveal each issue
            timeline.add({
                targets: '.subscribe__issues .issue',
                opacity: [0, 1],
                translateY: [16, 0],
                delay: anime.stagger(150),
                duration: 1000,
            }, 1000)
        })
    }


    onMount(() => {
        // Transition in
        requestAnimationFrame(() => {
            timeline.play()
        })
    })
</script>

<Metas
    title="Subscribe"
    description=""
    image=""
/>

<PageTransition name="subscribe">
    <div class="subscribe__top">
        <Heading
            text={data.newsletter_page_text}
        />

        <EmailForm />
    </div>

    <section class="subscribe__issues">
        <h2 class="title-small">Past Issues</h2>
        <ul>
            {#each issues as { issue, title, date_sent, link, thumbnail: { id } }}
                <li class="issue">
                    <a href={link} target="_blank" rel="external noreferrer noopener" tabindex="0">
                        <Image
                            id={id}
                            sizeKey="issue-thumbnail-small"
                            width={160} height={112}
                            alt="Issue {issue} thumbnail"
                        />
                        <dl>
                            <dt>Issue #{issue}</dt>
                            <dd>
                                <p>{title}</p>
                                <time>{dayjs(date_sent).format('DD/MM/YYYY')}</time>
                            </dd>
                        </dl>
                    </a>
                </li>
            {/each}
        </ul>
    </section>

    <InteractiveGlobe type="cropped" />
</PageTransition>


<script context="module" lang="ts">
    import { fetchAPI } from '$utils/api'

    /** @type {import('@sveltejs/kit').Load} */
    export async function load ({ url, params, fetch, session, stuff }) {
        const res = await fetchAPI(`
            query {
                settings {
                    newsletter_page_text
                }

                newsletter (limit: -1, sort: "-issue") {
                    issue
                    title
                    date_sent
                    link
                    thumbnail { id }
                }
            }
        `)

        const { data } = res

        return {
            props: {
                data: data.settings,
                issues: data.newsletter,
            }
        }
    }
</script>
