@page "/hub"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation
@implements IAsyncDisposable

<PageTitle>Home</PageTitle>

<div class="form-group mb-3">
    <label>
        User:
        <input class="form-control" @bind="_userInput"/>
    </label>
</div>
<div class="form-group mb-3">
    <label>
        Message:
        <input class="form-control" @bind="_messageInput" size="50"/>
    </label>
</div>
<button class="btn btn-primary" @onclick="Send" disabled="@(!IsConnected)">Send</button>

<hr>

<ul id="messagesList">
    @foreach (var message in _messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    private HubConnection? _hubConnection;
    private List<string>   _messages = [];
    private string?        _userInput;
    private string?        _messageInput;

    protected override async Task OnInitializedAsync()
    {
        _hubConnection = new HubConnectionBuilder()
                         .WithUrl(Navigation.ToAbsoluteUri("/hubs/example"))
                         .AddMessagePackProtocol()
                         .Build();

        _hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            _messages.Add(encodedMsg);
            InvokeAsync(StateHasChanged);
        });

        await _hubConnection.StartAsync();
    }

    private async Task Send()
    {
        if (_hubConnection is not null)
        {
            await _hubConnection.SendAsync("SendMessage", _userInput, _messageInput);
        }
    }

    public bool IsConnected =>
        _hubConnection?.State == HubConnectionState.Connected;

    public async ValueTask DisposeAsync()
    {
        if (_hubConnection is not null)
        {
            await _hubConnection.DisposeAsync();
        }
    }

}