@page "/user/{CardId:long}"
@using SharedProject.models
@using SharedProject.enums

<PageTitle>User</PageTitle>
<MudContainer>
@if (pageLoading)
{
    <MudSkeleton Width="1184px" Height="57px"/>
    <MudSkeleton Width="1184px" Height="57px"/>
    <MudSkeleton Width="1184px" Height="57px"/>
}
else
{
    if (userDetail is null)
    {
        <MudText Typo="Typo.h3">No Data</MudText>
    }
    else
    {
        <MudExpansionPanels>
        <MudExpansionPanel Text="Total Result">
            <MudList>
                <MudListSubheader>Player Name: @userDetail.PlayerName</MudListSubheader>
                <MudListItem>Total Score: @userDetail.TotalScore</MudListItem>
                <MudListItem>Average Score: @userDetail.AverageScore</MudListItem>
                <MudListItem>Played Song Count: @userDetail.PlayedSongCount / @userDetail.TotalSongCount</MudListItem>
                <MudListItem>Cleared Stage Count: @userDetail.ClearedStageCount / @userDetail.TotalStageCount</MudListItem>
                <MudListItem>No Miss Stage Count: @userDetail.NoMissStageCount / @userDetail.TotalStageCount</MudListItem>
                <MudListItem>Full Chain Stage Count: @userDetail.FullChainStageCount / @userDetail.TotalStageCount</MudListItem>
                <MudListItem>Perfect Stage Count: @userDetail.PerfectStageCount / @userDetail.TotalStageCount</MudListItem>
                <MudListItem>S and Above Stage Count: @userDetail.SAboveStageCount / @userDetail.TotalStageCount</MudListItem>
                <MudListItem>S+ and Above Stage Count: @userDetail.SPlusAboveStageCount / @userDetail.TotalStageCount</MudListItem>
                <MudListItem>S++ and Above Stage Count: @userDetail.SPlusPlusAboveStageCount / @userDetail.TotalStageCount</MudListItem>
            </MudList>
        </MudExpansionPanel>
        <MudExpansionPanel Text="PlayOptions">
            <MudStack>
                <MudSelect @bind-Value="@playOption.FastSlowIndicator"
                           Label="FAST/SLOW show setting">
                    @foreach (var item in Enum.GetValues<PlayOptions.FastSlowIndicator>())
                    {
                        <MudSelectItem Value="@item">@item.GetHelpText()</MudSelectItem>
                    }
                </MudSelect>

                <MudSelect @bind-Value="@playOption.FeverTrance"
                           Label="FEVER/TRANCE show setting">
                    @foreach (var item in Enum.GetValues<PlayOptions.FeverTranceShow>())
                    {
                        <MudSelectItem Value="@item">@item.GetHelpText()</MudSelectItem>
                    }
                </MudSelect>
                
                <MudStack Row="true">
                    <MudField Label="Navigator setting">
                        @NavigatorIdToString(playOption.NavigatorId)
                    </MudField>
                    <MudButton Variant="Variant.Text"
                               
                               OnClick="OnChangeNavigatorButtonClick">
                        Change Navigator
                    </MudButton>
                </MudStack>

                <MudStack Row="true">
                    <MudField Label="Avatar setting">
                        @AvatarIdToString(playOption.AvatarId)
                    </MudField>
                    <MudButton Variant="Variant.Text"
                               OnClick="OnChangeAvatarButtonClick">
                        Change Avatar
                    </MudButton>
                </MudStack>

                <MudStack Row="true">
                    <MudField Label="Title setting">
                        @TitleIdToString(playOption.TitleId)
                    </MudField>
                    <MudButton Variant="Variant.Text"
                               OnClick="OnChangeTitleButtonClick">
                        Change Title
                    </MudButton>
                </MudStack>

                <MudOverlay @bind-Visible="IsNavigatorOverlayVisible"
                            DarkBackground="true">
                    <MudPaper>
                        <MudContainer MaxWidth="MaxWidth.Large">
                            <MudStack>
                                <MudDataGrid T="Navigator"
                                             MultiSelection="false" @bind-SelectedItem="SelectedNavigator"
                                             FixedHeader="true" FixedFooter="true" Height="70vh"
                                             Items="navigatorDictionary.Values" ReadOnly="true" Hover="true"
                                             Sortable="true" Filterable="true" Hideable="true">
                                    <ToolBarContent>
                                        <MudText Typo="Typo.h6">Navigators</MudText>
                                        <MudSpacer/>
                                    </ToolBarContent>
                                    <Columns>
                                        <Column T="Navigator" Field="@nameof(Navigator.Id)"/>
                                        <Column T="Navigator" Field="@nameof(Navigator.IdString)"/>
                                        <Column T="Navigator" Field="@nameof(Navigator.NameEntryString)" Title="Navigator Name" 
                                                SortBy="NameEntrySortByFunc"/>
                                        <Column T="Navigator" Field="@nameof(Navigator.ToolTipJp)" Title="Navigator Description (Japanese)"/>
                                        <Column T="Navigator" Field="@nameof(Navigator.ToolTipEn)" Title="Navigator Description (English)"/>
                                        <Column T="Navigator" Field="@nameof(Navigator.Genre)" Title="Navigator Type"/>
                                    </Columns>
                                    <PagerContent>
                                        <MudDataGridPager T="Navigator"/>
                                    </PagerContent>
                                </MudDataGrid>
                                <MudText Align="Align.Left">
                                    Currently selected navigator:<br>
                                    @SelectedNavigator
                                </MudText>
                                <MudButton Variant="Variant.Filled" Color="Color.Primary" FullWidth="true"
                                           OnClick="OnNavigatorOverlayClosed">
                                    Close
                                </MudButton>
                            </MudStack>
                        </MudContainer>
                    </MudPaper>
                </MudOverlay>

                <MudOverlay @bind-Visible="IsAvatarOverlayVisible"
                            DarkBackground="true">
                    <MudPaper>
                        <MudContainer MaxWidth="MaxWidth.Large">
                            <MudStack>
                                <MudDataGrid T="Avatar"
                                             MultiSelection="false" @bind-SelectedItem="SelectedAvatar"
                                             FixedHeader="true" FixedFooter="true" Height="70vh"
                                             Items="avatarDictionary.Values" ReadOnly="true" Hover="true"
                                             Sortable="true" Filterable="true" Hideable="true">
                                    <ToolBarContent>
                                        <MudText Typo="Typo.h6">Avatars</MudText>
                                        <MudSpacer/>
                                    </ToolBarContent>
                                    <Columns>
                                        <Column T="Avatar" Field="@nameof(Avatar.Id)"/>
                                        <Column T="Avatar" Field="@nameof(Avatar.IdString)"/>
                                        <Column T="Avatar" Field="@nameof(Avatar.FullName)" Title="Avatar Name"/>
                                        <Column T="Avatar" Field="@nameof(Avatar.AcquireMethodJp)" Title="Acquire Method (Japanese)"/>
                                        <Column T="Avatar" Field="@nameof(Avatar.AcquireMethodEn)" Title="Acquire Method (English)"/>
                                    </Columns>
                                    <PagerContent>
                                        <MudDataGridPager T="Avatar"/>
                                    </PagerContent>
                                </MudDataGrid>
                                <MudText Align="Align.Left">
                                    Currently selected avatar:<br> 
                                    @SelectedAvatar
                                </MudText>
                                <MudButton Variant="Variant.Filled" Color="Color.Primary" FullWidth="true"
                                           OnClick="OnAvatarOverlayClosed">
                                    Close
                                </MudButton>
                            </MudStack>
                        </MudContainer>
                    </MudPaper>
                </MudOverlay>

                <MudOverlay @bind-Visible="IsTitleOverlayVisible"
                            DarkBackground="true">
                    <MudPaper>
                        <MudContainer MaxWidth="MaxWidth.Large">
                            <MudStack>
                                <MudDataGrid T="Title"
                                             MultiSelection="false" @bind-SelectedItem="SelectedTitle"
                                             FixedHeader="true" FixedFooter="true" Height="70vh"
                                             Items="titleDictionary.Values" ReadOnly="true" Hover="true"
                                             Sortable="true" Filterable="true" Hideable="true">
                                    <ToolBarContent>
                                        <MudText Typo="Typo.h6">Titles</MudText>
                                        <MudSpacer/>
                                    </ToolBarContent>
                                    <Columns>
                                        <Column T="Title" Field="@nameof(Title.Id)"/>
                                        <Column T="Title" Field="@nameof(Title.IdString)"/>
                                        <Column T="Title" Field="@nameof(Title.NameJp)" Title="Title Name"/>
                                        <Column T="Title" Field="@nameof(Title.UnlockRequirementJp)" Title="Unlock Requirement (Japanese)"/>
                                        <Column T="Title" Field="@nameof(Title.UnlockRequirementEng)" Title="Unlock Requirement (English)"/>
                                        <Column T="Title" Field="@nameof(Title.Type)" Title="Title Type"/>
                                    </Columns>
                                    <PagerContent>
                                        <MudDataGridPager T="Title"/>
                                    </PagerContent>
                                </MudDataGrid>
                                <MudText Align="Align.Left">
                                    Currently selected title:<br>
                                    @SelectedTitle
                                </MudText>
                                <MudButton Variant="Variant.Filled" Color="Color.Primary" FullWidth="true"
                                           OnClick="OnTitleOverlayClosed">
                                    Close
                                </MudButton>
                            </MudStack>
                        </MudContainer>
                    </MudPaper>
                </MudOverlay>

                <MudButton Disabled="@isSavingOptions"
                           OnClick="SaveOptions"
                           Variant="Variant.Filled"
                           Color="Color.Info">
                    @if (isSavingOptions)
                    {
                        <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
                        <MudText Class="ms-2">Saving...</MudText>
                    }
                    else
                    {
                        <MudIcon Icon="@Icons.Filled.Save"></MudIcon>
                        <MudText>Save</MudText>
                    }
                </MudButton>
            </MudStack>
        </MudExpansionPanel>
        <MudExpansionPanel Text="SongPlayData">
            <MudDataGrid T="SongPlayData"
                         Items="@songPlayDataList"
                         Sortable="true"
                         Filterable="true">
                <ToolBarContent>
                    <MudText Typo="Typo.h6">Played Songs</MudText>
                </ToolBarContent>
                <Columns>
                    <Column T="SongPlayData" Sortable="false" Filterable="false">
                        <CellTemplate>
                            <MudButton Variant="Variant.Outlined" Size="Size.Small"
                                       OnClick="@(() => OnShowDetailsClick(context.Item))">
                                @(context.Item.ShowDetails ? "Hide" : "Show") Song Play Details
                            </MudButton>
                        </CellTemplate>
                    </Column>
                    <Column T="SongPlayData" Field="@nameof(SongPlayData.IsFavorite)" Sortable="false" Title="Favorite">
                        <CellTemplate>
                            <MudToggleIconButton Toggled="@context.Item.IsFavorite"
                                                 ToggledChanged="@(() => OnFavoriteToggled(context.Item))"
                                                 Icon="@Icons.Material.Filled.FavoriteBorder"
                                                 Color="@Color.Secondary"
                                                 Title="Add to favorite"
                                                 ToggledIcon="@Icons.Material.Filled.Favorite"
                                                 ToggledColor="@Color.Secondary"
                                                 ToggledTitle="Remove from favorite"/>
                        </CellTemplate>
                    </Column>
                    <Column T="SongPlayData" Field="@nameof(SongPlayData.Title)" Title="Song Title"/>
                    <Column T="SongPlayData" Field="@nameof(SongPlayData.Artist)" Title="Artist"/>
                    <Column T="SongPlayData" Field="@nameof(SongPlayData.TotalPlayCount)" Title="Total Play Count"/>
                    <Column T="SongPlayData" Field="@nameof(SongPlayData.LastPlayTime)" Title="Last Play Time"/>
                </Columns>
                <ChildRowContent>
                    @if (context.Item.ShowDetails)
                    {
                        <MudTr>
                            <td colspan="5">
                                <MudCard Elevation="0">
                                    <MudCardHeader>
                                        <CardHeaderContent>
                                            <MudText Typo="Typo.body1">Song Play Details</MudText>
                                        </CardHeaderContent>
                                    </MudCardHeader>
                                    <MudCardContent Class="pa-0">
                                        <MudTable Items="@context.Item.SongPlaySubDataList"
                                                  Context="SongPlayDetail"
                                                  Elevation="0"
                                                  Filter="data => data.ClearState != ClearState.NotPlayed">
                                            <HeaderContent>
                                                <MudTh>Difficulty</MudTh>
                                                <MudTh>Clear State</MudTh>
                                                <MudTh>Play Count</MudTh>
                                                <MudTh>Rating</MudTh>
                                                <MudTh>Score</MudTh>
                                                <MudTh>Max Chain</MudTh>
                                                <MudTh>Last Play Time</MudTh>
                                            </HeaderContent>
                                            <RowTemplate>
                                                <MudTd DataLabel="Difficulty">@SongPlayDetail.Difficulty</MudTd>
                                                <MudTd DataLabel="Clear State">
                                                    @(SongPlayDetail.Score != 1000000 ? SongPlayDetail.ClearState : ClearState.Perfect)
                                                </MudTd>
                                                <MudTd DataLabel="Play Count">@SongPlayDetail.PlayCount</MudTd>
                                                <MudTd DataLabel="Rating">@CalculateRating(SongPlayDetail.Score)</MudTd>
                                                <MudTd DataLabel="Score">@SongPlayDetail.Score</MudTd>
                                                <MudTd DataLabel="Max Chain">@SongPlayDetail.MaxChain</MudTd>
                                                <MudTd DataLabel="Last Play Time">@SongPlayDetail.LastPlayTime</MudTd>
                                            </RowTemplate>
                                        </MudTable>
                                    </MudCardContent>
                                </MudCard>
                            </td>
                        </MudTr>
                    }
                </ChildRowContent>
                <PagerContent>
                    <MudDataGridPager T="SongPlayData"/>
                </PagerContent>
            </MudDataGrid>
        </MudExpansionPanel>
        </MudExpansionPanels>
    }
}
</MudContainer>