@page "/admin/users"

@using MoonCore.Helpers
@using MoonCore.Models
@using MoonCore.Blazor.Tailwind.Dt
@using Moonlight.Shared.Http.Responses.Admin.Users

@inject HttpApiClient ApiClient
@inject AlertService AlertService
@inject ToastService ToastService

<PageHeader Title="Users" />

<DataTable @ref="Table" TItem="UserDetailResponse" PageSize="15" LoadItemsPaginatedAsync="LoadData">
    <DataTableColumn TItem="UserDetailResponse" Field="@(x => x.Id)" Name="Id" />
    <DataTableColumn TItem="UserDetailResponse" Field="@(x => x.Username)" Name="Username" />
    <DataTableColumn TItem="UserDetailResponse" Field="@(x => x.Email)" Name="Email" />
    <DataTableColumn TItem="UserDetailResponse">
        <ColumnTemplate>
            <div class="flex justify-end">
                <a href="/admin/users/update/@(context.Id)" class="text-primary-500 mr-2 sm:mr-3">
                    <i class="icon-pencil text-base"></i>
                </a>

                <a href="#" @onclick="() => Delete(context)" @onclick:preventDefault
                   class="text-danger-500">
                    <i class="icon-trash text-base"></i>
                </a>
            </div>
        </ColumnTemplate>
    </DataTableColumn>
</DataTable>

@code
{
    private DataTable<UserDetailResponse> Table;
    
    private async Task<IPagedData<UserDetailResponse>> LoadData(PaginationOptions options)
     => await ApiClient.GetJson<PagedData<UserDetailResponse>>($"api/admin/users?page={options.Page}&pageSize={options.PerPage}");

    private async Task Delete(UserDetailResponse detailResponse)
    {
        await AlertService.ConfirmDanger(
            "User deletion",
            $"Do you really want to delete the user '{detailResponse.Username}'",
            async () =>
            {
                await ApiClient.Delete($"api/admin/users/{detailResponse.Id}");
                await ToastService.Success("Successfully deleted user");

                await Table.Refresh();
            }
        );
    }
}