@page "/tracks"
@using DeepDrftPublic.Client.Controls

<PageTitle>DeepDrft Track Gallery</PageTitle>

<div>
    <div class="tracks-view-container">
        @* Search + filter affordances are interactive-only: the debounce timer and pill clear
           need WASM. During prerender/non-interactive they are hidden, matching the view-mode
           toggle's interactivity gate. *@
        @if (RendererInfo.IsInteractive)
        {
            <div class="tracks-search-row">
                <MudTextField T="string"
                              Value="@ViewModel.SearchText"
                              ValueChanged="@OnSearchInput"
                              Immediate="true"
                              DebounceInterval="400"
                              Placeholder="Search tracks, artists, albums"
                              Adornment="Adornment.Start"
                              AdornmentIcon="@Icons.Material.Filled.Search"
                              Variant="Variant.Outlined"
                              Margin="Margin.Dense"
                              Clearable="true"
                              Class="tracks-search-field"/>
            </div>

            @if (ViewModel.FilterAlbum is not null || ViewModel.FilterGenre is not null)
            {
                <div class="tracks-filter-pills">
                    <MudChip T="string"
                             Color="Color.Tertiary"
                             Variant="Variant.Filled"
                             OnClose="@(_ => ClearFilter())">
                        @(ViewModel.FilterAlbum is not null
                            ? $"Album: {ViewModel.FilterAlbum}"
                            : $"Genre: {ViewModel.FilterGenre}")
                    </MudChip>
                </div>
            }
        }

        @if (ViewModel.Page != null)
        {
            <div class="tracks-view-header">
                <MudToggleGroup T="GalleryViewMode" @bind-Value="_viewMode" Disabled="@(!RendererInfo.IsInteractive)" Class="tracks-view-toggle">
                    <MudToggleItem Value="GalleryViewMode.Grid">
                        <MudIcon Icon="@Icons.Material.Filled.ViewModule"/>
                    </MudToggleItem>
                    <MudToggleItem Value="GalleryViewMode.List">
                        <MudIcon Icon="@Icons.Material.Filled.ViewList"/>
                    </MudToggleItem>
                </MudToggleGroup>
            </div>
            <div class="tracks-content">
                <TracksGallery Tracks="@ViewModel.Page.Items"
                               ViewMode="@_viewMode"
                               ActiveTrack="@PlayerService.CurrentTrack"
                               IsPlaying="@PlayerService.IsPlaying"
                               IsPaused="@PlayerService.IsPaused"
                               OnPlay="@PlayTrack"
                               OnPause="@PauseTrack"/>
            </div>
            <div class="tracks-footer py-4">
                <MudPagination Count="@ViewModel.Page.TotalPages"
                                Selected="@ViewModel.Page.Page"
                                SelectedChanged="@SetPage"
                                Disabled="@(!RendererInfo.IsInteractive)"
                                BoundaryCount="2"
                                MiddleCount="3"/>
            </div>
        }
        else
        {
            <div class="tracks-content">
                <MudGrid Spacing="3">
                    @foreach (var i in Enumerable.Range(0, 12))
                    {
                        <MudItem xs="12" sm="6" md="4" lg="3" xl="3">
                            <div class="deepdrft-track-gallery-item-center">
                                <MudSkeleton Width="240px" Height="240px" SkeletonType="SkeletonType.Rectangle"/>
                            </div>
                        </MudItem>
                    }
                </MudGrid>
            </div>
            <div class="tracks-footer">
                <MudSkeleton Height="60px" Width="240px" Class="justify-center"/>
            </div>
        }
    </div>
</div>