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[]
    private styleWrapperOverride = ''
    private styleInputOverride = ''
    private styleLabelOverride = ''

    constructor(
        elements: BaseUIElement[],
        value = new UIEventSource<number[]>([]),
        styleFormOverride = '',
        styleWrapperOverride = '',
        styleInputOverride = '',
        styleLabelOverride = ''
    ) {
        super()
        this.value = value
        this._elements = Utils.NoNull(elements)
        this.SetClass('flex flex-col')
        this.SetStyle(styleFormOverride)
        this.styleWrapperOverride = styleWrapperOverride
        this.styleInputOverride = styleInputOverride
        this.styleLabelOverride = styleLabelOverride
    }

    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')
            input.style.cssText = this.styleInputOverride

            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'
            )
            label.style.cssText = this.styleLabelOverride

            const wrapper = document.createElement('span')
            wrapper.classList.add(
                'wrapper',
                'flex',
                'w-full',
                'border',
                'border-gray-400',
                'm-1'
            )
            wrapper.style.cssText = this.styleWrapperOverride
            wrapper.appendChild(input)
            wrapper.appendChild(label)
            el.appendChild(wrapper)

            value.addCallbackAndRunD((selectedValues) => {
                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
    }
}