<script lang="ts">
    import dayjs from 'dayjs'
    // Components
    import Metas from '$components/Metas.svelte'
    import Image from '$components/atoms/Image.svelte'
    import Heading from '$components/molecules/Heading.svelte'
    import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte';
    import EmailForm from '$components/molecules/EmailForm.svelte';

    export let issues: any
</script>

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

<main class="subscribe">
    <Heading
        text="If you wish to be pinged when new photos are added to and limited prints become available on our shop, sign up below."
    />

    <EmailForm />

    <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">
                        <Image
                            id={id}
                            sizeKey="issue-thumbnail"
                            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" />
</main>


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

    export async function load ({ page, fetch, session, stuff }) {
        const res = await fetchAPI(`
            query {
                newsletter (limit: -1, sort: "-issue") {
                    issue
                    title
                    date_sent
                    link
                    thumbnail { id }
                }
            }
        `)

        const { data } = res

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