(async function() {

    // const response = await fetch('./sample.json');
    // const data = await response.json();
    const data = {

        "size_x" : 8,
        "size_y" : 8,

        "cells" : {

            // x-axis
            1 : {
                // y-axis
                1 : {
                    "character" : "a",
                    "hidden" : false,
                    "hint" : 1,
                    "in_solution" : 3,
                },
                2 : {
                    "character" : "b",
                    // "hidden" : true,
                }
            }

        },

        "hints" : {
            1: "hallo",
            2: "test",
        }

    };

    const wrap = document.createElement("div");
    wrap.id = "wrap";

    const solutionArea = document.createElement("div");
    const hintsArea = document.createElement("div");

    document.body.appendChild(wrap);
    document.body.appendChild(solutionArea);
    document.body.appendChild(hintsArea);

    for (let i = 0; i < data.size_x; i++) {

        /*
        const row = document.createElement("div");
        row.classList.add("row");
        */

        for (let j = 0; j < data.size_y; j++) {

            const cell = document.createElement("span");
            cell.classList.add("cell");
            cell.setAttribute("data-column", j);
            wrap.appendChild(cell);

            if (data.cells[i] === undefined || data.cells[i][j] === undefined) {
                cell.classList.add("disabled");
            }
            else {
                const metadata = data.cells[i][j];
                cell.setAttribute("data-correct-text", metadata.character);

                if (metadata.hidden === false) {
                    cell.textContent = metadata.character;
                }
                else {

                    // Add interactivity
                    cell.setAttribute("contenteditable", "true");
                    cell.setAttribute("maxlength", "1");
                    cell.addEventListener('keyup', function(e) {
                        if (cell.textContent.length > 1) {
                            e.preventDefault();
                        }
                        cell.textContent = e.key;
                    });

                }

                if (metadata.hint !== undefined) {
                    cell.setAttribute("data-hint", metadata.hint);
                    cell.title = metadata.hint + ": " + data.hints[metadata.hint];
                }
                if (metadata.in_solution !== undefined) {
                    cell.setAttribute("data-in-solution", metadata.in_solution);
                    cell.classList.add("in_solution");
                }

            }

        }

    }

    for (const hintId in data.hints) {

        hint = data.hints[hintId];

        const li = document.createElement("li");
        li.id = "hint" + hintId;

        li.textContent = hintId + ": " + hint;

        hintsArea.appendChild(li);

    }

})();