Shogi/Shogi.UI/Pages/Home/GameBrowser.razor

@implements IDisposable;

@using Shogi.Contracts.Socket;
@using Shogi.Contracts.Types;
@using System.ComponentModel.DataAnnotations;
@using System.Net;
@using System.Text.Json;

@inject IShogiApi ShogiApi;
@inject ShogiSocket ShogiSocket;
@inject AccountState Account;

<section class="game-browser">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#search-pane">Search</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#create-pane">Create</button>
        </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade show active" id="search-pane">
            <h3>Games you&apos;re seated at</h3>
            <div class="list-group">
                @if (!joinedSessions.Any())
                {
                    <p>You have not joined any games.</p>
                }
                @foreach (var session in joinedSessions)
                {
                    <button class="list-group-item list-group-item-action @ActiveCss(session)" @onclick="() => OnClickSession(session)">
                        <span>@session.Name</span>
                        <span>(@session.PlayerCount/2)</span>
                    </button>
                }
            </div>
            <h3>Other games</h3>
            <div class="list-group">
                @if (!otherSessions.Any())
                {
                    <p>You have not joined any games.</p>
                }
                @foreach (var session in otherSessions)
                {
                    <button class="list-group-item list-group-item-action @ActiveCss(session)" @onclick="() => OnClickSession(session)">
                        <span>@session.Name</span>
                        <span>(@session.PlayerCount/2)</span>
                    </button>
                }
            </div>
        </div>
        <div class="tab-pane fade" id="create-pane">
            <EditForm Model="createForm" OnValidSubmit="async () => await CreateSession()">
                <DataAnnotationsValidator />

                <h3>Start a new session</h3>
                <div class="form-floating mb-3">
                    <InputText type="text" class="form-control" id="session-name" placeholder="Session name" @bind-Value="createForm.Name" />
                    <label for="session-name">Session name</label>
                </div>
                <div class="flex-between mb-3">
                    <div class="form-check">
                        <InputCheckbox class="form-check-input" role="switch" id="session-privacy" @bind-Value="createForm.IsPrivate" />
                        <label class="form-check-label" for="session-privacy">Private?</label>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>

                @if (createSessionStatusCode == HttpStatusCode.Created)
                {
                    <div class="alert alert-success" role="alert">
                        Session started. View it in the search tab.
                    </div>
                }
                else if (createSessionStatusCode == HttpStatusCode.Conflict)
                {
                    <div class="alert alert-warning" role="alert">
                        The name you chose is taken; choose another.
                    </div>
                }
            </EditForm>
        </div>
    </div>
</section>

@code {
    [Parameter]
    public Action<SessionMetadata>? ActiveSessionChanged { get; set; }

    private CreateForm createForm = new();
    private SessionMetadata[] joinedSessions = Array.Empty<SessionMetadata>();
    private SessionMetadata[] otherSessions = Array.Empty<SessionMetadata>();
    private SessionMetadata? activeSession;
    private HttpStatusCode? createSessionStatusCode;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        ShogiSocket.OnSessionCreated += FetchSessions;
        ShogiSocket.OnSessionJoined += OnSessionJoined_FetchSessions;
        Account.LoginChangedEvent += LoginChangedEvent_FetchSessions;
    }

    string ActiveCss(SessionMetadata s) => s == activeSession ? "active" : string.Empty;

    void OnClickSession(SessionMetadata s)
    {
        activeSession = s;
        ActiveSessionChanged?.Invoke(s);
    }

    Task OnSessionJoined_FetchSessions(SessionJoinedByPlayerSocketMessage args) => FetchSessions();

    Task LoginChangedEvent_FetchSessions(LoginEventArgs args)
    {
        if (args.User != null)
        {
            return FetchSessions();
        }
        return Task.CompletedTask;
    }

    async Task FetchSessions()
    {
        var sessions = await ShogiApi.GetSessionsPlayerCount();
        if (sessions != null)
        {
            this.joinedSessions = sessions.PlayerHasJoinedSessions.ToArray();
            this.otherSessions = sessions.AllOtherSessions.ToArray();
            StateHasChanged();
        }
    }

    async Task CreateSession()
    {
        createSessionStatusCode = await ShogiApi.PostSession(createForm.Name, createForm.IsPrivate);
    }

    public void Dispose()
    {
        ShogiSocket.OnSessionCreated -= FetchSessions;
        ShogiSocket.OnSessionJoined -= OnSessionJoined_FetchSessions;
        Account.LoginChangedEvent -= LoginChangedEvent_FetchSessions;
    }

    private class CreateForm
    {
        [Required]
        public string Name { get; set; } = string.Empty;
        public bool IsPrivate { get; set; }
    }
}