import {LiturgyData} from "../data/miracle/liturgydata.mjs";

export class ModifyLiturgy {

    static data = {}
    static naming = {
        "range": "Reichweite",
        "strength": "Wirkung",
        "target": "Ziele",
        "castduration": "Wirkzeit",
        "duration": "Wirkdauer"
    }

    constructor(data) {
        ModifyLiturgy.data = data;
        ModifyLiturgy.data.maxmods = Math.round(data.lkp / 3);
        ModifyLiturgy.data.variation = null;
        console.log("ModifyLiturgy constructed", data)
    }

    static renderMods(html) {

        let result = '';

        ModifyLiturgy.data.mods.forEach(((mod, index) => {

            result += `<tr><td>${LiturgyData.ranks[mod.rank]}</td><td>${ModifyLiturgy.naming[mod.mod]}</td><td><button class="remove-mod" data-index="${index}"><i class="fa-solid fa-xmark"></i></button></td></tr>`
        }))

        return result;

    }

    handleRender(html) {


        html.off('click', 'input[name="data.variation"]')
        html.on('click', 'input[name="data.variation"]', (evt) => {
            if (evt.currentTarget.checked) {
                ModifyLiturgy.data.variation = evt.currentTarget.dataset['rank'];
                ModifyLiturgy.data.mods = [];
            }
            this.render(html)
        })
        html.off('click', 'button[class="remove-mod"]')
        html.on('click', 'button[class="remove-mod"]', (evt) => {
            const {index} = evt.currentTarget.dataset;
            ModifyLiturgy.data.mods.splice(index, 1);
            this.render(html)
        })
        html.off('change', 'select[name="mod"]')
        html.on('change', 'select[name="mod"]', (evt) => {
            const value = evt.currentTarget.value;
            if (value === '') return;
            const currentRank = ModifyLiturgy.data.mods.length + Number(ModifyLiturgy.data.rank);
            ModifyLiturgy.data.mods.push({
                rank: currentRank,
                mod: value,
            });
            evt.currentTarget.value = "";
            this.render(html)
        })

        // render state
        $('#mods', html).html(ModifyLiturgy.renderMods(html))


        // state handling

        if (ModifyLiturgy.data.mods.length === ModifyLiturgy.data.maxmods) {
            $(".editor, .editor *", html).attr('disabled', 'disabled');
            $(".editor select", html).hide();
            $('span#info', html).text('LkW lässt keine weitere Modifikationen zu')
            $("#mod_rank", html).text(LiturgyData.ranks[ModifyLiturgy.data.mods.length + Number(ModifyLiturgy.data.rank)]);
        } else if (ModifyLiturgy.data.variation == null) {
            $(".editor select *", html).attr('disabled', 'disabled');
            $(".editor select", html).hide();
            $('span#info', html).text('Keine Variante ausgewählt')
            $("#mod_rank", html).text('');
        } else {
            $(".editor, .editor *", html).removeAttr('disabled');
            $(".editor select", html).show();
            $('span#info', html).text('')
            $("#mod_rank", html).text('');
        }

    }

}
