<script>
    import { initGame } from "./Game/Game";
    import TailwindCss from "./TailwindCss.svelte";
    import { UIAssetsLoaderInfoPipe, UICameraInfo, UIGameProfilerPipe, UIGameSound, UIGameTimePipe, UIMainPipe, UISelectionInfo } from "./Game/UIPipes/UIPipes";
    import { UIGlobalPipe } from "./UI/GlobalNamespace/GlobalNamespace";

    initGame();

    let amogusCount = 0;

    let loadingAssets = true;

    let downloadedAssets = -1;
    let totalToDownloadAssets = -1;
    let assetsFinished = false;

    UIMainPipe.subscribe((s) => {
        amogusCount = s.amogusCount;
        loadingAssets = s.loadingAssets;
    });

    UIAssetsLoaderInfoPipe.subscribe((s) => {
        totalToDownloadAssets = s.totalToDownload;
        downloadedAssets = s.downloaded;
        assetsFinished = s.finished;
    });

    let frameLatency = 0;
    let profileMessages = [];
    UIGameProfilerPipe.subscribe((s) => {
        frameLatency = s.frameLatency;
        profileMessages = s.profileMessages;
    });

    let selectedTypes = [];
    UISelectionInfo.subscribe((s) => {
        selectedTypes = s.types;
    });

    let cameraInfo = {
        position: { x: 0, y: 0 },
        zoom: 1,
    };
    UICameraInfo.subscribe((s) => {
        cameraInfo.position = s.position;
        cameraInfo.zoom = s.zoom;
    });
    let UIStateComponent = null;

    UIGlobalPipe.subscribe((s) => {
        UIStateComponent = s.currentStateComponent;
    });

    let inGameTime = {
        seconds: 0,
        minutes: 0,
        hours: 0,
        days: 0,
        weeks: 0,
        months: 0,
        years: 0,
    };

    UIGameTimePipe.subscribe((s) => {
        inGameTime = s.gameTime;
    });

    let masterSound = 1.0;
    let ambientSound = 1.0;
    let musicSound = 0.3;

    UIGameSound.subscribe((s) => {
        masterSound = s.master;
        ambientSound = s.ambient;
        musicSound = s.music;
    });
</script>

<div id="game-ui" class="absolute inset-0 flex items-center justify-center text-white select-none tracking-widest font-pixel pointer-events-none">
    {#if !loadingAssets}
        <div class="w-[500px] flex flex-col gap-4 text-xl absolute left-8 top-8">
            <div class="bg-indigo-800 bg-opacity-90 flex flex-col p-4 w-[400px] rounded-xl">
                <h2 class="font-semibold">Camera info</h2>
                <p>Position: {cameraInfo.position.x.toFixed(1)} {cameraInfo.position.y.toFixed(1)}</p>
                <p>Zoom: {cameraInfo.zoom}</p>
                <h2 class="font-semibold mt-2">Selection Info</h2>
                {#each selectedTypes as selection}
                    <p>Selected cell type: {selection}</p>
                {/each}
                <h2 class="font-semibold mt-2">In Game Time</h2>
                <div class="w-full flex gap-2">
                    <p>
                        {inGameTime.days?.toString().padStart(2, "0") ?? ""}.{inGameTime.months?.toString().padStart(2, "0") ?? ""} of {inGameTime.years ?? ""} y.
                    </p>
                    <p>
                        {inGameTime.hours?.toString().padStart(2, "0") ?? ""}:{inGameTime.minutes?.toString().padStart(2, "0") ?? ""}:{inGameTime.seconds
                            ?.toString()
                            .padStart(2, "0") ?? ""}
                    </p>
                </div>
                <h2 class="font-semibold mt-2">Sound</h2>
                <div class="flex gap-2 items-center pointer-events-auto">
                    <p>Master:</p>
                    <input type="range" min="0" max="100" value="100" on:input={(e)=>{UIGameSound.update((s)=>{
                        s.master = Number(e.target.value) / 100;
                    })}}/>
                </div>
                <div class="flex gap-2 items-center pointer-events-auto">
                    <p>Music:</p>
                    <input type="range" min="0" max="100" value="30" on:input={(e)=>{UIGameSound.update((s)=>{
                        s.music = Number(e.target.value) / 100;
                    })}}/>
                </div>
                <div class="flex gap-2 items-center pointer-events-auto">
                    <p>Ambient:</p>
                    <input type="range" min="0" max="100" value="100" on:input={(e)=>{UIGameSound.update((s)=>{
                        s.ambient = Number(e.target.value) / 100;
                    })}}/>
                </div>
            </div>
        </div>
        <svelte:component this={UIStateComponent} />
    {/if}
    {#if loadingAssets}
        <div class="w-full h-full bg-slate-950 flex flex-col justify-center items-center gap-4">
            <div class="flex items-center justify-center gap-4">
                <h1 class="text-3xl">Loading assets</h1>
                <svg class="right-0 animate-spin h-7 w-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path
                        class=""
                        fill="#fff"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                    ></path>
                </svg>
            </div>
            <div class="flex justify-center items-center gap-1 text-2xl opacity-60">
                <p>{downloadedAssets >= 0 ? downloadedAssets : "Calculating..."}</p>
                <p>/</p>
                <p>{totalToDownloadAssets >= 0 ? totalToDownloadAssets : "Calculating..."}</p>
            </div>
        </div>
    {/if}
    <!-- <div class="border-2 border-red-500">

    </div> -->
</div>

<div id="game-profiler" class="absolute inset-0 flex text-yellow-500 select-none pointer-events-none font-pixel tracking-widest">
    <div class="w-full h-full flex flex-col text-lg px-2">
        <p class="bg-black bg-opacity-50">FPS: {(1000.0 / frameLatency).toFixed(2)} {frameLatency.toFixed(2)}ms</p>
        {#each profileMessages as msg}
            <p class="bg-black bg-opacity-50">{msg.text}</p>
        {/each}
    </div>
</div>

<TailwindCss />
