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;