MapComplete/UI/Input/Checkboxes.ts

import {InputElement} from "./InputElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import {Utils} from "../../Utils";
import BaseUIElement from "../BaseUIElement";

/**
 * Supports multi-input
 */
export default class CheckBoxes extends InputElement<number[]> {
    private static _nextId = 0;
    IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
    private readonly value: UIEventSource<number[]>
    private readonly _elements: BaseUIElement[];

    constructor(elements: BaseUIElement[], value = new UIEventSource<number[]>([])) {
        super();
        this.value = value;
        this._elements = Utils.NoNull(elements);
        this.SetClass("flex flex-col")

    }

    IsValid(ts: number[]): boolean {
        return ts !== undefined;

    }

    GetValue(): UIEventSource<number[]> {
        return this.value;
    }

    protected InnerConstructElement(): HTMLElement {
        const el = document.createElement("form")

        const value = this.value;
        const elements = this._elements;

        for (let i = 0; i < elements.length; i++) {

            let inputI = elements[i];
            const input = document.createElement("input")
            const id = CheckBoxes._nextId
            CheckBoxes._nextId++;
            input.id = "checkbox" + id

            input.type = "checkbox"
            input.classList.add("p-1","cursor-pointer","m-3","pl-3","mr-0")

            const label = document.createElement("label")
            label.htmlFor = input.id
            label.appendChild(inputI.ConstructElement())
            label.classList.add("block","w-full","p-2","cursor-pointer","bg-red")

            const wrapper = document.createElement("span")
            wrapper.classList.add("flex","w-full","border", "border-gray-400","m-1")
            wrapper.appendChild(input)
            wrapper.appendChild(label)
            el.appendChild(wrapper)
            
            value.addCallbackAndRun(selectedValues => {
                if (selectedValues === undefined) {
                    return;
                }
                if (selectedValues.indexOf(i) >= 0) {
                    input.checked = true;
                }


                if(input.checked){
                    wrapper.classList.remove("border-gray-400")
                    wrapper.classList.add("border-black")
                }else{
                    wrapper.classList.add("border-gray-400")
                    wrapper.classList.remove("border-black")
                }

            })

            input.onchange = () => {
                // Index = index in the list of already checked items
                const index = value.data.indexOf(i);
                if (input.checked && index < 0) {
                    value.data.push(i);
                    value.ping();
                } else if (index >= 0) {
                    value.data.splice(index, 1);
                    value.ping();
                }
            }


        }


        return el;
    }


}