MapComplete/UI/Wikipedia/WikidataSearchBox.ts

import Combine from "../Base/Combine"
import { InputElement } from "../Input/InputElement"
import { TextField } from "../Input/TextField"
import Translations from "../i18n/Translations"
import { ImmutableStore, Store, Stores, UIEventSource } from "../../Logic/UIEventSource"
import Wikidata, { WikidataResponse } from "../../Logic/Web/Wikidata"
import Locale from "../i18n/Locale"
import { VariableUiElement } from "../Base/VariableUIElement"
import WikidataPreviewBox from "./WikidataPreviewBox"
import Title from "../Base/Title"
import WikipediaBox from "./WikipediaBox"
import Svg from "../../Svg"
import Loading from "../Base/Loading"

export default class WikidataSearchBox extends InputElement<string> {
    private static readonly _searchCache = new Map<string, Promise<WikidataResponse[]>>()
    IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false)
    private readonly wikidataId: UIEventSource<string>
    private readonly searchText: UIEventSource<string>
    private readonly instanceOf?: number[]
    private readonly notInstanceOf?: number[]

    constructor(options?: {
        searchText?: UIEventSource<string>
        value?: UIEventSource<string>
        notInstanceOf?: number[]
        instanceOf?: number[]
    }) {
        super()
        this.searchText = options?.searchText
        this.wikidataId = options?.value ?? new UIEventSource<string>(undefined)
        this.instanceOf = options?.instanceOf
        this.notInstanceOf = options?.notInstanceOf
    }

    GetValue(): UIEventSource<string> {
        return this.wikidataId
    }

    IsValid(t: string): boolean {
        return t.startsWith("Q") && !isNaN(Number(t.substring(1)))
    }

    protected InnerConstructElement(): HTMLElement {
        const searchField = new TextField({
            placeholder: Translations.t.general.wikipedia.searchWikidata,
            value: this.searchText,
            inputStyle: "width: calc(100% - 0.5rem); border: 1px solid black",
        })
        const selectedWikidataId = this.wikidataId

        const tooShort = new ImmutableStore<{ success: WikidataResponse[] }>({ success: undefined })
        const searchResult: Store<{ success?: WikidataResponse[]; error?: any }> = searchField
            .GetValue()
            .bind((searchText) => {
                if (searchText.length < 3) {
                    return tooShort
                }
                const lang = Locale.language.data
                const key = lang + ":" + searchText
                let promise = WikidataSearchBox._searchCache.get(key)
                if (promise === undefined) {
                    promise = Wikidata.searchAndFetch(searchText, {
                        lang,
                        maxCount: 5,
                        notInstanceOf: this.notInstanceOf,
                        instanceOf: this.instanceOf,
                    })
                    WikidataSearchBox._searchCache.set(key, promise)
                }
                return Stores.FromPromiseWithErr(promise)
            })

        const previews = new VariableUiElement(
            searchResult.map(
                (searchResultsOrFail) => {
                    if (searchField.GetValue().data.length === 0) {
                        return Translations.t.general.wikipedia.doSearch
                    }

                    if (searchField.GetValue().data.length < 3) {
                        return Translations.t.general.wikipedia.searchToShort
                    }

                    if (searchResultsOrFail === undefined) {
                        return new Loading(Translations.t.general.loading)
                    }

                    if (searchResultsOrFail.error !== undefined) {
                        return new Combine([
                            Translations.t.general.wikipedia.failed.Clone().SetClass("alert"),
                            searchResultsOrFail.error,
                        ])
                    }

                    const searchResults = searchResultsOrFail.success
                    if (searchResults.length === 0) {
                        return Translations.t.general.wikipedia.noResults.Subs({
                            search: searchField.GetValue().data ?? "",
                        })
                    }

                    return new Combine(
                        searchResults.map((wikidataresponse) => {
                            const el = WikidataPreviewBox.WikidataResponsePreview(
                                wikidataresponse
                            ).SetClass(
                                "rounded-xl p-1 sm:p-2 md:p-3 m-px border-2 sm:border-4 transition-colors"
                            )
                            el.onClick(() => {
                                selectedWikidataId.setData(wikidataresponse.id)
                            })
                            selectedWikidataId.addCallbackAndRunD((selected) => {
                                if (selected === wikidataresponse.id) {
                                    el.SetClass("subtle-background border-attention")
                                } else {
                                    el.RemoveClass("subtle-background")
                                    el.RemoveClass("border-attention")
                                }
                            })
                            return el
                        })
                    ).SetClass("flex flex-col")
                },
                [searchField.GetValue()]
            )
        )

        const full = new Combine([
            new Title(Translations.t.general.wikipedia.searchWikidata, 3).SetClass("m-2"),
            new Combine([
                Svg.search_ui().SetStyle("width: 1.5rem"),
                searchField.SetClass("m-2 w-full"),
            ]).SetClass("flex"),
            previews,
        ]).SetClass("flex flex-col border-2 border-black rounded-xl m-2 p-2")

        return new Combine([
            new VariableUiElement(
                selectedWikidataId.map((wid) => {
                    if (wid === undefined) {
                        return undefined
                    }
                    return new WikipediaBox(wid.split(";"))
                })
            ).SetStyle("max-height:12.5rem"),
            full,
        ]).ConstructElement()
    }
}