import { getWidthOfText } from "./utils.mjs";

export default class RegisterHandlebarsHelpers {
    static registerHelpers(){
        Handlebars.registerHelper({
            looseEq: this.looseEq,
            times: this.times,
            join: this.join,
            add: this.add,
            subtract: this.subtract,
            objectSelector: this.objectSelector,
            includes: this.includes,
            simpleEditor: this.simpleEditor,
            debug: this.debug,
        });
    };

    static looseEq(a, b){
        return a == b;
    }

    static times(nr, block){
        var accum = '';
        for(var i = 0; i < nr; ++i)
            accum += block.fn(i);
        return accum;
    }

    static join(...options){
        return options.slice(0, options.length-1);
    }

    static add(a, b){
        const aNum = Number.parseInt(a);
        const bNum = Number.parseInt(b);
        return (Number.isNaN(aNum) ? 0 : aNum) + (Number.isNaN(bNum) ? 0 : bNum);
    }

    static subtract(a, b){
        const aNum = Number.parseInt(a);
        const bNum = Number.parseInt(b);
        return (Number.isNaN(aNum) ? 0 : aNum) - (Number.isNaN(bNum) ? 0 : bNum);
    }

    static objectSelector(options){
        let { title, values, titleFontSize, ids, style } = options.hash;

        const titleLength = getWidthOfText(title, titleFontSize, true, true);
        const margins = 12;

        const buttons = options.fn();
        const nrButtons = Math.max($(buttons).length-1, 1);
        const iconWidth = 26;

        const texts = values.reduce((acc, x, index) => {
            if(x){
                acc.push(`<span class="object-select-item" data-action="viewObject" data-value="${ids[index]}">${x}</span>`);
            }

            return acc;  
        }, []).join(' ');

        const html =
        `<div ${style ? 'style="'+style+'"' : ''}">
            <div class="object-select-display iconbar">
                <span class="object-select-title">${title}</span>
                <div class="object-select-text" style="padding-left: ${titleLength+margins}px; padding-right: ${nrButtons*iconWidth}px;">
                    ${texts}
                </div>
                ${buttons}
            </div>
         </div>
        `;

        return new Handlebars.SafeString(html);
    }

    static rangePicker(options) {
        let {name, value, min, max, step} = options.hash;
        name = name || "range";
        value = value ?? "";
        if ( Number.isNaN(value) ) value = "";
        const html =
        `<input type="range" name="${name}" value="${value}" min="${min}" max="${max}" step="${step}"/>
         <span class="range-value">${value}</span>`;
        return new Handlebars.SafeString(html);
    }
    
    static includes(list, item){
        return list.includes(item);
    }

    static simpleEditor(content, options) {
        const { target, editable=true, button, engine="tinymce", collaborate=false, class: cssClass } = options.hash;
        const config = {name: target, value: content, button, collaborate, editable, engine};
        const element = foundry.applications.fields.createEditorInput(config);
        if ( cssClass ) element.querySelector(".editor-content").classList.add(cssClass);
        return new Handlebars.SafeString(element.outerHTML);
    }

    static debug(a) {
        console.log(JSON.stringify(a));
        return a;
    }
}