@inject IJsInterop JsInterop

<div class="dropdown @DropDownClass" @onmouseout="MouseLeft" @onmouseover="MouseEnter">
    <button class="btn dropdown-toggle @ButtonClass @_showClass"
            type="button"
            data-bs-toggle="dropdown"
            aria-expanded="@_isExpanded"
            @onclick="ToggleShown">
        @ButtonContent
    </button>
    <ul class="dropdown-menu @DropDownMenuClass @_showClass" @onclick="ToggleShown" >
        @ChildListItems
    </ul>
</div>

@code {
    private System.Timers.Timer? _collapseTimer;
    private string? _showClass;
    private bool _isExpanded;

    [Parameter]
    public string? ButtonClass { get; set; }

    [Parameter]
    public RenderFragment? ButtonContent { get; set; }

    [Parameter]
    public string? DropDownClass { get; set; }

    [Parameter]
    public string? DropDownMenuClass { get; set; }


    [Parameter]
    public RenderFragment? ChildListItems { get; set; }

    private void ToggleShown()
    {
        _isExpanded = !_isExpanded;
        _showClass = _isExpanded ? "show" : "";
    }

    private void MouseEnter()
    {
        _collapseTimer?.Dispose();
    }

    private void MouseLeft()
    {
        _collapseTimer?.Dispose();
        _collapseTimer = new System.Timers.Timer(1500);
        _collapseTimer.Elapsed += (sender, args) =>
        {
            _isExpanded = false;
            _showClass = "";
            InvokeAsync(StateHasChanged);
        };
        _collapseTimer.Start();
    }

}