@page "/creators"
@inject VoiceWorksClient Client
@inject IJSRuntime JS
@using JSMR.Application.Common.Search
@using JSMR.Application.Creators.Queries.Search
@using JSMR.Application.Creators.Queries.Search.Contracts
@using JSMR.UI.Blazor.Components
@using JSMR.UI.Blazor.Services

<PageTitle>Creators</PageTitle>

<h1>Creators</h1>

<MudTextField T="string" Value="Keywords" ValueChanged="OnKeywordsChanged" Immediate="true" DebounceInterval="500" Label="Filter" Variant="MudBlazor.Variant.Text" Adornment="@Adornment.Start" AdornmentIcon="@Icons.Material.Outlined.Search" />

@if (searchResults is null)
{
    <p>Loading…</p>
}
else if (searchResults.Items.Length == 0)
{
    <p>No results.</p>
}
else
{
    <MudTable Items="@searchResults.Items" Style="table-layout: fixed" Virtualize="true">
        <HeaderContent>
            <MudTh>Name</MudTh>
            <MudTh>Voice Works</MudTh>
            <MudTh>Favorite</MudTh>
            <MudTh>Blacklisted</MudTh>
        </HeaderContent>
        <RowTemplate>
                <MudTd DataLabel="Name">@context.Name</MudTd>
                <MudTd DataLabel="Voice Works">@context.VoiceWorkCount</MudTd>
                <MudTd DataLabel="Favorite">
                    <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.Favorite" Color="@(context.Favorite? Color.Secondary: Color.Dark)" />
                </MudTd>
                <MudTd DataLabel="Blacklisted">
                    <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Filled.Block" Color="@(context.Blacklisted? Color.Secondary: Color.Dark)" />
                </MudTd>
        </RowTemplate>
    </MudTable>

    <JPagination PageNumber="PageNumber" PageNumberChanged="OnPageNumberChanged" PageSize="PageSize" PageSizeChanged="OnPageSizeChanged" @bind-TotalItems="searchResults.TotalItems" />
}

<style>
    .mud-table-root {
        table-layout: fixed;
    }

    .j-pager {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        justify-content: center;
        z-index: 2;
        background: var(--mud-palette-background);
        padding: .5em 1em;
    }
</style>

@code {
    public string? Keywords { get; set; }
    public int PageNumber { get; set; } = 1;
    public int PageSize { get; set; } = 100;

    SearchResult<CreatorSearchItem>? searchResults;

    protected override async Task OnInitializedAsync()
    {
        await UpdateDataAsync(true);
    }

    public async Task OnKeywordsChanged(string? newKeywords)
    {
        Keywords = newKeywords;
        await UpdateDataAsync(true);
    }

    public async Task OnPageNumberChanged(int newPageNumber)
    {
        PageNumber = newPageNumber;
        await UpdateDataAsync(false);
    }

    public async Task OnPageSizeChanged(int newPageSize)
    {
        PageSize = newPageSize;
        await UpdateDataAsync(true);
    }

    private async Task UpdateDataAsync(bool resetPageNumber)
    {
        if (resetPageNumber)
            PageNumber = 1;

        await LoadCreatorsAsync();
    }

    private async Task LoadCreatorsAsync()
    {
        SearchCreatorsRequest request = new(
            Options: new()
            {
                PageNumber = PageNumber,
                PageSize = PageSize,
                Criteria = new()
                {
                    Name = Keywords
                },
                SortOptions =
                [
                    new(CreatorSortField.Name, Application.Common.Search.SortDirection.Ascending)
                ]
            }
        );

        await JS.InvokeVoidAsync("pageHelpers.scrollToTop");
        var result = await Client.SearchAsync(request);

        searchResults = result?.Results ?? new();

        //await InvokeAsync(StateHasChanged);
    }
}