<script lang="ts">
    const { data } = $props();

    import './app.css';
</script>


<svelte:head>
    <meta name="robots" content="noindex">
</svelte:head>

<div id='window'>
    <div class="menubar">
        <button class="a" style="background-color: rgb(255 95 87)"  aria-label="reload"></button>
        <button class="b" style="background-color: rgb(255 188 46)" aria-label="close"></button>
        <button class="c" style="background-color: rgb(40 200 64)"  aria-label="fullscreen"></button>
    </div>
    <div class="code">
        {@html data.html}
    </div>
    <script>
        function toggleFullScreen() {
            if (document.fullscreenElement) {
                document.exitFullscreen();
            } else {
                document.querySelector("body")?.requestFullscreen();
            }
        }

        function hideContent() {
            let uuid = crypto.randomUUID()
            window.name = uuid
            window.parent.postMessage({"id": uuid, 'message': 'toggleHide'}, '*');
        }

        document.querySelector('button.a')?.addEventListener('click', ()=>{location.reload()})
        document.querySelector('button.b')?.addEventListener('click', ()=>{hideContent()})
        document.querySelector('button.c')?.addEventListener('click', ()=>{toggleFullScreen()})
    </script>
</div>

<style>
    #window {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        border: solid var(--border-color) 1px;
        border-radius: 12px;
        box-shadow: 0px 8px 40px var(--shadow-color);
        background-color: var(--back-color);
        font-family: sans-serif;
        overflow: hidden;
    }

    .menubar {
        display: flex;
        height: 28px;
        padding: 0 4px;
        border-radius: 12px 12px 0 0;
        background-color: var(--head-color);
        border-bottom: solid var(--divider-color) 1px;
    }
    button {
        all: unset;
        width: 12px;
        height: 12px;
        margin: 8px 4px;
        border-radius: 50%;
        cursor: pointer;
    }

    .code {
        height: calc(100% - 28px);
        overflow-x: hidden;
        overflow-y: auto;
    }
</style>