@page "/users"
@using models = SharedProject.models
@inject NavigationManager NavigationManager
@inject HttpClient Client
@inject IDialogService DialogService
@inject ILogger<Users> Logger

<PageTitle>Users</PageTitle>

<MudContainer>
    @if (users is null)
    {
        <MudGrid>
            @for (var i = 0; i < 5; i++)
            {
                <MudItem>
                    <MudCard>
                        <MudCardHeader>
                            <CardHeaderContent>
                                <MudSkeleton SkeletonType="SkeletonType.Rectangle" Height="32px"/>
                            </CardHeaderContent>
                        </MudCardHeader>
                        <MudCardContent>
                            <MudSkeleton Width="80px" Height="32px"/>
                            <MudSkeleton Width="147px" Height="28px"/>
                        </MudCardContent>
                        <MudCardActions>
                            <MudSkeleton SkeletonType="SkeletonType.Rectangle" Width="99px" Height="25px" Class="ml-2"/>
                        </MudCardActions>
                    </MudCard>
                </MudItem>
            }
        </MudGrid>
    }
    else if (users.Count != 0)
    {
        <MudGrid>
            @foreach (var user in users)
            {
                <MudItem>
                    <MudCard>
                        <MudCardHeader>
                            <CardHeaderContent>
                                <MudText Typo="Typo.h5">@user.PlayerName</MudText>
                            </CardHeaderContent>
                            <CardHeaderActions>
                                <MudIconButton Icon="@Icons.Filled.Edit" Color="Color.Default"
                                               OnClick="() => OnEditPlayerNameClicked(user)"/>
                            </CardHeaderActions>
                        </MudCardHeader>
                        <MudCardContent>
                            <MudText Typo="Typo.h6">Card ID</MudText>
                            <MudText>@user.CardId</MudText>
                        </MudCardContent>
                        <MudCardActions>
                            <MudButton Variant="Variant.Text" Color="Color.Primary" OnClick="() => OnCheckDetailClick(user)">Check detail</MudButton>
                        </MudCardActions>
                    </MudCard>
                </MudItem>
            }
        </MudGrid>
    }
    else
    {
        <MudText Typo="Typo.h3">No Data</MudText>
    }
</MudContainer>

@code {
    private List<models.User>? users;


    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        users = await Client.GetFromJsonAsync<List<models.User>>("api/Users") ?? new List<models.User>();
    }

    private void OnCheckDetailClick(models.User user)
    {
        NavigationManager.NavigateTo($"user/{user.CardId}");
    }

    private async Task OnEditPlayerNameClicked(models.User user)
    {
        var options = new DialogOptions
        {
            CloseOnEscapeKey = false,
            DisableBackdropClick = true,
            FullWidth = true
        };
        var parameters = new DialogParameters();
        parameters.Add("Data", user);
        var dialog = DialogService.Show<ChangePlayerNameDialog>("Favorite", parameters, options);
        var result = await dialog.Result;
    }

}