<script lang="ts">
    import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
    import { HtmlUtils } from "../../WebRtc/HtmlUtils";
    import { i18nJson } from "../../i18n/locales";


    function onClick(callback: () => void) {
        callback();
    }

    function i18n(text: string | number | boolean | undefined): string {
        if (typeof text === "string") {
            return i18nJson(text);
        }
        return "";
    }

    function sanitize(html : string | number | boolean | undefined): string {
      return HtmlUtils.sanitize(html);
    }
</script>

<div class="layout-manager-list">
    {#each $layoutManagerActionStore as action}
        <div class="nes-container is-dark {action.type}" on:click={() => onClick(action.callback)}>
          <p>{@html sanitize(i18n(action.message))}</p>
        </div>
    {/each}
</div>

<style lang="scss">
    div.layout-manager-list {
        pointer-events: auto;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 40px;
        margin-right: auto;
        margin-left: auto;
        padding: 0;
        width: clamp(200px, 20vw, 20vw);
        z-index: 155;

        display: flex;
        flex-direction: column;

        animation: moveMessage 0.5s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;

        div {
            margin-bottom: 5%;
        }
    }

    div.nes-container {
        padding: 8px 4px;
        text-align: center;

        &.warning {
            background-color: #ff9800eb;
            color: #000;
        }
    }

    @keyframes moveMessage {
        0% {
            bottom: 40px;
        }
        50% {
            bottom: 30px;
        }
        100% {
            bottom: 40px;
        }
    }
</style>
