@using Shogi.Contracts.Types;
@inject IShogiApi ShogiApi
@inject AccountState Account;

<article class="game-board">
    <!-- Game board -->
    <section class="board" data-perspective="@Perspective">
        @for (var rank = 1; rank < 10; rank++)
        {
            foreach (var file in Files)
            {
                var position = $"{file}{rank}";
                var piece = session?.BoardState.Board[position];
                <div class="tile"
             data-position="@(position)"
             data-selected="@(piece != null && selectedPosition == position)"
             style="grid-area: @(position)"
             @onclick="() => OnClickTile(piece, position)">
                    <GamePiece Piece="piece" Perspective="Perspective" />
                </div>
            }
        }
        <div class="ruler vertical" style="grid-area: rank">
            <span>9</span>
            <span>8</span>
            <span>7</span>
            <span>6</span>
            <span>5</span>
            <span>4</span>
            <span>3</span>
            <span>2</span>
            <span>1</span>
        </div>
        <div class="ruler" style="grid-area: file">
            <span>A</span>
            <span>B</span>
            <span>C</span>
            <span>D</span>
            <span>E</span>
            <span>F</span>
            <span>G</span>
            <span>H</span>
            <span>I</span>
        </div>
    </section>
    <!-- Side board -->
    @if (session != null)
    {
        <aside class="side-board">
            <div class="hand">
                @foreach (var piece in OpponentHand)
                {
                    <div class="tile">
                        <GamePiece Piece="piece" Perspective="Perspective" />
                    </div>
                }
            </div>

            <div class="spacer" />

            <div class="hand">
                @foreach (var piece in UserHand)
                {
                    <div class="title" @onclick="() => OnClickHand(piece)">
                        <GamePiece Piece="piece" Perspective="Perspective" />
                    </div>
                }
            </div>
        </aside>

    }
</article>

@code {
    [Parameter]
    public string? SessionName { get; set; }

    static readonly string[] Files = new[] { "A", "B", "C", "D", "E", "F", "G", "H", "I" };
    WhichPlayer Perspective => Account.User?.Id == session?.Player1
        ? WhichPlayer.Player1
        : WhichPlayer.Player2;
    Session? session;
    IReadOnlyCollection<Piece> OpponentHand
    {
        get
        {
            if (this.session == null) return Array.Empty<Piece>();

            return Perspective == WhichPlayer.Player1
                ? this.session.BoardState.Player1Hand
                : this.session.BoardState.Player2Hand;
        }
    }
    IReadOnlyCollection<Piece> UserHand
    {
        get
        {
            if (this.session == null) return Array.Empty<Piece>();

            return Perspective == WhichPlayer.Player1
                ? this.session.BoardState.Player1Hand
                : this.session.BoardState.Player2Hand;
        }
    }

    string? selectedPosition;
    WhichPiece? selectedPiece;

    protected override async Task OnParametersSetAsync()
    {
        if (!string.IsNullOrWhiteSpace(SessionName))
        {
            this.session = await ShogiApi.GetSession(SessionName);
        }
    }

    void OnClickTile(Piece? piece, string position)
    {
        if (selectedPosition == null)
        {
            selectedPosition = position;
            return;
        }
        else if (selectedPosition == position)
        {
            selectedPosition = null;
            return;
        }
        else if (piece != null)
        {
            ShogiApi.PostMove(SessionName!, new Contracts.Api.MovePieceCommand
            {
                From = selectedPosition,
                To = position,
                IsP
            });
        }
    }
    void OnClickHand(Piece piece)
    {
        selectedPiece = piece.WhichPiece;
    }
}