import * as React from "react";
import * as ClientModel from '../models/form.client.models';

export interface IProps {
    definition: ClientModel.FormInput
}

export function DropdownSingleInputElement(props: IProps) {
    const {definition} = props;
    return <div>
        <label>{definition.label}</label>
        <input list="itemList" className="form-control"/>
        <datalist id="itemList">
            {definition.options.map(option => createOptionsSection(option))}
        </datalist>
    </div>
}

function createOptionsSection(optionComponent: ClientModel.DropdownOption) {
    return <option key={optionComponent.value} value={optionComponent.value}/>
}