Source: components/patterns/index.js

import style from './style.css';
import React from "react";
import { useSignal } from '@preact/signals';

/**
 * @brief Displays a selectable drop down list of LED strip patterns
 * 
 * @param initialID The pattern ID to display initially.
 * @param structure_ref The string reference to store values at.
 * @param update A function to update an external data structure.
 * @param patterns A list of patterns and their IDs.
 * 
 * @returns The UI element itself.
 */
const Patterns = ({
    initialID,
    structure_ref,
    update,
    patterns
}) => {

    // An object to store the current selected ID of the drop down.
    const current = useSignal(initialID);

    /**
     * @brief Creates a list of HTML list options based on the "patterns" parameter.
     */
    const patternOptions = patterns.map(p => {
        return <option key={p.index} value={p.index}>
            {p.name}
        </option>
    });

    /**
     * @brief Updates the selected ID and sends it to an external data structure.
     * @param event The event that stored the newly selected ID.
     */
    const handleSelection = async (event) => {
        current.value = Number(event.target.value);
        update(structure_ref, current.value);
    }

    return (
        <div>
            <div>
                <label className={style.label} htmlFor="pattern-options">Current Pattern</label>
                <select className={style.label}
                        id="pattern-options"
                        value={initialID}
                        onChange={handleSelection}
                >
                    {patternOptions}
                </select>
            </div>
        </div>
    );
}

export default Patterns;