@inject DbService DbService

<label for="@Id" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">@Label</label>
<div class="flex">
    <div class="relative flex-grow">
        <input type="text" id="@Id" autocomplete="off" class="outline-0 shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-l-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white" value="@Value" @oninput="OnInputChanged" placeholder="@Placeholder">
    </div>
    <button type="button" id="generate-username-button" class="px-3 text-gray-500 bg-gray-200 hover:bg-gray-300 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-r-lg text-sm dark:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800" @onclick="GenerateNewUsername">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
        </svg>
    </button>
</div>

@code {
    /// <summary>
    /// Id for the input field.
    /// </summary>
    [Parameter]
    public string Id { get; set; } = string.Empty;

    /// <summary>
    /// Label for the input field.
    /// </summary>
    [Parameter]
    public string Label { get; set; } = "Username";

    /// <summary>
    /// Value of the input field.
    /// </summary>
    [Parameter]
    public string Value { get; set; } = string.Empty;

    /// <summary>
    /// Callback that is triggered when the value changes.
    /// </summary>
    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

    /// <summary>
    /// Callback that is triggered when the generate new username button is clicked.
    /// </summary>
    [Parameter]
    public EventCallback OnGenerateNewUsername { get; set; }

    /// <summary>
    /// Placeholder text for the input field.
    /// </summary>
    [Parameter]
    public string Placeholder { get; set; } = string.Empty;

    /// <summary>                             
    /// Invoke data binding ValueChanged param.
    /// </summary>
    /// <param name="e"></param>
    private async Task OnInputChanged(ChangeEventArgs e)
    {
        Value = e.Value?.ToString() ?? string.Empty;
        await ValueChanged.InvokeAsync(Value);
    }

    /// <summary>
    /// Invoke parent assigned method that takes care of generating the username.
    /// </summary>
    private async Task GenerateNewUsername()
    {
        if (OnGenerateNewUsername.HasDelegate)
        {
            await OnGenerateNewUsername.InvokeAsync();
        }
    }
}
