// fetch json representing the character.
let fetchPromise = fetch(window.location.pathname + "/api").then((res) =>
    res.json()
);

async function main(fetchPromise) {
    let data = await fetchPromise;
    let rawCharacter = data.character;

    /* create a proxy to observe changes in the character
    *  I'd like to make this proxy the source of truth for the DOM,
    *  it would map the character object to fields on the DOM and update
    *  the DOM as the character object changes. In react this
    *  this would be super easy.
    */
    let character = ObservableSlim.create(rawCharacter, true, (changes) => {
        // Observable Slim comes from this library
        // https://github.com/ElliotNB/observable-slim
        console.log(changes)
        let splitPath = changes.currentPath.split
        switch () {
            /* I stopped here, trying to think about how I choose which
            *  elements to update.
            */
        }
    });

    $(".editOnClick").on("click", (e) => {
        let $target = $(e.target);

        let field = $target.attr("data-fieldName");
        if (field == undefined) return false;

        let fieldParts = field.split("-");
        let fieldType = fieldParts[0];
        let fieldKey = fieldParts[1];
        console.log(fieldType);

        /* This switch decides which DOM manipulations to do based on
        *  the 'type' part of a field name. I want to move the to the
        *  observer.
        */
        switch (fieldType) {
            case "ability":
                console.log("triggered");
                let $value = $(`#ability-${fieldKey}-value`);
                let initial = $value.html();
                $value.empty();
                let $input = $("<input/>")
                    .addClass("form-control text-black")
                    .attr("type", "number")
                    .attr("value", initial)
                    .keypress((e) => {
                        if (e.keyCode == "13") {
                            $value.text(e.target.value);
                            let mod = Math.floor((Number(e.target.value) - 10) / 2);
                            character.stats.abilities[fieldKey] = e.target.value;
                            console.log(character);
                            // console.log(mod);
                            console.log(
                                $(`#${field}-mod`).text(mod > 0 ? `+${mod}` : mod)
                            );
                        }
                    });
                $value.append($input);
                $input.focus();
                break;
            default:
                break;
        }
    });
}

window.addEventListener("DOMContentLoaded", () => {
    main(fetchPromise);
});