import { SpecialVisualisationParams, SpecialVisualizationSvelte } from "../../SpecialVisualization"
import SvelteUIElement from "../../Base/SvelteUIElement"
import { default as LanguageElementSvelte } from "./LanguageElement.svelte"

export class LanguageElement extends SpecialVisualizationSvelte {
    funcName: string = "language_chooser"
    needsUrls = []

    docs: string =
        "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; type?: string }[] = [
        {
            name: "key",
            required: true,
            type:"key",
            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 `<key>:nl=yes` if _nl_ is picked ",
        },
        {
            name: "question",
            required: true,
            type: "translation",
            doc: "What to ask if no questions are known",
        },
        {
            name: "render_list_item",
            type: "translation",

            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",
            type: "translation",
            doc: "What will be shown if the feature only supports a single language",
            required: true,
        },
        {
            type: "translation",
            name: "render_all",
            doc: "The full rendering. U0se `{list}` to show where the list of languages must come. Optional if mode=single",
            defaultValue: "{list()}",
        },
        {
            name: "no_known_languages",
            type: "translation",
            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",
        },
    ]

    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()}"}
     }
     \`\`\`
    `

    constr(
        {
            state,
            tags,
            args,
            feature,
            layer,
        }: SpecialVisualisationParams,
    ): SvelteUIElement {
        let [key, question, item_render, single_render, all_render, on_no_known_languages] =
            args
        if (item_render === undefined || item_render.trim() === "") {
            item_render = "{language()}"
        }
        if (all_render === undefined || all_render.length == 0) {
            all_render = "{list()}"
        }
        if (single_render.indexOf("{language()") < 0) {
            throw (
                "Error while calling language_chooser: render_single_language must contain '{language()}' but it is " +
                single_render
            )
        }
        if (item_render.indexOf("{language()") < 0) {
            throw (
                "Error while calling language_chooser: render_list_item must contain '{language()}' but it is " +
                item_render
            )
        }
        if (all_render.indexOf("{list()") < 0) {
            throw "Error while calling language_chooser: render_all must contain '{list()}'"
        }
        if (on_no_known_languages === "") {
            on_no_known_languages = undefined
        }

        return new SvelteUIElement(LanguageElementSvelte, {
            key,
            tags,
            state,
            feature,
            layer,
            question,
            on_no_known_languages,
            single_render,
            item_render,
        })
    }
}