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

    export let data: any



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

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

            anime.set('.credits__heading > *, .credits__category > ul > li', {
                opacity: 0,
                translateY: 24,
            })
            anime.set('.credits__category', {
                opacity: 0,
            })

            // Elements
            timeline.add({
                targets: '.credits__heading > *, .credits__category',
                opacity: 1,
                translateY: 0,
                delay: anime.stagger(350),
            }, 500)

            // Names
            timeline.add({
                targets: '.credits__category > ul > li',
                opacity: 1,
                translateY: 0,
                delay: anime.stagger(350),
            }, 1100)
        })
    }


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

<Metas
    title="Credits - Houses Of"
    description=""
    image=""
/>


<PageTransition name="credits">
    <section class="credits__heading">
        <SiteTitle variant="inline" />
        <p class="text-medium">{data.credits.text}</p>
    </section>

    <section class="credits__list">
        <div class="grid container">
            {#each data.credits.list as { title, credits }}
                <div class="credits__category grid">
                    <h2 class="title-small">{title}</h2>
                    <ul>
                        {#each credits as { name, role, website }}
                        <li>
                            <dl>
                                <dt>
                                    {#if website}
                                        <h3>
                                            <a href={website} rel="noopener external" target="_blank" tabindex="0">{name}</a>
                                        </h3>
                                    {:else}
                                        <h3>{name}</h3>
                                    {/if}
                                </dt>
                                <dd>
                                    {role}
                                </dd>
                            </dl>
                        </li>
                        {/each}
                    </ul>
                </div>
            {/each}

            <div class="credits__category grid">
                <h2 class="title-small">Photography</h2>
                <ul>
                    {#each data.credit as { name, website, location }}
                    <li>
                        <dl>
                            <dt>
                                {#if website}
                                    <h3>
                                        <a href={website} rel="noopener external" target="_blank" tabindex="0">{name}</a>
                                    </h3>
                                {:else}
                                    <h3>{name}</h3>
                                {/if}
                            </dt>
                            <dd>
                                <ul>
                                    {#each location as loc}
                                        {#if loc.location_id}
                                            <li>
                                                <a href="/{loc.location_id.country.slug}/{loc.location_id.slug}" sveltekit:noscroll tabindex="0">
                                                    <Image
                                                        id={loc.location_id.country.flag.id}
                                                        sizeKey="square-small"
                                                        width={16}
                                                        height={16}
                                                        alt="Flag of {loc.location_id.country.slug}"
                                                    />
                                                    <span>{loc.location_id.name}</span>
                                                </a>
                                            </li>
                                        {/if}
                                    {/each}
                                </ul>
                            </dd>
                        </dl>
                    </li>
                    {/each}
                </ul>
            </div>
        </div>
    </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 {
                credits {
                    text
                    list
                }

                credit (filter: { status: { _eq: "published" }}) {
                    name
                    website
                    location {
                        location_id (filter: { status: { _eq: "published" }}) {
                            name
                            slug
                            country {
                                slug
                                flag {
                                    id
                                }
                            }
                        }
                    }
                }
            }
        `)
        const { data } = res

        return {
            props: {
                data,
            }
        }
    }
</script>