MapComplete/UI/Input/SearchableMappingsSelector.ts

import { UIElement } from "../UIElement"
import { InputElement } from "./InputElement"
import BaseUIElement from "../BaseUIElement"
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import Translations from "../i18n/Translations"
import Locale from "../i18n/Locale"
import Combine from "../Base/Combine"
import { TextField } from "./TextField"
import Svg from "../../Svg"
import { VariableUiElement } from "../Base/VariableUIElement"

/**
 * A single 'pill' which can hide itself if the search criteria is not met
 */
class SelfHidingToggle extends UIElement implements InputElement<boolean> {
    private readonly _shown: BaseUIElement
    public readonly _selected: UIEventSource<boolean>
    public readonly isShown: Store<boolean> = new UIEventSource<boolean>(true)
    public readonly forceSelected: UIEventSource<boolean>
    private readonly _squared: boolean
    public constructor(
        shown: string | BaseUIElement,
        mainTerm: Record<string, string>,
        search: Store<string>,
        options?: {
            searchTerms?: Record<string, string[]>
            selected?: UIEventSource<boolean>
            forceSelected?: UIEventSource<boolean>
            squared?: boolean
        }
    ) {
        super()
        this._shown = Translations.W(shown)
        this._squared = options?.squared ?? false
        const searchTerms: Record<string, string[]> = {}
        for (const lng in options?.searchTerms ?? []) {
            if (lng === "_context") {
                continue
            }
            searchTerms[lng] = options?.searchTerms[lng]?.map(SelfHidingToggle.clean)
        }
        for (const lng in mainTerm) {
            if (lng === "_context") {
                continue
            }
            const main = SelfHidingToggle.clean(mainTerm[lng])
            searchTerms[lng] = [main].concat(searchTerms[lng] ?? [])
        }
        const selected = (this._selected = options?.selected ?? new UIEventSource<boolean>(false))
        const forceSelected = (this.forceSelected =
            options?.forceSelected ?? new UIEventSource<boolean>(false))
        this.isShown = search.map(
            (s) => {
                if (s === undefined || s.length === 0) {
                    return true
                }
                if (selected.data && !forceSelected.data) {
                    return true
                }
                s = s?.trim()?.toLowerCase()
                if (searchTerms[Locale.language.data]?.some((t) => t.indexOf(s) >= 0)) {
                    return true
                }
                if (searchTerms["*"]?.some((t) => t.indexOf(s) >= 0)) {
                    return true
                }
                return false
            },
            [selected, Locale.language]
        )

        const self = this
        this.isShown.addCallbackAndRun((shown) => {
            if (shown) {
                self.RemoveClass("hidden")
            } else {
                self.SetClass("hidden")
            }
        })
    }

    private static clean(s: string): string {
        return s?.trim()?.toLowerCase()?.replace(/[-]/, "")
    }

    GetValue(): UIEventSource<boolean> {
        return this._selected
    }

    IsValid(t: boolean): boolean {
        return true
    }

    protected InnerRender(): string | BaseUIElement {
        let el: BaseUIElement = this._shown
        const selected = this._selected

        selected.addCallbackAndRun((selected) => {
            if (selected) {
                el.SetClass("border-4")
                el.RemoveClass("border")
                el.SetStyle("margin: 0")
            } else {
                el.SetStyle("margin: 3px")
                el.SetClass("border")
                el.RemoveClass("border-4")
            }
        })

        const forcedSelection = this.forceSelected
        el.onClick(() => {
            if (forcedSelection.data) {
                selected.setData(true)
            } else {
                selected.setData(!selected.data)
            }
        })

        if (!this._squared) {
            el.SetClass("rounded-full")
        }
        return el.SetClass("border border-black p-1 px-4")
    }
}

/**
 * The searchable mappings selector is a selector which shows various pills from which one (or more) options can be chosen.
 * A searchfield can be used to filter the values
 */
export class SearchablePillsSelector<T> extends Combine implements InputElement<T[]> {
    private readonly selectedElements: UIEventSource<T[]>

    public readonly someMatchFound: Store<boolean>

    /**
     *
     * @param values
     * @param options
     */
    constructor(
        values: {
            show: BaseUIElement
            value: T
            mainTerm: Record<string, string>
            searchTerms?: Record<string, string[]>
        }[],
        options?: {
            mode?: "select-one" | "select-many"
            selectedElements?: UIEventSource<T[]>
            searchValue?: UIEventSource<string>
            onNoMatches?: BaseUIElement
            onNoSearchMade?: BaseUIElement
            /**
             * Shows this if there are many (>200) possible mappings
             */
            onManyElements?: BaseUIElement
            onManyElementsValue?: UIEventSource<T[]>
            selectIfSingle?: false | boolean
            searchAreaClass?: string
            hideSearchBar?: false | boolean
        }
    ) {
        const search = new TextField({ value: options?.searchValue })

        const searchBar = options?.hideSearchBar
            ? undefined
            : new Combine([
                  Svg.search_svg().SetClass("w-8 normal-background"),
                  search.SetClass("w-full"),
              ]).SetClass("flex items-center border-2 border-black m-2")

        const searchValue = search.GetValue().map((s) => s?.trim()?.toLowerCase())
        const selectedElements = options?.selectedElements ?? new UIEventSource<T[]>([])
        const mode = options?.mode ?? "select-one"
        const onEmpty = options?.onNoMatches ?? Translations.t.general.noMatchingMapping

        const mappedValues: {
            show: SelfHidingToggle
            mainTerm: Record<string, string>
            value: T
        }[] = values.map((v) => {
            const vIsSelected = new UIEventSource(false)

            selectedElements.addCallbackAndRunD((selectedElements) => {
                vIsSelected.setData(selectedElements.some((t) => t === v.value))
            })

            vIsSelected.addCallback((selected) => {
                if (selected) {
                    if (mode === "select-one") {
                        selectedElements.setData([v.value])
                    } else if (!selectedElements.data.some((t) => t === v.value)) {
                        selectedElements.data.push(v.value)
                        selectedElements.ping()
                    }
                } else {
                    for (let i = 0; i < selectedElements.data.length; i++) {
                        const t = selectedElements.data[i]
                        if (t == v.value) {
                            selectedElements.data.splice(i, 1)
                            selectedElements.ping()
                            break
                        }
                    }
                }
            })

            const toggle = new SelfHidingToggle(v.show, v.mainTerm, searchValue, {
                searchTerms: v.searchTerms,
                selected: vIsSelected,
                squared: mode === "select-many",
            })

            return {
                ...v,
                show: toggle,
            }
        })

        let totalShown: Store<number>
        if (options.selectIfSingle) {
            let forcedSelection: { value: T; show: SelfHidingToggle } = undefined
            totalShown = searchValue.map(
                (_) => {
                    let totalShown = 0
                    let lastShownValue: { value: T; show: SelfHidingToggle }
                    for (const mv of mappedValues) {
                        const valueIsShown = mv.show.isShown.data
                        if (valueIsShown) {
                            totalShown++
                            lastShownValue = mv
                        }
                    }
                    if (totalShown == 1) {
                        if (selectedElements.data?.indexOf(lastShownValue.value) < 0) {
                            selectedElements.setData([lastShownValue.value])
                            lastShownValue.show.forceSelected.setData(true)
                            forcedSelection = lastShownValue
                        }
                    } else if (forcedSelection != undefined) {
                        forcedSelection?.show?.forceSelected?.setData(false)
                        forcedSelection = undefined
                        selectedElements.setData([])
                    }

                    return totalShown
                },
                mappedValues.map((mv) => mv.show.GetValue())
            )
        } else {
            totalShown = searchValue.map(
                (_) => mappedValues.filter((mv) => mv.show.isShown.data).length,
                mappedValues.map((mv) => mv.show.GetValue())
            )
        }
        const tooMuchElementsCutoff = 200
        options?.onManyElementsValue?.map(
            (value) => {
                console.log("Installing toMuchElementsValue", value)
                if (tooMuchElementsCutoff <= totalShown.data) {
                    selectedElements.setData(value)
                    selectedElements.ping()
                }
            },
            [totalShown]
        )

        super([
            searchBar,
            new VariableUiElement(
                Locale.language.map(
                    (lng) => {
                        if (totalShown.data >= 200) {
                            return options?.onManyElements ?? Translations.t.general.useSearch
                        }
                        if (
                            options?.onNoSearchMade !== undefined &&
                            (searchValue.data === undefined || searchValue.data.length === 0)
                        ) {
                            return options?.onNoSearchMade
                        }
                        if (totalShown.data == 0) {
                            return onEmpty
                        }

                        mappedValues.sort((a, b) => (a.mainTerm[lng] < b.mainTerm[lng] ? -1 : 1))
                        return new Combine(mappedValues.map((e) => e.show))
                            .SetClass("flex flex-wrap w-full content-start")
                            .SetClass(options?.searchAreaClass ?? "")
                    },
                    [totalShown, searchValue]
                )
            ),
        ])
        this.selectedElements = selectedElements
        this.someMatchFound = totalShown.map((t) => t > 0)
    }

    public GetValue(): UIEventSource<T[]> {
        return this.selectedElements
    }

    IsValid(t: T[]): boolean {
        return true
    }
}