<style lang="scss">
    @import "../../style/molecules/process-step";
</style>

<script lang="ts">
    import { scaleFade } from '$animations/transitions'

    // Components
    import Image from '$components/atoms/Image.svelte'
    import { getAssetUrlKey } from '$utils/api'

    export let index: number
    export let text: string
    export let image: any = undefined
    export let video: any = undefined
    export let visible: boolean = false

    let videoEl: HTMLVideoElement

    const imageRatio = image ? image.width / image.height : undefined

    // Toggle video playback if step is visible
    $: if (videoEl) {
        visible ? videoEl.play() : videoEl.pause()
    }
</script>

{#if visible}
<div class="step grid" style:--index={index}
    in:scaleFade|local={{ scale: [1.1, 1], opacity: [0, 1], x: [20, 0], delay: 0.2 }}
    out:scaleFade|local={{ scale: [1, 0.9], opacity: [1, 0], x: [0, -20] }}
>
    {#if image || video}
    <div class="media">
        {#if image}
            <Image
                class="image shadow-box-dark"
                id={image.id}
                sizeKey="product"
                sizes={{
                    small: { width: 400 },
                    medium: { width: 600 },
                }}
                ratio={imageRatio}
                alt={image.title}
            />
        {:else if video}
            <video muted loop playsinline autoplay allow="autoplay" bind:this={videoEl}>
                <source type="video/mp4" src={getAssetUrlKey(video.mp4, 'step')} />
                <source type="video/webm" src={getAssetUrlKey(video.webm, 'step')} />
                <track kind="captions" />
            </video>
        {/if}
    </div>
    {/if}

    <div class="text text-xsmall">
        {@html text}
    </div>
</div>
{/if}