MapComplete/UI/Wikipedia/WikipediaBox.ts

import BaseUIElement from "../BaseUIElement"
import Locale from "../i18n/Locale"
import { VariableUiElement } from "../Base/VariableUIElement"
import { Translation } from "../i18n/Translation"
import Svg from "../../Svg"
import Combine from "../Base/Combine"
import Title from "../Base/Title"
import Wikipedia from "../../Logic/Web/Wikipedia"
import Wikidata, { WikidataResponse } from "../../Logic/Web/Wikidata"
import { TabbedComponent } from "../Base/TabbedComponent"
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import Loading from "../Base/Loading"
import { FixedUiElement } from "../Base/FixedUiElement"
import Translations from "../i18n/Translations"
import Link from "../Base/Link"
import WikidataPreviewBox from "./WikidataPreviewBox"
import { Paragraph } from "../Base/Paragraph"

export interface WikipediaBoxOptions {
    addHeader: boolean
    firstParagraphOnly: boolean
    noImages: boolean
    currentState?: UIEventSource<"loading" | "loaded" | "error">
}

export default class WikipediaBox extends Combine {
    constructor(wikidataIds: string[], options?: WikipediaBoxOptions) {
        const mainContents = []
        options = options ?? { addHeader: false, firstParagraphOnly: true, noImages: false }
        const pages = wikidataIds.map((entry) =>
            WikipediaBox.createLinkedContent(entry.trim(), options)
        )
        if (wikidataIds.length == 1) {
            const page = pages[0]
            mainContents.push(
                new Combine([
                    new Combine([
                        options.noImages
                            ? undefined
                            : Svg.wikipedia_ui()
                                  .SetStyle("width: 1.5rem")
                                  .SetClass("inline-block mr-3"),
                        page.titleElement,
                    ]).SetClass("flex"),
                    page.linkElement,
                ]).SetClass("flex justify-between align-middle")
            )
            mainContents.push(page.contents.SetClass("overflow-auto normal-background rounded-lg"))
        } else if (wikidataIds.length > 1) {
            const tabbed = new TabbedComponent(
                pages.map((page) => {
                    const contents = page.contents
                        .SetClass("overflow-auto normal-background rounded-lg block")
                        .SetStyle("max-height: inherit; height: inherit; padding-bottom: 3.3rem")
                    return {
                        header: page.titleElement.SetClass("pl-2 pr-2"),
                        content: new Combine([
                            page.linkElement
                                .SetStyle("top: 2rem; right: 2.5rem;")
                                .SetClass(
                                    "absolute subtle-background rounded-full p-3 opacity-50 hover:opacity-100 transition-opacity"
                                ),
                            contents,
                        ])
                            .SetStyle("max-height: inherit; height: inherit")
                            .SetClass("relative"),
                    }
                }),
                0,
                {
                    leftOfHeader: options.noImages
                        ? undefined
                        : Svg.wikipedia_svg()
                              .SetStyle("width: 1.5rem; align-self: center;")
                              .SetClass("mr-4"),
                    styleHeader: (header) =>
                        header.SetClass("subtle-background").SetStyle("height: 3.3rem"),
                }
            )
            tabbed.SetStyle("height: inherit; max-height: inherit; overflow: hidden")
            mainContents.push(tabbed)
        }

        super(mainContents)

        this.SetClass("block rounded-xl subtle-background m-1 p-2 flex flex-col").SetStyle(
            "max-height: inherit"
        )
    }

    private static createLinkedContent(
        entry: string,
        options: WikipediaBoxOptions
    ): {
        titleElement: BaseUIElement
        contents: BaseUIElement
        linkElement: BaseUIElement
    } {
        if (entry.match("[qQ][0-9]+")) {
            return WikipediaBox.createWikidatabox(entry, options)
        } else {
            return WikipediaBox.createWikipediabox(entry, options)
        }
    }

    /**
     * Given a '<language>:<article-name>'-string, constructs the wikipedia article
     */
    private static createWikipediabox(
        wikipediaArticle: string,
        options: WikipediaBoxOptions
    ): {
        titleElement: BaseUIElement
        contents: BaseUIElement
        linkElement: BaseUIElement
    } {
        const wp = Translations.t.general.wikipedia

        const article = Wikipedia.extractLanguageAndName(wikipediaArticle)
        if (article === undefined) {
            return {
                titleElement: undefined,
                contents: wp.noWikipediaPage,
                linkElement: undefined,
            }
        }
        const wikipedia = new Wikipedia({ language: article.language })
        const url = wikipedia.getPageUrl(article.pageName)
        const linkElement = new Link(
            Svg.pop_out_svg().SetStyle("width: 1.2rem").SetClass("block  "),
            url,
            true
        ).SetClass("flex items-center enable-links")

        return {
            titleElement: new Title(article.pageName, 3),
            contents: WikipediaBox.createContents(article.pageName, wikipedia, options),
            linkElement,
        }
    }

    /**
     * Given a `Q1234`, constructs a wikipedia box (if a wikipedia page is available) or wikidata box as fallback.
     *
     */
    private static createWikidatabox(
        wikidataId: string,
        options: WikipediaBoxOptions
    ): {
        titleElement: BaseUIElement
        contents: BaseUIElement
        linkElement: BaseUIElement
    } {
        const wp = Translations.t.general.wikipedia

        const wikiLink: Store<
            | [string, string, WikidataResponse]
            | "loading"
            | "failed"
            | ["no page", WikidataResponse]
        > = Wikidata.LoadWikidataEntry(wikidataId).map(
            (maybewikidata) => {
                if (maybewikidata === undefined) {
                    return "loading"
                }
                if (maybewikidata["error"] !== undefined) {
                    return "failed"
                }
                const wikidata = <WikidataResponse>maybewikidata["success"]
                if (wikidata === undefined) {
                    return "failed"
                }
                if (wikidata.wikisites.size === 0) {
                    return ["no page", wikidata]
                }

                const preferredLanguage = [
                    Locale.language.data,
                    "en",
                    Array.from(wikidata.wikisites.keys())[0],
                ]
                let language
                let pagetitle
                let i = 0
                do {
                    language = preferredLanguage[i]
                    pagetitle = wikidata.wikisites.get(language)
                    i++
                } while (pagetitle === undefined)
                return [pagetitle, language, wikidata]
            },
            [Locale.language]
        )

        const contents = new VariableUiElement(
            wikiLink.map((status) => {
                if (status === "loading") {
                    return new Loading(wp.loading.Clone()).SetClass("pl-6 pt-2")
                }

                if (status === "failed") {
                    return wp.failed.Clone().SetClass("alert p-4")
                }
                if (status[0] == "no page") {
                    const [_, wd] = <[string, WikidataResponse]>status
                    options.currentState?.setData("loaded")
                    return new Combine([
                        WikidataPreviewBox.WikidataResponsePreview(wd),
                        wp.noWikipediaPage.Clone().SetClass("subtle"),
                    ]).SetClass("flex flex-col p-4")
                }

                const [pagetitle, language, wd] = <[string, string, WikidataResponse]>status
                const wikipedia = new Wikipedia({ language })
                const quickFacts = WikidataPreviewBox.QuickFacts(wd)
                return WikipediaBox.createContents(pagetitle, wikipedia, {
                    topBar: quickFacts,
                    ...options,
                })
            })
        )

        const titleElement = new VariableUiElement(
            wikiLink.map((state) => {
                if (typeof state !== "string") {
                    const [pagetitle, _] = state
                    if (pagetitle === "no page") {
                        const wd = <WikidataResponse>state[1]
                        return new Title(Translation.fromMap(wd.labels), 3)
                    }
                    return new Title(pagetitle, 3)
                }
                return new Link(
                    new Title(wikidataId, 3),
                    "https://www.wikidata.org/wiki/" + wikidataId,
                    true
                )
            })
        )

        const linkElement = new VariableUiElement(
            wikiLink.map((state) => {
                if (typeof state !== "string") {
                    const [pagetitle, language] = state
                    const popout = options.noImages
                        ? "Source"
                        : Svg.pop_out_svg().SetStyle("width: 1.2rem").SetClass("block")
                    if (pagetitle === "no page") {
                        const wd = <WikidataResponse>state[1]
                        return new Link(popout, "https://www.wikidata.org/wiki/" + wd.id, true)
                    }

                    const url = `https://${language}.wikipedia.org/wiki/${pagetitle}`
                    return new Link(popout, url, true)
                }
                return undefined
            })
        ).SetClass("flex items-center enable-links")

        return {
            contents: contents,
            linkElement: linkElement,
            titleElement: titleElement,
        }
    }

    /**
     * Returns the actual content in a scrollable way for the given wikipedia page
     */
    private static createContents(
        pagename: string,
        wikipedia: Wikipedia,
        options: {
            topBar?: BaseUIElement
        } & WikipediaBoxOptions
    ): BaseUIElement {
        const htmlContent = wikipedia.GetArticle(pagename, options)
        const wp = Translations.t.general.wikipedia
        const contents: VariableUiElement = new VariableUiElement(
            htmlContent.map((htmlContent) => {
                if (htmlContent === undefined) {
                    // Still loading
                    return new Loading(wp.loading.Clone())
                }
                if (htmlContent["success"] !== undefined) {
                    let content: BaseUIElement = new FixedUiElement(htmlContent["success"])
                    if (options?.addHeader) {
                        content = new Combine([
                            new Paragraph(
                                new Link(wp.fromWikipedia, wikipedia.getPageUrl(pagename), true)
                            ),
                            new Paragraph(content),
                        ])
                    }
                    return content.SetClass("wikipedia-article")
                }
                if (htmlContent["error"]) {
                    console.warn("Loading wikipage failed due to", htmlContent["error"])
                    return wp.failed.Clone().SetClass("alert p-4")
                }

                return undefined
            })
        )

        htmlContent.addCallbackAndRunD((c) => {
            if (c["success"] !== undefined) {
                options.currentState?.setData("loaded")
            } else if (c["error"] !== undefined) {
                options.currentState?.setData("error")
            } else {
                options.currentState?.setData("loading")
            }
        })

        return new Combine([
            options?.topBar?.SetClass("border-2 border-grey rounded-lg m-1 mb-0"),
            contents.SetClass("block pl-6 pt-2"),
        ])
    }
}