MapComplete/UI/SubstitutedTranslation.ts

import {UIEventSource} from "../Logic/UIEventSource";
import {Translation} from "./i18n/Translation";
import Locale from "./i18n/Locale";
import {FixedUiElement} from "./Base/FixedUiElement";
import SpecialVisualizations, {SpecialVisualization} from "./SpecialVisualizations";
import {Utils} from "../Utils";
import {VariableUiElement} from "./Base/VariableUIElement";
import Combine from "./Base/Combine";
import BaseUIElement from "./BaseUIElement";
import {DefaultGuiState} from "./DefaultGuiState";
import FeaturePipelineState from "../Logic/State/FeaturePipelineState";
import LinkToWeblate from "./Base/LinkToWeblate";

export class SubstitutedTranslation extends VariableUiElement {

    public constructor(
        translation: Translation,
        tagsSource: UIEventSource<Record<string, string>>,
        state: FeaturePipelineState,
        mapping: Map<string, BaseUIElement |
            ((state: FeaturePipelineState, tagSource: UIEventSource<Record<string, string>>, argument: string[], guistate: DefaultGuiState) => BaseUIElement)> = undefined) {

        const extraMappings: SpecialVisualization[] = [];

        mapping?.forEach((value, key) => {
            extraMappings.push(
                {
                    funcName: key,
                    constr: typeof value === "function" ? value : () => value,
                    docs: "Dynamically injected input element",
                    args: [],
                    example: ""
                }
            )
        })

        const linkToWeblate = translation !== undefined ? new LinkToWeblate(translation.context, translation.translations) : undefined;
        
        super(
            Locale.language.map(language => {
                let txt = translation?.textFor(language);
                if (txt === undefined) {
                    return undefined
                }
                mapping?.forEach((_, key) => {
                    txt = txt.replace(new RegExp(`{${key}}`, "g"), `{${key}()}`)
                })

                const allElements = SubstitutedTranslation.ExtractSpecialComponents(txt, extraMappings).map(
                    proto => {
                        if (proto.fixed !== undefined) {
                            if(tagsSource === undefined){
                                return Utils.SubstituteKeys(proto.fixed, undefined)
                            }
                            return new VariableUiElement(tagsSource.map(tags => Utils.SubstituteKeys(proto.fixed, tags)));
                        }
                        const viz = proto.special;
                        if(viz === undefined){
                            console.error("SPECIALRENDERING UNDEFINED for", tagsSource.data?.id, "THIS IS REALLY WEIRD")
                            return undefined

                        }
                        try {
                            return viz.func.constr(state, tagsSource, proto.special.args, DefaultGuiState.state)?.SetStyle(proto.special.style);
                        } catch (e) {
                            console.error("SPECIALRENDERING FAILED for", tagsSource.data?.id, e)
                            return new FixedUiElement(`Could not generate special rendering for ${viz.func.funcName}(${viz.args.join(", ")}) ${e}`).SetStyle("alert")
                        }
                    });
                allElements.push(linkToWeblate)
                
                return new Combine(
                   allElements
                )
            })
        )

        this.SetClass("w-full")
    }

    /**
     * 
     * // Return empty list on empty input
     * SubstitutedTranslation.ExtractSpecialComponents("") // => []
     *  
     * // Advanced cases with commas, braces and newlines should be handled without problem
     * const templates = SubstitutedTranslation.ExtractSpecialComponents("{send_email(&LBRACEemail&RBRACE,Broken bicycle pump,Hello&COMMA\n\nWith this email&COMMA I'd like to inform you that the bicycle pump located at https://mapcomplete.osm.be/cyclofix?lat=&LBRACE_lat&RBRACE&lon=&LBRACE_lon&RBRACE&z=18#&LBRACEid&RBRACE is broken.\n\n Kind regards,Report this bicycle pump as broken)}")
     * const templ = templates[0]
     * templ.special.func.funcName // => "send_email"
     * templ.special.args[0] = "{email}"
     */
    public static ExtractSpecialComponents(template: string, extraMappings: SpecialVisualization[] = []): {
        fixed?: string,
        special?: {
            func: SpecialVisualization,
            args: string[],
            style: string
        }
    }[] {
        
        if(template === ""){
            return []
        }

        for (const knownSpecial of extraMappings.concat(SpecialVisualizations.specialVisualizations)) {
            
            // Note: the '.*?' in the regex reads as 'any character, but in a non-greedy way'
            const matched = template.match(new RegExp(`(.*){${knownSpecial.funcName}\\((.*?)\\)(:.*)?}(.*)`, "s"));
            if (matched != null) {

                // We found a special component that should be brought to live
                const partBefore = SubstitutedTranslation.ExtractSpecialComponents(matched[1], extraMappings);
                const argument = matched[2].trim();
                const style = matched[3]?.substring(1) ?? ""
                const partAfter = SubstitutedTranslation.ExtractSpecialComponents(matched[4], extraMappings);
                const args = knownSpecial.args.map(arg => arg.defaultValue ?? "");
                if (argument.length > 0) {
                    const realArgs = argument.split(",").map(str => str.trim()
                        .replace(/&LPARENS/g, '(')
                        .replace(/&RPARENS/g, ')')
                        .replace(/&LBRACE/g, '{')
                        .replace(/&RBRACE/g, '}')
                        .replace(/&COMMA/g, ','));
                    for (let i = 0; i < realArgs.length; i++) {
                        if (args.length <= i) {
                            args.push(realArgs[i]);
                        } else {
                            args[i] = realArgs[i];
                        }
                    }
                }

                let element;
                element = {
                    special: {
                        args: args,
                        style: style,
                        func: knownSpecial
                    }
                }
                return [...partBefore, element, ...partAfter]
            }
        }

        // Let's to a small sanity check to help the theme designers:
        if (template.search(/{[^}]+\([^}]*\)}/) >= 0) {
            // Hmm, we might have found an invalid rendering name
            console.warn("Found a suspicious special rendering value in: ", template, " did you mean one of: ", SpecialVisualizations.specialVisualizations.map(sp => sp.funcName + "()").join(", "))
        }
        
        // IF we end up here, no changes have to be made - except to remove any resting {}
        return [{fixed: template}];
    }

}