MapComplete/UI/Input/DropDown.ts

import { InputElement } from "./InputElement"
import Translations from "../i18n/Translations"
import { UIEventSource } from "../../Logic/UIEventSource"
import BaseUIElement from "../BaseUIElement"

export class DropDown<T> extends InputElement<T> {
    private static _nextDropdownId = 0
    public IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false)

    private readonly _element: HTMLElement

    private readonly _value: UIEventSource<T>
    private readonly _values: { value: T; shown: string | BaseUIElement }[]

    /**
     *
     * const dropdown = new DropDown<number>("test",[{value: 42, shown: "the answer"}])
     * dropdown.GetValue().data // => 42
     */
    constructor(
        label: string | BaseUIElement,
        values: { value: T; shown: string | BaseUIElement }[],
        value: UIEventSource<T> = undefined,
        options?: {
            select_class?: string
        }
    ) {
        super()
        value = value ?? new UIEventSource<T>(values[0].value)
        this._value = value
        this._values = values
        if (values.length <= 1) {
            return
        }

        const id = DropDown._nextDropdownId
        DropDown._nextDropdownId++

        const el = document.createElement("form")
        this._element = el
        el.id = "dropdown" + id

        {
            const labelEl = Translations.W(label)?.ConstructElement()
            if (labelEl !== undefined) {
                const labelHtml = document.createElement("label")
                labelHtml.appendChild(labelEl)
                labelHtml.htmlFor = el.id
                el.appendChild(labelHtml)
            }
        }

        options = options ?? {}
        options.select_class =
            options.select_class ?? "w-full bg-indigo-100 p-1 rounded hover:bg-indigo-200"

        {
            const select = document.createElement("select")
            select.classList.add(...(options.select_class.split(" ") ?? []))
            for (let i = 0; i < values.length; i++) {
                const option = document.createElement("option")
                option.value = "" + i
                option.appendChild(Translations.W(values[i].shown).ConstructElement())
                select.appendChild(option)
            }
            el.appendChild(select)

            select.onchange = () => {
                const index = select.selectedIndex
                value.setData(values[index].value)
            }

            value.addCallbackAndRun((selected) => {
                for (let i = 0; i < values.length; i++) {
                    const value = values[i].value
                    if (value === selected) {
                        select.selectedIndex = i
                    }
                }
            })
        }

        this.onClick(() => {}) // by registering a click, the click event is consumed and doesn't bubble further to other elements, e.g. checkboxes
    }

    GetValue(): UIEventSource<T> {
        return this._value
    }

    IsValid(t: T): boolean {
        for (const value of this._values) {
            if (value.value === t) {
                return true
            }
        }
        return false
    }

    protected InnerConstructElement(): HTMLElement {
        return this._element
    }
}