<style lang="scss">
    @import "../../../style/pages/about";
</style>

<script lang="ts">
    import { navigating, page } from '$app/stores'
    import { onMount, afterUpdate } from 'svelte'
    import { quartOut as quartOutSvelte } from 'svelte/easing'
    import { fade, fly } from 'svelte/transition'
    import type { PageData } from './$types'
    import { animate, inView, stagger, timeline } from 'motion'
    import { mailtoClipboard, map } from '$utils/functions'
    import { getAssetUrlKey } from '$utils/api'
    import { DELAY } from '$utils/constants'
    import { quartOut } from '$animations/easings'
    // Components
    import Metas from '$components/Metas.svelte'
    import PageTransition from '$components/PageTransition.svelte'
    import Image from '$components/atoms/Image.svelte'
    import Button from '$components/atoms/Button.svelte'
    import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
    import ProcessStep from '$components/molecules/ProcessStep.svelte'
    import Banner from '$components/organisms/Banner.svelte'
    import { sendEvent } from '$utils/analytics';

    export let data: PageData
    const { about, photos } = data

    let scrollY: number, innerWidth: number, innerHeight: number
    let photosGridEl: HTMLElement
    let photosGridOffset: number = photosGridEl && photosGridEl.offsetTop
    let currentStep: number = 0
    let emailCopied: string = null
    let emailCopiedTimeout: ReturnType<typeof setTimeout> | number

    $: parallaxPhotos = photosGridEl && map(scrollY, photosGridOffset - innerHeight, photosGridOffset + innerHeight / 1.5, 0, innerHeight * 0.15, true)
    $: fadedPhotosIndexes = innerWidth > 768
        ? [0, 2, 5, 7, 9, 12, 17, 20, 22, 26, 30, 32, 34]
        : [1, 4, 5, 7, 11, 14, 17, 20, 24, 27, 30, 33, 34, 36, 40, 43]


    onMount(() => {
        /**
         * Animations
         */
        const animation = timeline([
            // Banner
            ['.banner picture', {
                scale: [1.06, 1],
                opacity: [0, 1],
                z: 0,
            }, {
                at: 0.4,
                duration: 2.4,
            }],
            ['.banner h1', {
                y: [32, 0],
                opacity: [0, 1],
            }, {
                at: 0.5,
            }],
            ['.banner__top > *', {
                y: [-100, 0],
                opacity: [0, 1],
            }, {
                at: 0.4,
                delay: stagger(0.25),
            }],

            // Intro elements
            ['.about__introduction .container > *', {
                y: ['20%', 0],
                opacity: [0, 1],
                z: 0,
            }, {
                at: 0.75,
                delay: stagger(0.25),
            }],
            ['.first-photo', {
                y: ['10%', 0],
                opacity: [0, 1],
                z: 0,
            }, {
                at: 1.2,
            }],
            ['.first-photo img', {
                scale: [1.06, 1],
                opacity: [0, 1],
                z: 0,
            }, {
                at: 1.5,
                duration: 2.4,
            }],
        ], {
            delay: $navigating ? DELAY.PAGE_LOADING / 1000 : 0,
            defaultOptions: {
                duration: 1.6,
                easing: quartOut,
            },
        })
        animation.stop()

        // Sections
        inView('[data-reveal]', ({ target }) => {
            animate(target, {
                opacity: [0, 1],
                y: ['20%', 0],
                z: 0,
            }, {
                delay: 0.2,
                duration: 1.6,
                easing: quartOut,
            })
        })

        // Global images
        inView('[data-reveal-image] img', ({ target }) => {
            animate(target, {
                scale: [1.06, 1],
                opacity: [0, 1],
                z: 0,
            }, {
                delay: 0.3,
                duration: 2.4,
                easing: quartOut,
            })
        })

        // Process
        const processTimeline = timeline([
            // Step links
            ['.about__process li a', {
                y: [16, 0],
                opacity: [0, 1],
                z: 0,
            }, {
                at: 0,
                delay: stagger(0.15),
            }],

            // First step
            ['.about__process .step', {
                scale: [1.1, 1],
                opacity: [0, 1],
                x: [20, 0]
            }, {
                at: 0.6,
                duration: 1,
            }]
        ], {
            defaultOptions: {
                duration: 1.6,
                easing: quartOut,
            }
        })
        processTimeline.stop()

        inView('.about__process', () => {
            requestAnimationFrame(processTimeline.play)
        }, {
            amount: 0.35,
        })

        // Run animation
        requestAnimationFrame(animation.play)
    })


    afterUpdate(() => {
        // Update photos grid top offset
        photosGridOffset = photosGridEl.offsetTop
    })
</script>

<svelte:window bind:scrollY bind:innerWidth bind:innerHeight />

<Metas
    title={about.seo_title}
    description={about.seo_description}
    image={about.seo_image ? getAssetUrlKey(about.seo_image.id, 'share-image') : null}
/>


<PageTransition>
    <main class="about">
        <Banner
            title="About"
            image={{
                id: '699b4050-6bbf-4a40-be53-d84aca484f9d',
                alt: 'Photo caption',
            }}
        />

        <section class="about__introduction">
            <div class="container grid">
                <h2 class="title-small">{about.intro_title}</h2>
                <div class="heading text-big">
                    {@html about.intro_heading}
                </div>

                <div class="text text-small">
                    {@html about.intro_text}
                </div>
            </div>
        </section>

        <section class="about__creation">
            <div class="container grid">
                <figure class="first-photo">
                    <Image
                        class="picture shadow-box-dark"
                        id={about.intro_firstphoto.id}
                        alt={about.intro_firstphoto.title}
                        sizeKey="photo-list"
                        sizes={{
                            small: { width: 400 },
                            medium: { width: 600 },
                            large: { width: 800 },
                        }}
                        ratio={1.5}
                    />
                    <figcaption class="text-info">
                        {about.intro_firstphoto_caption}<br>
                        in
                        <a href="/{about.intro_firstlocation.country.slug}/{about.intro_firstlocation.slug}" data-sveltekit-noscroll>
                            <img src="{getAssetUrlKey(about.intro_firstlocation.country.flag.id, 'square-small-jpg')}" width="32" height="32" alt="{about.intro_firstlocation.country.flag.title}">
                            <span>Naarm Australia (Melbourne)</span>
                        </a>
                    </figcaption>
                </figure>

                <h2 class="title-small" data-reveal>{about.creation_title}</h2>
                <div class="heading text-huge" data-reveal>
                    {@html about.creation_heading}
                </div>

                <div class="text text-small" data-reveal>
                    {@html about.creation_text}
                </div>

                <figure class="picture portrait-photo" data-reveal-image>
                    <Image
                        class="shadow-box-dark"
                        id={about.creation_portrait.id}
                        alt={about.creation_portrait.title}
                        sizeKey="photo-list"
                        sizes={{
                            small: { width: 400 },
                            medium: { width: 750 },
                        }}
                        ratio={1.425}
                    />
                </figure>
                <span class="portrait-photo__caption text-info">
                    {about.creation_portrait_caption}
                </span>
            </div>
        </section>

        <section class="about__present">
            <div class="container grid">
                <figure class="picture" data-reveal-image>
                    <Image
                        class="shadow-box-dark"
                        id={about.present_image.id}
                        alt={about.present_image.title}
                        sizeKey="photo-list"
                        sizes={{
                            small: { width: 400 },
                            medium: { width: 600 },
                            large: { width: 800 },
                        }}
                        ratio={1.5}
                    />
                </figure>

                <h2 class="title-small" data-reveal>{about.present_title}</h2>
                <div class="text text-small" data-reveal>
                    <p>{about.present_text}</p>
                </div>

                <div class="heading text-big" data-reveal>
                    {@html about.present_heading}
                </div>

                <div class="conclusion text-small" data-reveal>
                    <p>{about.present_conclusion}</p>
                </div>
            </div>
        </section>

        {#if about.image_showcase}
            <div class="about__showcase container grid">
                <Image
                    id={about.image_showcase.id}
                    alt={about.image_showcase.title}
                    sizeKey="showcase"
                    sizes={{
                        small: { width: 400 },
                        medium: { width: 1000 },
                        large: { width: 1800 },
                    }}
                    ratio={1.2}
                />
            </div>
        {/if}

        <section class="about__process">
            <div class="container grid">
                <aside>
                    <div class="heading">
                        <h2 class="title-medium">{about.process_title}</h2>
                        <p class="text-xsmall">{about.process_subtitle}</p>
                    </div>

                    <ol>
                        {#each about.process_steps as { title }, index}
                            <li class:is-active={index === currentStep}>
                                <a href="#step-{index + 1}" class="title-big"
                                    on:click|preventDefault={() => {
                                        currentStep = index
                                        sendEvent('aboutStepSwitch')
                                    }}
                                >
                                    <span>{title}</span>
                                </a>
                            </li>
                        {/each}
                    </ol>
                </aside>

                <div class="steps">
                    {#each about.process_steps as { text, image, video_mp4, video_webm }, index}
                        {#if index === currentStep}
                            <ProcessStep
                                {index} {text}
                                image={image ?? undefined}
                                video={{
                                    mp4: video_mp4?.id,
                                    webm: video_webm?.id
                                }}
                            />
                        {/if}
                    {/each}
                </div>
            </div>
        </section>

        <section class="about__photos" bind:this={photosGridEl}>
            <div class="container-wide">
                <div class="photos-grid" style:--parallax-y="{parallaxPhotos}px">
                    {#each photos as { image: { id }, title }, index}
                        <AboutGridPhoto class="grid-photo"
                            {id}
                            alt={title}
                            disabled={fadedPhotosIndexes.includes(index)}
                        />
                    {/each}
                </div>
            </div>
        </section>

        <section class="about__interest container grid">
            <div class="container grid">
                <h2 class="title-xl">{about.contact_title}</h2>
                <div class="blocks">
                    {#each about.contact_blocks as { title, text, link, button }}
                        <div class="block">
                            <h3 class="text-label">{title}</h3>
                            <div class="text text-normal">
                                {@html text}
                            </div>
                            <div class="button-container">
                                {#if link}
                                {#key emailCopied === link}
                                    <div class="wrap"
                                        in:fly={{ y: 4, duration: 325, easing: quartOutSvelte, delay: 250 }}
                                        out:fade={{ duration: 250, easing: quartOutSvelte }}
                                        use:mailtoClipboard
                                        on:copied={({ detail }) => {
                                            emailCopied = detail.email
                                            // Clear timeout and add timeout to hide message
                                            clearTimeout(emailCopiedTimeout)
                                            emailCopiedTimeout = setTimeout(() => emailCopied = null, 2500)
                                        }}
                                    >
                                        {#if emailCopied !== link}
                                            <Button size="small" url="mailto:{link}" text={button} />
                                        {:else}
                                            <span class="clipboard">Email copied in clipboard</span>
                                        {/if}
                                    </div>
                                {/key}
                                {/if}
                            </div>
                        </div>
                    {/each}
                </div>
            </div>
        </section>
    </main>
</PageTransition>