@inject HttpClient Client;
@inject Blazored.LocalStorage.ILocalStorageService LocalStorage;

@using TaikoWebUI.Utilities;

<MudCard Outlined="true" Elevation="0">
    <MudCardHeader>
        <MudGrid Spacing="2" Class="align-center pb-2">
            <MudItem xs="6">
                <MudText Typo="Typo.h6">@Localizer["Leaderboard"]</MudText>
            </MudItem>

            <MudItem xs="6">
                <MudStack Justify="Justify.FlexEnd" Row="true">
                    <MudToggleGroup T="string" Label="@Localizer["Difficulty"]" Dense="true" ValueChanged="(value) => OnDifficultyChange(value)" Value="SelectedDifficulty" Style="width:300px">
                        @foreach (var difficulty in Enum.GetValues(typeof(Difficulty)))
                        {
                            if ((Difficulty)difficulty == Difficulty.None)
                            {
                                continue;
                            }

                            <MudToggleItem Value="@difficulty.ToString()">
                                <div class="d-flex align-center">
                                    <img src="@($"/images/difficulty_{difficulty}.png")" alt="@difficulty.ToString()" title="@difficulty.ToString()" style="@Constants.ICON_STYLE"/>
                                </div>
                            </MudToggleItem>
                        }
                    </MudToggleGroup>
                </MudStack>
            </MudItem>
        </MudGrid>
    </MudCardHeader>
    <MudCardContent Class="pa-0">
        @if (response == null || response.LeaderboardData.Count == 0)
        {
            <MudGrid>
                <MudItem xs="12">
                    <MudText Align="Align.Center" Class="my-16">
                        @Localizer["No Data"]
                    </MudText>
                </MudItem>
            </MudGrid>
        }
        else
        {
            <MudTable RowClassFunc="@GetActiveRowClass" Loading="isLoading" Items="@response.LeaderboardData" Class="leaderboard-table" Elevation="0" Outlined="false" Dense="true" Striped="true">
                <HeaderContent>
                    <MudTh>@Localizer["Rank"]</MudTh>
                    <MudTh>@Localizer["Player"]</MudTh>
                    <MudTh>@Localizer["Score"]</MudTh>
                    <MudTh>@Localizer["Crown"]</MudTh>
                    <MudTh>@Localizer["Rank"]</MudTh>
                </HeaderContent>
                <RowTemplate>
                    <MudTd>@context.Rank</MudTd>
                    <MudTd>
                        <MudStack Row="true" AlignItems="AlignItems.Baseline">
                            <MudText Typo="Typo.body1">@context.UserName</MudText>
                            <MudText Typo="Typo.caption" Style="color: #9E9E9E">(@Localizer["ID"]: @context.Baid)</MudText>
                        </MudStack>
                    </MudTd>
                    <MudTd>@context.BestScore</MudTd>
                    <MudTd>
                        <img src="@($"/images/crown_{context.BestCrown}.png")" alt="@(ScoreUtils.GetCrownText(context.BestCrown))" title="@(ScoreUtils.GetCrownText(context.BestCrown))" style="@Constants.ICON_STYLE"/>
                    </MudTd>
                    <MudTd>
                        @if (context.BestScoreRank is not ScoreRank.None)
                        {
                            <img src="@($"/images/rank_{context.BestScoreRank}.png")" alt="@(ScoreUtils.GetRankText(context.BestScoreRank))" title="@(ScoreUtils.GetRankText(context.BestScoreRank))" style="@Constants.ICON_STYLE"/>
                        }
                        else
                        {
                            <MudText Typo="Typo.body1">—</MudText>
                        }  
                    </MudTd>
                </RowTemplate>
                <PagerContent>
                    @if (TotalPages > 1)
                    {
                        <div class="d-flex flex-column align-center">
                            <MudPagination Class="pa-4" Rectangular="true" DisableElevation="true" Count="@TotalPages" Selected="currentPage" SelectedChanged="(page) => OnPageChange(page)" BoundaryCount="1" MiddleCount="3" />
                        </div>
                    }
                </PagerContent>
            </MudTable>
        }
    </MudCardContent>
</MudCard>