@namespace Oqtane.Modules.Controls
@using System.Linq.Expressions;
@inherits LocalizableComponent

<input type="text" value="@Value" list="@_id" class="form-select" @onchange="(e => OnChange(e))" />
<datalist id="@_id" value="@Value">
    @foreach(var kvp in DataList)
    {
        <option value="@kvp.Value">@Localize(kvp.Key, kvp.Key)</option>
    }
</datalist>

@code {
    private string _id;

    [Parameter]
    public string Value { get; set; }

    [EditorRequired]
    [Parameter]    
    public Dictionary<string, string> DataList { get; set; }

    [EditorRequired]
    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

    protected override void OnInitialized()
    {
        // create unique id for component
        _id = "DataList_" + Guid.NewGuid().ToString("N");
    }

    protected void OnChange(ChangeEventArgs e)
    {
        if (string.IsNullOrWhiteSpace(e.Value.ToString())) { return; }
        Value = e.Value.ToString();
        if (ValueChanged.HasDelegate)
        {
            ValueChanged.InvokeAsync(Value);
        }
    }
}