MapComplete/UI/Popup/LanguageElement.ts

import { SpecialVisualization } from "../SpecialVisualization"
import BaseUIElement from "../BaseUIElement"
import { UIEventSource } from "../../Logic/UIEventSource"
import FeaturePipelineState from "../../Logic/State/FeaturePipelineState"
import { VariableUiElement } from "../Base/VariableUIElement"
import { OsmTags } from "../../Models/OsmFeature"
import * as all_languages from "../../assets/language_translations.json"
import { Translation } from "../i18n/Translation"
import Combine from "../Base/Combine"
import Title from "../Base/Title"
import Lazy from "../Base/Lazy"
import { SubstitutedTranslation } from "../SubstitutedTranslation"
import List from "../Base/List"
import { AllLanguagesSelector } from "./AllLanguagesSelector"
import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction"
import { And } from "../../Logic/Tags/And"
import { Tag } from "../../Logic/Tags/Tag"
import { EditButton, SaveButton } from "./SaveButton"
import { FixedUiElement } from "../Base/FixedUiElement"
import Translations from "../i18n/Translations"
import Toggle from "../Input/Toggle"
import { On } from "../../Models/ThemeConfig/Conversion/Conversion"

export class LanguageElement implements SpecialVisualization {
    funcName: string = "language_chooser"

    docs: string | BaseUIElement =
        "The language element allows to show and pick all known (modern) languages. The key can be set"

    args: { name: string; defaultValue?: string; doc: string; required?: boolean }[] = [
        {
            name: "key",
            required: true,
            doc: "What key to use, e.g. `language`, `tactile_writing:braille:language`, ... If a language is supported, the language code will be appended to this key, resulting in `language:nl=yes` if nl is picked ",
        },
        {
            name: "question",
            required: true,
            doc: "What to ask if no questions are known",
        },
        {
            name: "render_list_item",
            doc: "How a single language will be shown in the list of languages. Use `{language}` to indicate the language (which it must contain).",
            defaultValue: "{language()}",
        },
        {
            name: "render_single_language",
            doc: "What will be shown if the feature only supports a single language",
            required: true,
        },
        {
            name: "render_all",
            doc: "The full rendering. Use `{list}` to show where the list of languages must come. Optional if mode=single",
            defaultValue: "{list()}",
        },
        {
            name: "no_known_languages",
            doc: "The text that is shown if no languages are known for this key. If this text is omitted, the languages will be prompted instead",
        },
        {
            name: "mode",
            doc: "If one or many languages can be selected. Should be 'multi' or 'single'",
            defaultValue: "multi",
        },
    ]

    example: `
    \`\`\`json
     {"special":
       "type": "language_chooser",
       "key": "school:language",
       "question": {"en": "What are the main (and administrative) languages spoken in this school?"},
       "render_single_language": {"en": "{language()} is spoken on this school"},
       "render_list_item": {"en": "{language()}"},
       "render_all": {"en": "The following languages are spoken here:{list()}"}
       "mode":"multi"
     }
     \`\`\`
    `

    constr(
        state: FeaturePipelineState,
        tagSource: UIEventSource<OsmTags>,
        argument: string[]
    ): BaseUIElement {
        let [key, question, item_render, single_render, all_render, on_no_known_languages, mode] =
            argument
        if (mode === undefined || mode.length == 0) {
            mode = "multi"
        }
        if (item_render === undefined) {
            item_render = "{language()}"
        }
        if (all_render === undefined || all_render.length == 0) {
            all_render = "{list()}"
        }
        if (mode !== "single" && mode !== "multi") {
            throw (
                "Error while calling language_chooser: mode must be either 'single' or 'multi' but it is " +
                mode
            )
        }
        if (single_render.indexOf("{language()") < 0 || item_render.indexOf("{language()") < 0) {
            throw "Error while calling language_chooser: render_single_language and render_list_item must contain '{language()}'"
        }
        if (all_render.indexOf("{list()") < 0) {
            throw "Error while calling language_chooser: render_all must contain '{list()}'"
        }

        const prefix = key + ":"
        const foundLanguages = tagSource.map((tags) => {
            const foundLanguages: string[] = []
            for (const k in tags) {
                const v = tags[k]
                if (v !== "yes") {
                    continue
                }
                if (k.startsWith(prefix)) {
                    foundLanguages.push(k.substring(prefix.length))
                }
            }
            return foundLanguages
        })
        const forceInputMode = new UIEventSource(false)
        const inputEl = new Lazy(() => {
            const selector = new AllLanguagesSelector({
                mode: mode === "single" ? "select-one" : "select-many",
                currentCountry: tagSource.map((tgs) => tgs["_country"]),
            })
            const cancelButton = Toggle.If(forceInputMode, () =>
                Translations.t.general.cancel
                    .Clone()
                    .SetClass("btn btn-secondary")
                    .onClick(() => forceInputMode.setData(false))
            )

            const saveButton = new SaveButton(
                selector.GetValue().map((lngs) => (lngs.length > 0 ? "true" : undefined)),
                state.osmConnection
            ).onClick(() => {
                const selectedLanguages = selector.GetValue().data
                const currentLanguages = foundLanguages.data
                const selection: Tag[] = selectedLanguages.map((ln) => new Tag(prefix + ln, "yes"))

                for (const currentLanguage of currentLanguages) {
                    if (selectedLanguages.indexOf(currentLanguage) >= 0) {
                        continue
                    }
                    // Erase language that is not spoken anymore
                    selection.push(new Tag(prefix + currentLanguage, ""))
                }

                if (state.featureSwitchIsTesting.data) {
                    for (const tag of selection) {
                        tagSource.data[tag.key] = tag.value
                    }
                    tagSource.ping()
                } else {
                    ;(state?.changes)
                        .applyAction(
                            new ChangeTagAction(
                                tagSource.data.id,
                                new And(selection),
                                tagSource.data,
                                {
                                    theme: state?.layoutToUse?.id ?? "unkown",
                                    changeType: "answer",
                                }
                            )
                        )
                        .then((_) => {
                            console.log("Tagchanges applied")
                        })
                }
                forceInputMode.setData(false)
            })

            return new Combine([
                new Title(question),
                selector,
                new Combine([cancelButton, saveButton]).SetClass("flex justify-end"),
            ]).SetClass("flex flex-col question disable-links")
        })

        const editButton = new EditButton(state.osmConnection, () => forceInputMode.setData(true))

        return new VariableUiElement(
            foundLanguages.map(
                (foundLanguages) => {
                    if (forceInputMode.data) {
                        return inputEl
                    }

                    if (foundLanguages.length === 0) {
                        // No languages found - we show the question and the input element
                        if (
                            on_no_known_languages !== undefined &&
                            on_no_known_languages.length > 0
                        ) {
                            return new Combine([on_no_known_languages, editButton]).SetClass(
                                "flex justify-end"
                            )
                        }
                        return inputEl
                    }

                    let rendered: BaseUIElement
                    if (foundLanguages.length === 1) {
                        const ln = foundLanguages[0]
                        let mapping = new Map<string, BaseUIElement>()
                        mapping.set("language", new Translation(all_languages[ln]))
                        rendered = new SubstitutedTranslation(
                            new Translation({ "*": single_render }, undefined),
                            tagSource,
                            state,
                            mapping
                        )
                    } else {
                        let mapping = new Map<string, BaseUIElement>()
                        const languagesList = new List(
                            foundLanguages.map((ln) => {
                                let mappingLn = new Map<string, BaseUIElement>()
                                mappingLn.set("language", new Translation(all_languages[ln]))
                                return new SubstitutedTranslation(
                                    new Translation({ "*": item_render }, undefined),
                                    tagSource,
                                    state,
                                    mappingLn
                                )
                            })
                        )
                        mapping.set("list", languagesList)
                        rendered = new SubstitutedTranslation(
                            new Translation({ "*": all_render }, undefined),
                            tagSource,
                            state,
                            mapping
                        )
                    }
                    return new Combine([rendered, editButton]).SetClass("flex justify-between")
                },
                [forceInputMode]
            )
        )
    }
}