MapComplete/UI/Input/FloorLevelInputElement.ts

import { InputElement } from "./InputElement"
import { Store, Stores, UIEventSource } from "../../Logic/UIEventSource"
import Combine from "../Base/Combine"
import Slider from "./Slider"
import { ClickableToggle } from "./Toggle"
import { FixedUiElement } from "../Base/FixedUiElement"
import { VariableUiElement } from "../Base/VariableUIElement"
import BaseUIElement from "../BaseUIElement"

export default class FloorLevelInputElement
    extends VariableUiElement
    implements InputElement<string>
{
    private readonly _value: UIEventSource<string>

    constructor(
        currentLevels: Store<Record<string, number>>,
        options?: {
            value?: UIEventSource<string>
        }
    ) {
        const value = options?.value ?? new UIEventSource<string>("0")
        super(
            currentLevels.map((levels) => {
                const allLevels = Object.keys(levels)
                allLevels.sort((a, b) => {
                    const an = Number(a)
                    const bn = Number(b)
                    if (isNaN(an) || isNaN(bn)) {
                        return a < b ? -1 : 1
                    }
                    return an - bn
                })
                return FloorLevelInputElement.constructPicker(allLevels, value)
            })
        )

        this._value = value
    }

    private static constructPicker(levels: string[], value: UIEventSource<string>): BaseUIElement {
        let slider = new Slider(0, levels.length - 1, { vertical: true })
        const toggleClass =
            "flex border-2 border-blue-500 w-10 h-10 place-content-center items-center border-box"
        slider
            .SetClass("flex elevator w-10")
            .SetStyle(`height: ${2.5 * levels.length}rem; background: #00000000`)

        const values = levels.map((data, i) =>
            new ClickableToggle(
                new FixedUiElement(data).SetClass("font-bold active bg-subtle " + toggleClass),
                new FixedUiElement(data).SetClass("normal-background " + toggleClass),
                slider.GetValue().sync(
                    (sliderVal) => {
                        return sliderVal === i
                    },
                    [],
                    (isSelected) => {
                        return isSelected ? i : slider.GetValue().data
                    }
                )
            )
                .ToggleOnClick()
                .SetClass("flex w-10 h-10")
        )

        values.reverse(/* This is a new list, no side-effects */)
        const combine = new Combine([new Combine(values), slider])
        combine.SetClass("flex flex-row overflow-hidden")

        slider.GetValue().addCallbackD((i) => {
            if (levels === undefined) {
                return
            }
            if (levels[i] == undefined) {
                return
            }
            value.setData(levels[i])
        })
        value.addCallbackAndRunD((level) => {
            const i = levels.findIndex((l) => l === level)
            slider.GetValue().setData(i)
        })
        return combine
    }

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

    IsValid(t: string): boolean {
        return false
    }
}