<script lang="ts">
    import { fly } from "svelte/transition";
    import { banMessageVisibleStore, banMessageContentStore } from "../../Stores/TypeMessageStore/BanMessageStore";
    import { onMount } from "svelte";

    const text = $banMessageContentStore;
    const NAME_BUTTON = "Ok";
    let nbSeconds = 10;
    let nameButton = "";

    onMount(() => {
        timeToRead();
    });

    function timeToRead() {
        nbSeconds -= 1;
        nameButton = nbSeconds.toString();
        if (nbSeconds > 0) {
            setTimeout(() => {
                timeToRead();
            }, 1000);
        } else {
            nameButton = NAME_BUTTON;
        }
    }

    function closeBanMessage() {
        banMessageVisibleStore.set(false);
    }
</script>

<div class="main-ban-message nes-container is-rounded" transition:fly={{ y: -1000, duration: 500 }}>
    <h2 class="title-ban-message">
        <img src="resources/logos/report.svg" alt="***" /> Important message
        <img src="resources/logos/report.svg" alt="***" />
    </h2>
    <div class="content-ban-message">
        <p>{text}</p>
    </div>
    <div class="footer-ban-message">
        <button
            type="button"
            class="nes-btn {nameButton === NAME_BUTTON ? 'is-primary' : 'is-error'}"
            disabled={!(nameButton === NAME_BUTTON)}
            on:click|preventDefault={closeBanMessage}>{nameButton}</button
        >
    </div>
    <!-- svelte-ignore a11y-media-has-caption -->
    <audio id="report-message" autoplay>
        <source src="/resources/objects/report-message.mp3" type="audio/mp3" />
    </audio>
</div>

<style lang="scss">
    div.main-ban-message {
        display: flex;
        flex-direction: column;
        position: relative;
        top: 15vh;

        height: 70vh;
        width: 60vw;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 0;

        pointer-events: auto;
        background-color: #333333;
        color: whitesmoke;

        h2.title-ban-message {
            flex: 1 1 auto;
            max-height: 50px;
            margin-bottom: 20px;

            text-align: center;

            img {
                height: 50px;
            }
        }

        div.content-ban-message {
            flex: 1 1 auto;
            max-height: calc(100% - 50px);
            overflow: auto;

            p {
                white-space: pre-wrap;
            }
        }

        div.footer-ban-message {
            height: 50px;
            margin-top: 10px;
            text-align: center;

            button {
                width: 88px;
                height: 44px;
            }
        }
    }
</style>
