ersatztv/ErsatzTV/Pages/CollectionItems.razor

@page "/media/collections/{Id:int}"
@using ErsatzTV.Application.MediaCards
@using ErsatzTV.Application.MediaCollections
@inherits MultiSelectBase<CollectionItems>
@inject NavigationManager NavigationManager
@inject IJSRuntime JsRuntime

<MudForm Style="max-height: 100%">
    <MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100;">
        <div style="display: flex; flex-direction: row; margin-bottom: auto; margin-top: auto; width: 100%; align-items: center" class="ml-6 mr-6">
            @if (IsSelectMode())
            {
                <div class="flex-grow-1">
                    <MudText Typo="Typo.h6" Color="Color.Primary">@SelectionLabel()</MudText>
                </div>
                <div style="margin-left: auto" class="d-none d-md-flex">
                    <MudButton Variant="Variant.Filled"
                               Color="Color.Error"
                               StartIcon="@Icons.Material.Filled.Remove"
                               OnClick="@(_ => RemoveSelectionFromCollection(Id))">
                        Remove From Collection
                    </MudButton>
                    <MudButton Class="ml-3"
                               Variant="Variant.Filled"
                               Color="Color.Secondary"
                               StartIcon="@Icons.Material.Filled.Check"
                               OnClick="@(_ => ClearSelection())">
                        Clear Selection
                    </MudButton>
                </div>
                <div style="align-items: center; display: flex; margin-left: auto;" class="d-md-none">
                    <div class="flex-grow-1"></div>
                    <MudMenu Icon="@Icons.Material.Filled.MoreVert">
                        <MudMenuItem Icon="@Icons.Material.Filled.Remove" Label="Remove From Collection" OnClick="@(_ => RemoveSelectionFromCollection(Id))"/>
                        <MudMenuItem Icon="@Icons.Material.Filled.Check" Label="Clear Selection" OnClick="ClearSelection"/>
                    </MudMenu>
                </div>
            }
            else
            {
                <div style="align-items: center; display: flex; width: 100%">
                    <MudText>@_data?.Name</MudText>
                    <div class="d-none d-md-flex" style="align-items: center">
                        <MudIconButton Icon="@Icons.Material.Filled.Edit" Href="@($"media/collections/{Id}/edit")" />
                        @if (_data?.MovieCards.Count > 0)
                        {
                            <MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#movies")">@_data.MovieCards.Count Movies</MudLink>
                        }

                        @if (_data?.ShowCards.Count > 0)
                        {
                            <MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#shows")">@_data.ShowCards.Count Shows</MudLink>
                        }

                        @if (_data?.SeasonCards.Count > 0)
                        {
                            <MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#seasons")">@_data.SeasonCards.Count Seasons</MudLink>
                        }

                        @if (_data?.EpisodeCards.Count > 0)
                        {
                            <MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#episodes")">@_data.EpisodeCards.Count Episodes</MudLink>
                        }

                        @if (_data?.ArtistCards.Count > 0)
                        {
                            <MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#artists")">@_data.ArtistCards.Count Artists</MudLink>
                        }

                        @if (_data?.MusicVideoCards.Count > 0)
                        {
                            <MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#music_videos")">@_data.MusicVideoCards.Count Music Videos</MudLink>
                        }

                        @if (_data?.OtherVideoCards.Count > 0)
                        {
                            <MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#other_videos")">@_data.OtherVideoCards.Count Other Videos</MudLink>
                        }

                        @if (_data?.SongCards.Count > 0)
                        {
                            <MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#songs")">@_data.SongCards.Count Songs</MudLink>
                        }

                        @if (_data?.ImageCards.Count > 0)
                        {
                            <MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#images")">@_data.ImageCards.Count Images</MudLink>
                        }

                        @if (_data?.RemoteStreamCards.Count > 0)
                        {
                            <MudLink Class="ml-4" Href="@(NavigationManager.Uri.Split("#").Head() + "#remote_streams")">@_data.RemoteStreamCards.Count Remote Streams</MudLink>
                        }
                    </div>
                    @if (SupportsCustomOrdering())
                    {
                        <div class="d-none d-md-flex" style="margin-left: auto">
                            <MudSwitch T="bool"
                                       Value="@(_data?.UseCustomPlaybackOrder == true)"
                                       Color="Color.Primary"
                                       ValueChanged="@OnUseCustomOrderChanged"
                                       Label="Use Custom Playback Order"/>
                        </div>
                    }
                    <div class="d-flex d-sm-none" style="margin-left: auto">
                        <MudIconButton Icon="@Icons.Material.Filled.Edit" Href="@($"media/collections/{Id}/edit")" />
                    </div>
                </div>
            }
        </div>
    </MudPaper>
    <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
            @if (_data?.MovieCards.Count > 0)
            {
                <MudText GutterBottom="true"
                         Typo="Typo.h4"
                         Style="scroll-margin-top: 160px"
                         UserAttributes="@(new Dictionary<string, object> { { "id", "movies" } })">
                    Movies
                </MudText>
                <MudDivider Class="mb-6"/>

                <MudStack Row="true" Wrap="Wrap.Wrap" UserAttributes="@(new Dictionary<string, object> { { "id", "sortable-collection" } })" Class="mb-10">
                    @foreach (MovieCardViewModel card in OrderMovies(_data.MovieCards))
                    {
                        <MediaCard Data="@card"
                                   Href="@($"media/movies/{card.MovieId}")"
                                   DeleteClicked="@RemoveMovieFromCollection"
                                   SelectColor="@Color.Error"
                                   SelectClicked="@(e => SelectClicked(card, e))"
                                   IsSelected="@IsSelected(card)"
                                   IsSelectMode="@IsSelectMode()"/>
                    }
                </MudStack>
            }

            @if (_data?.ShowCards.Count > 0)
            {
                <MudText GutterBottom="true"
                         Typo="Typo.h4"
                         Style="scroll-margin-top: 160px"
                         UserAttributes="@(new Dictionary<string, object> { { "id", "shows" } })">
                    Shows
                </MudText>
                <MudDivider Class="mb-6"/>

                <MudStack Row="true" Wrap="Wrap.Wrap" Class="mb-10">
                    @foreach (TelevisionShowCardViewModel card in _data.ShowCards.OrderBy(m => m.SortTitle))
                    {
                        <MediaCard Data="@card"
                                   Href="@($"media/tv/shows/{card.TelevisionShowId}")"
                                   DeleteClicked="@RemoveShowFromCollection"
                                   SelectColor="@Color.Error"
                                   SelectClicked="@(e => SelectClicked(card, e))"
                                   IsSelected="@IsSelected(card)"
                                   IsSelectMode="@IsSelectMode()"/>
                    }
                </MudStack>
            }

            @if (_data?.SeasonCards.Count > 0)
            {
                <MudText GutterBottom="true"
                         Typo="Typo.h4"
                         Style="scroll-margin-top: 160px"
                         UserAttributes="@(new Dictionary<string, object> { { "id", "seasons" } })">
                    Seasons
                </MudText>
                <MudDivider Class="mb-6"/>

                <MudStack Row="true" Wrap="Wrap.Wrap" Class="mb-10">
                    @foreach (TelevisionSeasonCardViewModel card in _data.SeasonCards.OrderBy(m => m.SortTitle))
                    {
                        <MediaCard Data="@card"
                                   Href="@($"media/tv/seasons/{card.TelevisionSeasonId}")"
                                   Title="@card.ShowTitle"
                                   Subtitle="@card.Title"
                                   DeleteClicked="@RemoveSeasonFromCollection"
                                   SelectColor="@Color.Error"
                                   SelectClicked="@(e => SelectClicked(card, e))"
                                   IsSelected="@IsSelected(card)"
                                   IsSelectMode="@IsSelectMode()"/>
                    }
                </MudStack>
            }

            @if (_data?.EpisodeCards.Count > 0)
            {
                <MudText GutterBottom="true"
                         Typo="Typo.h4"
                         Style="scroll-margin-top: 160px"
                         UserAttributes="@(new Dictionary<string, object> { { "id", "episodes" } })">
                    Episodes
                </MudText>
                <MudDivider Class="mb-6"/>

                <MudStack Row="true" Wrap="Wrap.Wrap" Class="mb-10">
                    @foreach (TelevisionEpisodeCardViewModel card in _data.EpisodeCards.OrderBy(e => e.Aired))
                    {
                        <MediaCard Data="@card"
                                   Href="@($"media/tv/seasons/{card.SeasonId}#episode-{card.EpisodeId}")"
                                   Subtitle="@($"{card.ShowTitle} - S{card.Season} E{card.Episode}")"
                                   DeleteClicked="@(_ => RemoveEpisodeFromCollection(card))"
                                   SelectColor="@Color.Error"
                                   SelectClicked="@(e => SelectClicked(card, e))"
                                   IsSelected="@IsSelected(card)"
                                   IsSelectMode="@IsSelectMode()"/>
                    }
                </MudStack>
            }

            @if (_data?.ArtistCards.Count > 0)
            {
                <MudText GutterBottom="true"
                         Typo="Typo.h4"
                         Style="scroll-margin-top: 160px"
                         UserAttributes="@(new Dictionary<string, object> { { "id", "artists" } })">
                    Artists
                </MudText>
                <MudDivider Class="mb-6"/>

                <MudStack Row="true" Wrap="Wrap.Wrap" Class="mb-10">
                    @foreach (ArtistCardViewModel card in _data.ArtistCards.OrderBy(e => e.SortTitle))
                    {
                        <MediaCard Data="@card"
                                   Href="@($"media/music/artists/{card.ArtistId}")"
                                   ArtworkKind="ArtworkKind.Thumbnail"
                                   DeleteClicked="@RemoveArtistFromCollection"
                                   SelectColor="@Color.Error"
                                   SelectClicked="@(e => SelectClicked(card, e))"
                                   IsSelected="@IsSelected(card)"
                                   IsSelectMode="@IsSelectMode()"/>
                    }
                </MudStack>
            }

            @if (_data?.MusicVideoCards.Count > 0)
            {
                <MudText GutterBottom="true"
                         Typo="Typo.h4"
                         Style="scroll-margin-top: 160px"
                         UserAttributes="@(new Dictionary<string, object> { { "id", "music_videos" } })">
                    Music Videos
                </MudText>
                <MudDivider Class="mb-6"/>

                <MudStack Row="true" Wrap="Wrap.Wrap" Class="mb-10">
                    @foreach (MusicVideoCardViewModel card in _data.MusicVideoCards.OrderBy(e => e.SortTitle))
                    {
                        <MediaCard Data="@card"
                                   Href=""
                                   ArtworkKind="ArtworkKind.Thumbnail"
                                   DeleteClicked="@RemoveMusicVideoFromCollection"
                                   SelectColor="@Color.Error"
                                   SelectClicked="@(e => SelectClicked(card, e))"
                                   IsSelected="@IsSelected(card)"
                                   IsSelectMode="@IsSelectMode()"/>
                    }
                </MudStack>
            }

            @if (_data?.OtherVideoCards.Count > 0)
            {
                <MudText GutterBottom="true"
                         Typo="Typo.h4"
                         Style="scroll-margin-top: 160px"
                         UserAttributes="@(new Dictionary<string, object> { { "id", "other_videos" } })">
                    Other Videos
                </MudText>
                <MudDivider Class="mb-6"/>

                <MudStack Row="true" Wrap="Wrap.Wrap" Class="mb-10">
                    @foreach (OtherVideoCardViewModel card in _data.OtherVideoCards.OrderBy(e => e.SortTitle))
                    {
                        <MediaCard Data="@card"
                                   Href=""
                                   ArtworkKind="ArtworkKind.Thumbnail"
                                   DeleteClicked="@RemoveOtherVideoFromCollection"
                                   SelectColor="@Color.Error"
                                   SelectClicked="@(e => SelectClicked(card, e))"
                                   IsSelected="@IsSelected(card)"
                                   IsSelectMode="@IsSelectMode()"/>
                    }
                </MudStack>
            }

            @if (_data?.SongCards.Count > 0)
            {
                <MudText GutterBottom="true"
                         Typo="Typo.h4"
                         Style="scroll-margin-top: 160px"
                         UserAttributes="@(new Dictionary<string, object> { { "id", "songs" } })">
                    Songs
                </MudText>
                <MudDivider Class="mb-6"/>

                <MudStack Row="true" Wrap="Wrap.Wrap" Class="mb-10">
                    @foreach (SongCardViewModel card in _data.SongCards.OrderBy(e => e.SortTitle))
                    {
                        <MediaCard Data="@card"
                                   Href=""
                                   ArtworkKind="ArtworkKind.Thumbnail"
                                   DeleteClicked="@RemoveSongFromCollection"
                                   SelectColor="@Color.Error"
                                   SelectClicked="@(e => SelectClicked(card, e))"
                                   IsSelected="@IsSelected(card)"
                                   IsSelectMode="@IsSelectMode()"/>
                    }
                </MudStack>
            }

            @if (_data?.ImageCards.Count > 0)
            {
                <MudText GutterBottom="true"
                         Typo="Typo.h4"
                         Style="scroll-margin-top: 160px"
                         UserAttributes="@(new Dictionary<string, object> { { "id", "images" } })">
                    Images
                </MudText>
                <MudDivider Class="mb-6"/>

                <MudStack Row="true" Wrap="Wrap.Wrap" Class="mb-10">
                    @foreach (ImageCardViewModel card in _data.ImageCards.OrderBy(e => e.SortTitle))
                    {
                        <MediaCard Data="@card"
                                   Href=""
                                   ArtworkKind="ArtworkKind.Thumbnail"
                                   DeleteClicked="@RemoveImageFromCollection"
                                   SelectColor="@Color.Error"
                                   SelectClicked="@(e => SelectClicked(card, e))"
                                   IsSelected="@IsSelected(card)"
                                   IsSelectMode="@IsSelectMode()"/>
                    }
                </MudStack>
            }

            @if (_data?.RemoteStreamCards.Count > 0)
            {
                <MudText GutterBottom="true"
                         Typo="Typo.h4"
                         Style="scroll-margin-top: 160px"
                         UserAttributes="@(new Dictionary<string, object> { { "id", "remote_streams" } })">
                    Remote Streams
                </MudText>
                <MudDivider Class="mb-6"/>

                <MudStack Row="true" Wrap="Wrap.Wrap" Class="mb-10">
                    @foreach (RemoteStreamCardViewModel card in _data.RemoteStreamCards.OrderBy(e => e.SortTitle))
                    {
                        <MediaCard Data="@card"
                                   Href=""
                                   ArtworkKind="ArtworkKind.Thumbnail"
                                   DeleteClicked="@RemoveRemoteStreamFromCollection"
                                   SelectColor="@Color.Error"
                                   SelectClicked="@(e => SelectClicked(card, e))"
                                   IsSelected="@IsSelected(card)"
                                   IsSelectMode="@IsSelectMode()"/>
                    }
                </MudStack>
            }
        </MudContainer>
    </div>
</MudForm>

@code {

    [Parameter]
    public int Id { get; set; }

    private CollectionCardResultsViewModel _data;

    private bool SupportsCustomOrdering() =>
        _data is not null && _data.MovieCards.Any() && !_data.ShowCards.Any() && !_data.SeasonCards.Any() && !_data.EpisodeCards.Any();

    protected override async Task OnParametersSetAsync() => await RefreshData();

    protected override async Task RefreshData()
    {
        Either<BaseError, CollectionCardResultsViewModel> maybeResult =
            await Mediator.Send(new GetCollectionCards(Id), CancellationToken);

        maybeResult.Match(
            result => _data = result,
            _ => NavigationManager.NavigateTo("404"));
    }

    private IOrderedEnumerable<MovieCardViewModel> OrderMovies(List<MovieCardViewModel> movies)
    {
        if (_data.UseCustomPlaybackOrder)
        {
            return movies.OrderBy(m => m.CustomIndex);
        }

        return movies.OrderBy(m => m.SortTitle);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        try
        {
            await JsRuntime.InvokeVoidAsync("sortableCollection", Id);
            if (_data.UseCustomPlaybackOrder)
            {
                await JsRuntime.InvokeVoidAsync("enableSorting");
            }
            else
            {
                await JsRuntime.InvokeVoidAsync("disableSorting");
            }
        }
        catch (Exception)
        {
            // ignored
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    private void SelectClicked(MediaCardViewModel card, MouseEventArgs e)
    {
        List<MediaCardViewModel> GetSortedItems()
        {
            return _data.MovieCards.OrderBy(m => m.SortTitle)
                .Append<MediaCardViewModel>(_data.ShowCards.OrderBy(s => s.SortTitle))
                .Append(_data.SeasonCards.OrderBy(s => s.SortTitle))
                .Append(_data.EpisodeCards.OrderBy(ep => ep.Aired))
                .Append(_data.ArtistCards.OrderBy(a => a.SortTitle))
                .Append(_data.MusicVideoCards.OrderBy(mv => mv.SortTitle))
                .Append(_data.OtherVideoCards.OrderBy(ov => ov.SortTitle))
                .Append(_data.SongCards.OrderBy(s => s.SortTitle))
                .ToList();
        }

        SelectClicked(GetSortedItems, card, e);
    }

    private async Task RemoveMovieFromCollection(MediaCardViewModel vm)
    {
        if (vm is MovieCardViewModel movie)
        {
            var request = new RemoveItemsFromCollection(Id)
            {
                MediaItemIds = [movie.MovieId]
            };

            await RemoveItemsWithConfirmation("movie", $"{movie.Title} ({movie.Subtitle})", request);
        }
    }

    private async Task RemoveArtistFromCollection(MediaCardViewModel vm)
    {
        if (vm is ArtistCardViewModel artist)
        {
            var request = new RemoveItemsFromCollection(Id)
            {
                MediaItemIds = [artist.ArtistId]
            };

            await RemoveItemsWithConfirmation(
                "artist",
                string.IsNullOrWhiteSpace(artist.Subtitle) ? artist.Title : $"{artist.Title} ({artist.Subtitle})",
                request);
        }
    }

    private async Task RemoveMusicVideoFromCollection(MediaCardViewModel vm)
    {
        if (vm is MusicVideoCardViewModel musicVideo)
        {
            var request = new RemoveItemsFromCollection(Id)
            {
                MediaItemIds = [musicVideo.MusicVideoId]
            };

            await RemoveItemsWithConfirmation("music video", $"{musicVideo.Title} ({musicVideo.Subtitle})", request);
        }
    }

    private async Task RemoveShowFromCollection(MediaCardViewModel vm)
    {
        if (vm is TelevisionShowCardViewModel show)
        {
            var request = new RemoveItemsFromCollection(Id)
            {
                MediaItemIds = [show.TelevisionShowId]
            };

            await RemoveItemsWithConfirmation("show", $"{show.Title} ({show.Subtitle})", request);
        }
    }

    private async Task RemoveSeasonFromCollection(MediaCardViewModel vm)
    {
        if (vm is TelevisionSeasonCardViewModel season)
        {
            var request = new RemoveItemsFromCollection(Id)
            {
                MediaItemIds = [season.TelevisionSeasonId]
            };

            await RemoveItemsWithConfirmation("season", $"{season.ShowTitle} - {season.Title}", request);
        }
    }

    private async Task RemoveEpisodeFromCollection(TelevisionEpisodeCardViewModel episode)
    {
        var request = new RemoveItemsFromCollection(Id)
        {
            MediaItemIds = [episode.EpisodeId]
        };

        await RemoveItemsWithConfirmation("episode", $"{episode.ShowTitle} - {episode.Title}", request);
    }

    private async Task RemoveOtherVideoFromCollection(MediaCardViewModel vm)
    {
        if (vm is OtherVideoCardViewModel otherVideo)
        {
            var request = new RemoveItemsFromCollection(Id)
            {
                MediaItemIds = [otherVideo.OtherVideoId]
            };

            await RemoveItemsWithConfirmation("other video", $"{otherVideo.Title}", request);
        }
    }

    private async Task RemoveSongFromCollection(MediaCardViewModel vm)
    {
        if (vm is SongCardViewModel song)
        {
            var request = new RemoveItemsFromCollection(Id)
            {
                MediaItemIds = [song.SongId]
            };

            await RemoveItemsWithConfirmation("song", $"{song.Title}", request);
        }
    }

    private async Task RemoveImageFromCollection(MediaCardViewModel vm)
    {
        if (vm is ImageCardViewModel image)
        {
            var request = new RemoveItemsFromCollection(Id)
            {
                MediaItemIds = [image.ImageId]
            };

            await RemoveItemsWithConfirmation("image", $"{image.Title}", request);
        }
    }

    private async Task RemoveRemoteStreamFromCollection(MediaCardViewModel vm)
    {
        if (vm is RemoteStreamCardViewModel remoteStream)
        {
            var request = new RemoveItemsFromCollection(Id)
            {
                MediaItemIds = [remoteStream.RemoteStreamId]
            };

            await RemoveItemsWithConfirmation("remote stream", $"{remoteStream.Title}", request);
        }
    }

    private async Task RemoveItemsWithConfirmation(
        string entityType,
        string entityName,
        RemoveItemsFromCollection request)
    {
        var parameters = new DialogParameters { { "EntityType", entityType }, { "EntityName", entityName } };
        var options = new DialogOptions { CloseButton = true, MaxWidth = MaxWidth.ExtraSmall };

        IDialogReference dialog = await Dialog.ShowAsync<RemoveFromCollectionDialog>("Remove From Collection", parameters, options);
        DialogResult result = await dialog.Result;
        if (result is { Canceled: false })
        {
            await Mediator.Send(request, CancellationToken);
            await RefreshData();
        }
    }

    private async Task OnUseCustomOrderChanged()
    {
        _data.UseCustomPlaybackOrder = !_data.UseCustomPlaybackOrder;
        var request = new UpdateCollection(Id, _data.Name) { UseCustomPlaybackOrder = _data.UseCustomPlaybackOrder };
        await Mediator.Send(request, CancellationToken);
    }

}