<script lang="ts">
	import { GAME4X4 } from './games.ts';
    import type Tile from './tile.ts';
    export let engine;
    $: console.log(engine);
    export let board: Array<Array<Tile>>;
	let parsed = {};
	let frames = "";
	let history = [];
	let input = GAME4X4;
	let valid = false;
	let HAC_valid = {};
	let run_hash = "";
	let run_hash_at_index = "";
	let enable_validation = false;
	let validation_cache = {};
	function validate(input) {
		if (validation_cache[input]) {
			return validation_cache[input];
		}
		let result = engine.validate(input);
		validation_cache[input] = result;
		return result;
	}
	$: try{run_hash = engine.hash(input)}catch(e){run_hash = e.message;valid=false;};
	$: try{parsed = JSON.parse(engine.parse(input));valid=true;}catch(e){parsed = e.message;};
	$: try{frames = JSON.parse(engine.get_frames(input))}catch(e){frames = e.message;valid=false;};
	$: if(enable_validation){try{HAC_valid = JSON.parse(validate(input.split(":").slice(0, index).join(":")))}catch(e){HAC_valid = [false, 0, 0];}};
	$: if(enable_validation){try{run_hash_at_index = engine.hash(input.split(":").slice(0, index).join(":"))}catch(e){run_hash_at_index = e.message;}};
    $: if(history.at(index)[0]){board = history.at(index)[0]};
	$: console.log(HAC_valid);
    $: console.log(history);
	$: if(valid){history = parsed.history};

	let index = 0;
</script>

<main>
    <h1>OispaHallaInspector</h1>
    <label>Paste history code here:</label>
    <textarea placeholder="Type the game code here..." bind:value={input}></textarea>
    <p>Run hash: {run_hash}</p>
    <!-- <p>Input: <code>{input}</code></p> -->
    {#if valid}
    <details open>
        <summary>Inspector</summary>
        <label for="index">History index: </label><input id="index" type="number" bind:value={index} min="0" max={history.length-1} />
        <input type="range" min="0" max={history.length-1} class="slider" id="myRange" bind:value={index}>
        <!-- <p><code>{JSON.stringify(history.at(index))}</code></p> -->
        <!-- <div class="board" style="--game-size:{Math.max(parsed.width, parsed.height)};">
            {#if history != null && index < history.length}
                {#each history.at(index)[0] as board}
                    {#each board as tile}
                        {#if tile}
                            <div class="tile x{tile.x} y{tile.y} value-{tile.value}" style="--xpos:{tile.x};--ypos:{tile.y};--value:{tile.value == 0 ? "" : Math.log2(tile.value)};{tile.value == 0 ? "background: #cdc0b4!important;" : ""}">{tile.value == 0 ? "" : tile.value}</div>
                        {/if}
                    {/each}
                {/each}
            {/if}
        </div> -->
        <h2>move to {history.at(index)[1]}</h2>
        <div style="background: #ddd;max-width:var(--board-width);margin:auto;color:black;">
            <label for="analysis_checkbox">Enable analysis (Will decrease performance a bit)</label><input id="analysis_checkbox" type="checkbox" bind:checked={enable_validation} />
            {#if enable_validation}
                <p>Valid: {HAC_valid[0]}, Score: {HAC_valid[1]}, Breaks used: {HAC_valid[2]}</p>
                <p>Valid UP: {engine.is_move_possible(JSON.stringify([4, 4, board]), 0)}</p>
                <p>Run hash at index: <span class="hash_at_index">{run_hash_at_index}</span></p>
            {/if}
        </div>
    </details>
    {/if}
    {#if !valid}
        <p>Invalid input!</p>
    {/if}
    <details>
        <summary>Gamestate</summary>
        <p><code>{frames.at(index)}</code></p>
    </details>
    <details>
        <summary>Full JSON Output</summary>
        <p><code>{JSON.stringify(parsed)}</code></p>
    </details>
    <!-- <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p> -->
</main>

<style>

</style>