jsmr/JSMR.UI.Blazor/Pages/VoiceWorks.razor

@page "/voiceworks"
@using JSMR.Application.Common.Search
@using JSMR.Application.Creators.Queries.Search
@using JSMR.Application.Enums
@using JSMR.Application.Tags.Queries.Search
@using JSMR.Application.VoiceWorks.Queries.Search
@using JSMR.Domain.Enums
@using JSMR.Domain.ValueObjects
@using JSMR.UI.Blazor.Components
@using JSMR.UI.Blazor.Services
@inject VoiceWorksClient Client
@inject IJSRuntime JS

<PageTitle>Voice Works</PageTitle>

<h3>Voice Works</h3>

<div class="search-filter-control-container">
    @* <div class="search-filter-control-span-4">
        <JTextBox Label="Keywords" Value="@Keywords" ValueChanged="OnKeywordsChanged" Immediate="true" DebounceInterval="1500" />
    </div> *@
    <div class="search-filter-control-span-2">
        <BitTextField Prefix="Keywords" Value="@Keywords" ValueChanged="OnKeywordsChanged" Immediate="true" DebounceTime="500" />
    </div>
    <div class="search-filter-control-span-1">
        <BitDropdown Prefix="Languages"
                     MultiSelect
                     Items="Languages"
                     Placeholder="Select..."
                     TItem="BitDropdownItem<Language>"
                     TValue="Language"
                     Values="SupportedLanguages"
                     ValuesChanged="OnSupportedLanguagesChanged" />
    </div>
    <div class="search-filter-control-span-1">
        <BitDropdown Prefix="Locale"
                     Items="Locales"
                     Placeholder="Select..."
                     TItem="BitDropdownItem<Locale>"
                     TValue="Locale"
                     Value="Locale"
                     ValueChanged="OnLocaleChanged" />
    </div>
    <!-- Row 2 -->
    <div class="search-filter-control-span-1">
        <BitDropdown Prefix="Sale Status"
                     Items="SaleStatuses"
                     Placeholder="Select..."
                     TItem="BitDropdownItem<SaleStatus?>"
                     TValue="SaleStatus?"
                     Value="SelectedSaleStatus"
                     ValueChanged="OnSaleStatusChanged" />
    </div>
    <div class="search-filter-control-span-1">
        <BitDropdown Prefix="Circles"
                     Items="CircleStatuses"
                     Placeholder="Select..."
                     TItem="BitDropdownItem<CircleStatus?>"
                     TValue="CircleStatus?"
                     Value="SelectedCircleStatus"
                     ValueChanged="OnCircleStatusChanged" />
    </div>
    <div class="search-filter-control-span-1">
        <BitDropdown Prefix="Tags"
                     Items="TagStatuses"
                     Placeholder="Select..."
                     TItem="BitDropdownItem<TagStatus?>"
                     TValue="TagStatus?"
                     Value="SelectedTagStatus"
                     ValueChanged="OnTagStatusChanged" />
    </div>
    <div class="search-filter-control-span-1">
        <BitDropdown Prefix="Creators"
                     Items="CreatorStatuses"
                     Placeholder="Select..."
                     TItem="BitDropdownItem<CreatorStatus?>"
                     TValue="CreatorStatus?"
                     Value="SelectedCreatorStatus"
                     ValueChanged="OnCreatorStatusChanged" />
    </div>
    <!-- Row 3 -->
    <div class="search-filter-control-span-2">
        <BitDropdown Prefix="Tags"
                     Items="Tags"
                     MultiSelect
                     Virtualize
                     ShowSearchBox
                     AutoFocusSearchBox
                     Chips
                     Placeholder="Select..."
                     TItem="BitDropdownItem<int>"
                     TValue="int"
                     Values="SelectedTagIds"
                     ValuesChanged="OnTagIdsChanged" />
    </div>
    <div class="search-filter-control-span-1">
        <BitCheckbox Label="Include All Tags" Value="IncludeAllTags" ValueChanged="OnIncludeAllTagsChanged" />
    </div>
    <div class="search-filter-control-span-1"></div>
    <!-- Row 4 -->
    <div class="search-filter-control-span-2">
        <BitDropdown Prefix="Creators"
                     Items="Creators"
                     MultiSelect
                     Virtualize
                     ShowSearchBox
                     AutoFocusSearchBox
                     Chips
                     Placeholder="Select..."
                     TItem="BitDropdownItem<int>"
                     TValue="int"
                     Values="SelectedCreatorIds"
                     ValuesChanged="OnCreatorIdsChanged" />
    </div>
    <div class="search-filter-control-span-1">
        <BitCheckbox Label="Include All Creators" Value="IncludeAllCreators" ValueChanged="OnIncludeAllCreatorsChanged" />
    </div>
    <div class="search-filter-control-span-1"></div>
    <!-- Row 5 -->
    <div class="search-filter-control-span-1">
        <BitCheckbox Label="Show Only Favorite Works" Value="ShowOnlyFavoriteWorks" ValueChanged="OnShowOnlyFavoriteWorksChanged" />
    </div>
    <div class="search-filter-control-span-1">
        <BitCheckbox Label="Show Only Invalid Works" Value="ShowOnlyInvalidWorks" ValueChanged="OnShowOnlyInvalidWorksChanged" />
    </div>
    <div class="search-filter-control-span-2"></div>
    <div class="search-filter-control-span-1">
        <BitDropdown Label="Age Ratings"
                     MultiSelect
                     Items="AgeRatings"
                     Placeholder="Select..."
                     TItem="BitDropdownItem<AgeRating>"
                     TValue="AgeRating"
                     Values="SelectedAgeRatings"
                     ValuesChanged="OnAgeRatingsChanged" />
    </div>
    <div class="search-filter-control-span-1">
        <BitDatePicker Label="Release Date Start" ShowClearButton="true" Value="ReleaseDateStart" ValueChanged="OnReleaseDateStartChanged" />
    </div>
    <div class="search-filter-control-span-1">
        <BitDatePicker Label="Release Date End" ShowClearButton="true" Value="ReleaseDateEnd" ValueChanged="OnReleaseDateEndChanged" />
    </div>
    @* <div class="search-filter-control-span-1">
        <BitSlider Label="Downloads" Min="0" Max="100000" Value="MinDownloads" ValueChanged="OnMinDownloadsChanged" />
    </div> *@
</div>

<JProductCollection Products="searchResults?.Items"></JProductCollection>

@if (searchResults is not null)
{
    <JPagination PageNumber="PageNumber" PageNumberChanged="OnPageNumberChanged" PageSize="PageSize" PageSizeChanged="OnPageSizeChanged" @bind-TotalItems="searchResults.TotalItems" />
}

@code {
    public string? Keywords { get; set; }
    public Locale Locale { get; set; } = Locale.English;
    public SaleStatus? SelectedSaleStatus { get; set; }
    public CircleStatus? SelectedCircleStatus { get; set; }
    public TagStatus? SelectedTagStatus { get; set; }
    public CreatorStatus? SelectedCreatorStatus { get; set; }
    public int[] SelectedTagIds { get; set; } = [];
    public bool IncludeAllTags { get; set; }
    public int[] SelectedCreatorIds { get; set; } = [];
    public bool IncludeAllCreators { get; set; }
    public bool ShowOnlyFavoriteWorks { get; set; }
    public bool ShowOnlyInvalidWorks { get; set; }
    public IEnumerable<Language> SupportedLanguages { get; set; } = [];
    public IEnumerable<AgeRating> SelectedAgeRatings { get; set; } = [];
    public DateTimeOffset? ReleaseDateStart { get; set; }
    public DateTimeOffset? ReleaseDateEnd { get; set; }
    public int MinDownloads { get; set; }
    public int PageNumber { get; set; } = 1;
    public int PageSize { get; set; } = 100;

    List<BitDropdownItem<Locale>> Locales =
    [
        new() { Text = "Japanese", Value = Locale.Japanese },
        new() { Text = "English", Value = Locale.English }
    ];

    List<BitDropdownItem<SaleStatus?>> SaleStatuses =
    [
        new() { Text = "Available", Value = SaleStatus.Available },
        new() { Text = "Upcoming", Value = SaleStatus.Upcoming },
        new() { Text = "All", Value = null }
    ];

    List<BitDropdownItem<CircleStatus?>> CircleStatuses =
    [
        new() { Text = "Not Blacklisted", Value = CircleStatus.NotBlacklisted },
        new() { Text = "Favorites", Value = CircleStatus.Favorited },
        new() { Text = "Blacklisted", Value = CircleStatus.Blacklisted },
        new() { Text = "All", Value = null }
    ];

    List<BitDropdownItem<TagStatus?>> TagStatuses =
    [
        new() { Text = "Not Blacklisted", Value = TagStatus.NotBlacklisted },
        new() { Text = "Favorites (Exclude Blacklisted)", Value = TagStatus.FavoriteExcludeBlacklist },
        new() { Text = "Favorites (Include Blacklisted)", Value = TagStatus.FavoriteIncludeBlacklist },
        new() { Text = "Blacklisted", Value = TagStatus.Blacklisted },
        new() { Text = "All", Value = null }
    ];

    List<BitDropdownItem<CreatorStatus?>> CreatorStatuses =
    [
        new() { Text = "Not Blacklisted", Value = CreatorStatus.NotBlacklisted },
        new() { Text = "Favorites (Exclude Blacklisted)", Value = CreatorStatus.FavoriteExcludeBlacklist },
        new() { Text = "Favorites (Include Blacklisted)", Value = CreatorStatus.FavoriteIncludeBlacklist },
        new() { Text = "Blacklisted", Value = CreatorStatus.Blacklisted },
        new() { Text = "All", Value = null }
    ];

    List<BitDropdownItem<Language>> Languages =
    [
        new() { Text = "Japanese", Value = Language.Japanese },
        new() { Text = "English", Value = Language.English },
        new() { Text = "Chinese (Traditional)", Value = Language.ChineseTraditional },
        new() { Text = "Chinese (Simplified)", Value = Language.ChineseSimplified },
        new() { Text = "Korean", Value = Language.Korean }
    ];

    List<BitDropdownItem<AgeRating>> AgeRatings =
    [
        new() { Text = "All Ages", Value = AgeRating.AllAges },
        new() { Text = "R15", Value = AgeRating.R15 },
        new() { Text = "R18", Value = AgeRating.R18 }
    ];

    List<BitDropdownItem<int>> Tags = [];
    List<BitDropdownItem<int>> Creators = [];

    SearchResult<VoiceWorkSearchResult>? searchResults;

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

    private async Task GetTags()
    {
        SearchTagsRequest request = new(
            Options: new()
            {
                PageNumber = 1,
                PageSize = 99999
            }
        );

        SearchTagsResponse? response = await Client.SearchAsync(request);

        if (response is null)
            return;

        Tags = response.Results.Items
            .OrderByDescending(x => x.Favorite)
            .ThenBy(x => x.EnglishName ?? x.Name)
            .Select(x => new BitDropdownItem<int>() { Text = x.EnglishName ?? x.Name, Value = x.TagId }).ToList();
    }

    private async Task GetCreators()
    {
        SearchCreatorsRequest request = new(
            Options: new()
            {
                PageNumber = 1,
                PageSize = 99999
            }
        );

        SearchCreatorsResponse? response = await Client.SearchAsync(request);

        if (response is null)
            return;

        Creators = response.Results.Items.Select(x => new BitDropdownItem<int>() { Text = x.Name, Value = x.CreatorId }).ToList();
    }

    private async Task UpdateDataAsync(bool resetPageNumber)
    {
        await JS.InvokeVoidAsync("pageHelpers.scrollToTop");

        if (resetPageNumber)
            PageNumber = 1;

        SearchVoiceWorksRequest request = new(
            Options: new()
            {
                Criteria = new()
                {
                    Keywords = Keywords,
                    Locale = Locale,
                    SaleStatus = SelectedSaleStatus,
                    CircleStatus = SelectedCircleStatus,
                    TagStatus = SelectedTagStatus,
                    CreatorStatus = SelectedCreatorStatus,
                    TagIds = [.. SelectedTagIds],
                    IncludeAllTags = IncludeAllTags,
                    CreatorIds = [.. SelectedCreatorIds],
                    IncludeAllCreators = IncludeAllCreators,
                    ShowFavoriteVoiceWorks = ShowOnlyFavoriteWorks,
                    ShowInvalidVoiceWorks = ShowOnlyInvalidWorks,
                    SupportedLanguages = [.. SupportedLanguages],
                    AgeRatings = [.. SelectedAgeRatings],
                    ReleaseDateStart = ReleaseDateStart != null ? DateOnly.FromDateTime(ReleaseDateStart.Value.Date) : null,
                    ReleaseDateEnd = ReleaseDateEnd != null ? DateOnly.FromDateTime(ReleaseDateEnd.Value.Date) : null,
                    //MinDownloads = MinDownloads
                },
                SortOptions =
                [
                    new(GetSortField(), Application.Common.Search.SortDirection.Descending)
                ],
                PageNumber = PageNumber,
                PageSize = PageSize
            }
        );

        SearchVoiceWorksResponse? response = await Client.SearchAsync(request);

        searchResults = response?.Results;
    }

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

    public async Task OnLocaleChanged(Locale locale)
    {
        Locale = locale;
        await UpdateDataAsync(true);
    }

    public async Task OnSaleStatusChanged(SaleStatus? saleStatus)
    {
        SelectedSaleStatus = saleStatus;
        await UpdateDataAsync(true);
    }

    public async Task OnCircleStatusChanged(CircleStatus? circleStatus)
    {
        SelectedCircleStatus = circleStatus;
        await UpdateDataAsync(true);
    }

    public async Task OnTagStatusChanged(TagStatus? tagStatus)
    {
        SelectedTagStatus = tagStatus;
        await UpdateDataAsync(true);
    }

    public async Task OnCreatorStatusChanged(CreatorStatus? creatorStatus)
    {
        SelectedCreatorStatus = creatorStatus;
        await UpdateDataAsync(true);
    }

    public async Task OnTagIdsChanged(IEnumerable<int> tagIds)
    {
        SelectedTagIds = [..tagIds];
        await UpdateDataAsync(true);
    }

    public async Task OnIncludeAllTagsChanged(bool includeAllTags)
    {
        IncludeAllTags = includeAllTags;
        await UpdateDataAsync(true);
    }

    public async Task OnCreatorIdsChanged(IEnumerable<int> creatorIds)
    {
        SelectedCreatorIds = [..creatorIds];
        await UpdateDataAsync(true);
    }

    public async Task OnIncludeAllCreatorsChanged(bool includeAllCreators)
    {
        IncludeAllCreators = includeAllCreators;
        await UpdateDataAsync(true);
    }

    public async Task OnSupportedLanguagesChanged(IEnumerable<Language> languages)
    {
        SupportedLanguages = languages;
        await UpdateDataAsync(true);
    }

    public async Task OnAgeRatingsChanged(IEnumerable<AgeRating> ageRatings)
    {
        SelectedAgeRatings = ageRatings;
        await UpdateDataAsync(true);
    }

    public async Task OnShowOnlyFavoriteWorksChanged(bool showOnlyFavoriteWorks)
    {
        ShowOnlyFavoriteWorks = showOnlyFavoriteWorks;
        await UpdateDataAsync(true);
    }

    public async Task OnShowOnlyInvalidWorksChanged(bool showOnlyInvalidWorks)
    {
        ShowOnlyInvalidWorks = showOnlyInvalidWorks;
        await UpdateDataAsync(true);
    }

    public async Task OnReleaseDateStartChanged(DateTimeOffset? releaseDateStart)
    {
        ReleaseDateStart = releaseDateStart;
        await UpdateDataAsync(true);
    }

    public async Task OnReleaseDateEndChanged(DateTimeOffset? releaseDateEnd)
    {
        ReleaseDateEnd = releaseDateEnd;
        await UpdateDataAsync(true);
    }

    public async Task OnMinDownloadsChanged(double minDownloads)
    {
        MinDownloads = (int)minDownloads;
        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 VoiceWorkSortField GetSortField()
    {
        switch (SelectedSaleStatus)
        {
            case SaleStatus.Available:
                return VoiceWorkSortField.ReleaseDate;
            case SaleStatus.Upcoming:
                return VoiceWorkSortField.ExpectedReleaseDate;
            default:
                return VoiceWorkSortField.AnyReleaseDate;
        }
    }
}