import { useRef, useState } from 'preact/hooks'
import { Icon } from './Icon.jsx'

let ids = 0

function generateId() {
    return 'combo-id-' + ids++
}

export const ComboBox = ({ options, value, setValue }) => {
    const [uid] = useState(() => generateId())
    const selectRef = useRef()

    return (
        <div class="input-combo">
            <select ref={selectRef} id={uid} onInput={e => setValue(e.target.value)}>
                {options.map(option => (
                    <option value={option.value} selected={option.value === value}>
                        {option.label}
                    </option>
                ))}
            </select>
            <label class="icon" for={uid}>
                <Icon name="expand_more" />
            </label>
        </div>
    )
}