<script lang="ts">
    import { onMount, onDestroy } from "svelte"
    import { banner } from "../../stores"

    let isExpanded = false
    let currentIndex = 0
    let interval: NodeJS.Timer
    let img: HTMLImageElement

    function toggleBanner() {
        isExpanded = !isExpanded
        img.src = img.src.includes("information") ? "media/close-circle.png" : "media/information.svg"
    }

    onMount(() => {
        interval = setInterval(() => {
            currentIndex = (currentIndex + 1) % $banner.length
        }, 7000)

        return () => clearInterval(interval)
    })
</script>

{#if $banner[0] != undefined}
    <div class="banner" class:expanded="{isExpanded}">
        <div class="banner-container">
            <div class="banner-text" class:visible="{isExpanded}">
                {$banner[currentIndex]}
            </div>
            <button class="toggle" on:click="{() => toggleBanner()}">
                <img src="media/close-circle.png" alt="info" bind:this="{img}" />
            </button>
        </div>
    </div>
{/if}

<style lang="less">
    @import "../../assets/css/variables.less";
    * {
        transition: all 0.9s;
    }

    @keyframes opacityText {
        0%,
        100% {
            opacity: 0.3;
        }
        20%,
        50%,
        80% {
            opacity: 1;
        }
    }
    .banner-text {
        animation: opacityText;
        animation-duration: 7000ms;
        animation-iteration-count: infinite;
        visibility: hidden;
    }
    @media @mobile {
        .banner {
            width: 100vw;
            height: 0px;
            .banner-text {
                line-height: 90%;
                width: 100%;
            }
            &.expanded {
                height: 80px;
            }
        }

        .toggle {
            position: absolute;
            left: 0%;
            background-color: var(--banner-color);
            transform: translate(2%, -100%);
            border-radius: 10px;
        }
    }
    @media @tablet {
        .banner {
            height: 60px;
            width: 60px;
            .banner-text {
                width: 0px;
            }
            &.expanded {
                height: 60px;
                width: 80vw;
            }
        }

        .toggle {
            position: relative;
            transform: translate(0%, 0%);
            left: 0px;
            border-radius: 0px;
        }
    }

    .banner {
        position: fixed;
        border-radius: 0px 5px 0px 0px;
        z-index: 4000;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--banner-color);
        cursor: pointer;
        transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
        img {
            transform: scale(0.9);
        }
    }

    .banner-container {
        width: 100%;
        height: 100%;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        position: relative;
        color: var(--background-color);
        .toggle {
            padding: 10px;
        }

        .banner-text {
            color: var(--background-color);
            transition: opacity 0.3s ease-in-out;
            pointer-events: none;
            opacity: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .banner-text.visible {
            flex: 1;
            padding: 10px;
            visibility: visible;
        }
    }
</style>
