(async () => {
    //TODO start refactoring these into a separate script, and make API calls
    //take all necessary info (e.g. username and character ID, plus other stuff)
    //as object params.
    const root = await protobuf.load("/protos/cofd_api.proto");

    const [, , USERNAME, CHARACTER_ID] = window.location.pathname.split('/');

    const api = makeAPI(root);
    console.log("api is", api);

    function setupAttributes() {
        const attributeInputs = document.querySelectorAll('#attributes input[type="number"]');

        async function attributeHandler(event) {
            console.log("updating attr");
            const attribute = event.target.id;
            const newValue = parseInt(event.target.value);
            const params = { username: USERNAME, characterID: CHARACTER_ID, attribute, newValue };
            await api.updateAttribute(params);
        }

        Array.from(attributeInputs).forEach(input => {
            input.addEventListener('change', attributeHandler);
        });
    }

    function setupSkills() {
        const attributeInputs = document.querySelectorAll('#skills input[type="number"]');

        async function skillValueHandler(event) {
            console.log("updating skill value");
            const skillName = event.target.id;
            const newValue = parseInt(event.target.value);
            const params = { username: USERNAME, characterID: CHARACTER_ID, skillName, newValue };
            await api.updateSkillValue(params);
        }

        Array.from(attributeInputs).forEach(input => {
            input.addEventListener('change', skillValueHandler);
        });
    }

    setupAttributes();
    setupSkills();
})().catch(e => {
    alert(e);
});