import {
    world,
} from "./index.js";

import {
    available_tiles,
} from "/stackline-wasm/pkg/stackline_wasm.js";

const right_pane = document.getElementById("right-pane");
const coordinates_elem = document.getElementById("coordinates");
const stack_elem = document.getElementById("stack");
const signal_elem = document.getElementById("signal");
const state_elem = document.getElementById("state");
const tile_elem = document.getElementById("tile");
const tile_name_elem = document.getElementById("tile-name");

export function update_selected(x, y) {
    coordinates.innerText = `(${x}, ${y})`;

    let full_tile = world.get(x, y);

    if (!full_tile) {
        right_pane.classList.remove("selected");
        return;
    }

    let signal = full_tile.signal;
    while (stack_elem.children.length > 0) {
        stack_elem.removeChild(stack_elem.firstChild);
    }

    if (signal) {
        signal_elem.classList.add("has-signal");
        for (let element of signal.stack) {
            let li = document.createElement("li");
            if (typeof element === "string") {
                li.innerText = `"${element}"`;
            } else if (typeof element === "number") {
                li.innerText = element.toString();
            } else {
                throw new Error("Unexpected element type: " + typeof element);
            }
            stack_elem.appendChild(li);
        }

        signal.free();
    } else {
        signal_elem.classList.remove("has-signal");
    }

    let tile = full_tile.tile;
    if (tile) {
        tile_elem.classList.add("has-tile");

        let name = Object.keys(tile)[0];
        tile_name_elem.innerText = name;
    } else {
        tile_elem.classList.remove("has-tile");
    }

    state_elem.innerText = full_tile.state;

    full_tile.free();

    right_pane.classList.add("selected");
}

export function init() {
    // for (let name of available_tiles()) {
    //     let option = document.createElement("option");
    //     option.innerText = name;
    //     option.value = name;
    //     tile_name_elem.appendChild(option);
    // }
}