Source: components/single_chooser/index.js

import TooltipWrapper from '../tooltip/tooltip_wrapper';
import style from './style.css';

/**
 * @brief A simple single-choice checkbox selector
 * 
 * @param label The string label to show alongside the selector.
 * @param tooltip The optional tooltip to be displayed when hovering the element's label.
 * @param options The list of options and their IDs.
 * @param noSelection If unchecking a box is allowed. Produces an ID of 0.
 * @param initial The initial ID to select.
 * @param structure_ref The string reference to store values at.
 * @param update A function to update an external data structure.
 * 
 * @returns  The SimpleChooser UI element.
 */
const SimpleChooser = ({
    label,
    tooltip,
    options,
    noSelection,
    initial,
    structure_ref,
    update
}) => {

    /**
     * @brief A function to update an external structure with a new value.
     * @param event The calling event, which contains the ID of the clicked checkbox.
     */
    const changeSelection = async (event) => {

        const selection = Number(event.target.value);

        if (initial != selection) {
            update(structure_ref, selection);
            event.target.checked = true;
        } else if (noSelection) {
            update(structure_ref, 0);
            event.target.checked = false;
        } else {
            event.target.checked = true;
        }
    }

    /**
     * @brief An object that holds a list of HTML option inputs and labels.
     */
    const options_list = options.map((option) => {
        return (
            <span key={option.idx}>
                <label className={style.option_group}>
                    <input
                        type="checkbox"
                        id={option.option}
                        name={option.option}
                        value={option.idx}
                        onChange={changeSelection}
                        checked={initial===option.idx}
                        aria-checked={initial===option.idx}
                        aria-describedby={option.option}
                    />
                    <TooltipWrapper
                    id={option.option}
                    content={option.tooltip}
                    label={option.option}
                    />
                </label>
            </span>
        )
    });

    /**
     * @brief Creates the chooser UI element.
     */
    return (
        <div role='group' aria-label={label} aria-describedby={tooltip ? tooltip.id : undefined}>
            <div>
                {tooltip && (
                    <TooltipWrapper
                      id={tooltip.id}
                      content={tooltip.content}
                      offset={tooltip.offset}
                      style={tooltip.style}
                      label={label}
                    />
                )}
            </div>
            {options_list}
        </div>
                
    )
}

export default SimpleChooser;