<script>
    import { onMount } from 'svelte'

    // Variables
    let toggleLayout
    let layoutSetting


    /*
    ** Run code on browser only
    */
    onMount(() => {
        // Get layout setting from storage
        layoutSetting = (localStorage.getItem('photosLayout')) ? localStorage.getItem('photosLayout') : 'list'

        // Variables
        const layoutGridClass = 'photos--grid'
        const layoutListClass = 'photos--list'
        const grid = document.querySelector('.photos')
        const toggle = document.querySelector('.toggle')
        const pill = toggle.querySelector('.pill')

        // Change active pill
        const toggleAnimate = (elem, pill, toggle) => {
            pill.style.width = Math.round(elem.getBoundingClientRect().width) + 'px'
            pill.style.left = Math.round(elem.getBoundingClientRect().left - toggle.getBoundingClientRect().left) + 'px'
        }

        // Init of first option
        toggleAnimate(document.querySelector(`.toggle [data-layout="${layoutSetting}"]`), pill, toggle)

        // Toggle layout
        toggleLayout = event => {
            const clicked = event.currentTarget
            const type = clicked.dataset.layout

            // Change the layout
            switch (type) {
                case 'grid':
                    grid.classList.add(layoutGridClass)
                    grid.classList.remove(layoutListClass)
                    break
                case 'list':
                    grid.classList.add(layoutListClass)
                    grid.classList.remove(layoutGridClass)
                    break
                default: break
            }

            // Animate the active pill
            toggleAnimate(clicked, pill, toggle)

            // Add/Remove active classes
            document.querySelectorAll('.toggle button').forEach(button => button.classList.remove('active'))
            clicked.classList.add('active')

            // Remember this setting
            localStorage.setItem('photosLayout', type)
        }
    })
</script>

<div class="toggle">
    <button data-layout="list" class:active={layoutSetting === 'list'} on:click={toggleLayout}>
        <svg xmlns="http://www.w3.org/2000/svg" width="19" height="17" viewBox="0 0 19 17">
            <g class="anim">
                <rect width="15" height="3"/>
                <rect width="15" height="3" x="4" y="7"/>
                <rect width="15" height="3" y="14"/>
            </g>
        </svg>
        <span>List</span>
    </button>

    <button data-layout="grid" class:active={layoutSetting === 'grid'} on:click={toggleLayout}>
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20">
            <g class="anim">
                <rect width="7" height="7"/>
                <rect width="7" height="7" x="11" y="2"/>
                <rect width="7" height="7" y="11"/>
                <rect width="7" height="7" x="11" y="13"/>
            </g>
        </svg>
        <span>Grid</span>
    </button>

    <div class="pill" aria-hidden="true" role="presentation"></div>
</div>
