<script>
    import { onMount } from 'svelte'

    // Props
    export let currentIndex = 0
    export let className = null

    // Variables
    let counter
    const numbers = [...Array(10).keys()]

    // Reactive variables depending on currentIndex
    $: actualIndex = currentIndex + 1
    $: amount = String(actualIndex).length
    $: index = (actualIndex < 10) ? String(actualIndex).padStart(2, '0') : String(actualIndex)
    $: digits = index.split('')


    // Set columns height
    const setColumnHeight = () => {
        // Set each digit column's height = its spans combined (in order to translate in tens of %)
        counter.querySelectorAll('div').forEach(column => {
            const spans = column.querySelectorAll('span')
            column.style.height = spans[0].offsetHeight * spans.length + 'px'
        })
    }


    /*
    ** Run code when mounted
    */
    onMount(() => {
        setColumnHeight()
    })
</script>

<svelte:window on:resize={setColumnHeight} />

<div class="counter {className}" bind:this={counter}>
    {#each digits as digit}
    <div class="counter__column" style="transform: translateY(-{digit}0%);">
        {#each numbers as number}
        <span>{number}</span>
        {/each}
    </div>
    {/each}
</div>
