mapcomplete/UI/Popup/TagRenderingAnswer.ts

import {UIEventSource} from "../../Logic/UIEventSource";
import {Utils} from "../../Utils";
import BaseUIElement from "../BaseUIElement";
import {VariableUiElement} from "../Base/VariableUIElement";
import {SubstitutedTranslation} from "../SubstitutedTranslation";
import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig";
import Combine from "../Base/Combine";
import Img from "../Base/Img";

/***
 * Displays the correct value for a known tagrendering
 */
export default class TagRenderingAnswer extends VariableUiElement {

    constructor(tagsSource: UIEventSource<any>, configuration: TagRenderingConfig,
                state: any,
                contentClasses: string = "", contentStyle: string = "", options?: {
            specialViz: Map<string, BaseUIElement>
        }) {
        if (configuration === undefined) {
            throw "Trying to generate a tagRenderingAnswer without configuration..."
        }
        if (tagsSource === undefined) {
            throw "Trying to generate a tagRenderingAnswer without tagSource..."
        }
        super(tagsSource.map(tags => {
            if (tags === undefined) {
                return undefined;
            }

            if (configuration.condition) {
                if (!configuration.condition.matchesProperties(tags)) {
                    return undefined;
                }
            }

            const trs = Utils.NoNull(configuration.GetRenderValues(tags));
            if (trs.length === 0) {
                return undefined;
            }

            const valuesToRender: BaseUIElement[] = trs.map(tr => {
                const text = new SubstitutedTranslation(tr.then, tagsSource, state, options?.specialViz);
                if(tr.icon === undefined){
                    return text
                }
                return new Combine([new Img(tr.icon).SetClass("mapping-icon-"+(tr.iconClass ?? "small")), text]).SetClass("flex items-center")
            })
            if (valuesToRender.length === 1) {
                return valuesToRender[0];
            } else if (valuesToRender.length > 1) {
                return new Combine(valuesToRender).SetClass("flex flex-col")
            }
            return undefined;
        }).map((element: BaseUIElement) => element?.SetClass(contentClasses)?.SetStyle(contentStyle)))

        this.SetClass("flex items-center flex-row text-lg link-underline")
        this.SetStyle("word-wrap: anywhere;");
    }

}