<?xml version="1.0" encoding="utf-8" ?>
<Page
    x:Class="BetterLyrics.WinUI3.Views.MusicGalleryPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:atl="using:ATL"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:labs="using:CommunityToolkit.Labs.WinUI"
    xmlns:local="using:BetterLyrics.WinUI3.Views"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:media="using:CommunityToolkit.WinUI.Media"
    xmlns:models="using:BetterLyrics.WinUI3.Models"
    xmlns:templateselector="using:BetterLyrics.WinUI3.TemplateSelector"
    xmlns:ui="using:CommunityToolkit.WinUI"
    mc:Ignorable="d">
    <Page.Resources>
        <CollectionViewSource
            x:Name="GroupedTracksCVS"
            IsSourceGrouped="True"
            Source="{x:Bind ViewModel.GroupedTracks, Mode=OneWay}" />
    </Page.Resources>

    <Grid>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid
                x:Name="SongViewer"
                Grid.Column="0"
                Padding="12">
                <Grid.Tag>
                    <Flyout
                        x:Name="SongFileInfoFlyout"
                        Placement="Bottom"
                        ShouldConstrainToRootBounds="False">
                        <ScrollViewer Width="300" Height="300">
                            <StackPanel Spacing="12">
                                <StackPanel>
                                    <TextBlock x:Uid="MusicGalleryPageFileInfoTitle" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                                    <TextBlock Text="{x:Bind ViewModel.TrackRightTapped.Title, Mode=OneWay}" />
                                </StackPanel>
                                <StackPanel>
                                    <TextBlock x:Uid="MusicGalleryPageFileArtist" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                                    <TextBlock Text="{x:Bind ViewModel.TrackRightTapped.Artist, Mode=OneWay}" />
                                </StackPanel>
                                <StackPanel>
                                    <TextBlock x:Uid="MusicGalleryPageFileAlbum" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                                    <TextBlock Text="{x:Bind ViewModel.TrackRightTapped.Album, Mode=OneWay}" />
                                </StackPanel>
                                <StackPanel>
                                    <TextBlock x:Uid="MusicGalleryPageFileInfoYear" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                                    <TextBlock Text="{x:Bind ViewModel.TrackRightTapped.Year, Mode=OneWay}" />
                                </StackPanel>
                                <StackPanel>
                                    <TextBlock x:Uid="MusicGalleryPageFileInfoDuration" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                                    <TextBlock Text="{x:Bind ViewModel.TrackRightTapped.Duration, Converter={StaticResource SecondsToFormattedTimeConverter}, Mode=OneWay}" />
                                </StackPanel>
                                <StackPanel>
                                    <TextBlock x:Uid="MusicGalleryPageFileInfoBitrate" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                                    <TextBlock Text="{x:Bind ViewModel.TrackRightTapped.Bitrate, Mode=OneWay}" />
                                </StackPanel>
                                <StackPanel>
                                    <TextBlock x:Uid="MusicGalleryPageFileInfoSampleRate" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                                    <TextBlock Text="{x:Bind ViewModel.TrackRightTapped.SampleRate, Mode=OneWay}" />
                                </StackPanel>
                                <StackPanel>
                                    <TextBlock x:Uid="MusicGalleryPageFileInfoBitDepth" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                                    <TextBlock Text="{x:Bind ViewModel.TrackRightTapped.BitDepth, Mode=OneWay}" />
                                </StackPanel>
                                <StackPanel>
                                    <TextBlock x:Uid="MusicGalleryPageFileInfoFormat" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                                    <TextBlock Text="{x:Bind ViewModel.TrackRightTapped.AudioFormat.Name, Mode=OneWay}" />
                                </StackPanel>
                                <StackPanel>
                                    <TextBlock x:Uid="MusicGalleryPageFileInfoEncoder" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                                    <TextBlock Text="{x:Bind ViewModel.TrackRightTapped.Encoder, Mode=OneWay}" />
                                </StackPanel>
                                <StackPanel>
                                    <TextBlock x:Uid="MusicGalleryPageFileInfoPath" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                                    <HyperlinkButton
                                        Margin="-12,0,0,0"
                                        Click="SongPathHyperlinkButton_Click"
                                        Content="{x:Bind ViewModel.TrackRightTapped.Path, Mode=OneWay}" />
                                </StackPanel>
                            </StackPanel>
                        </ScrollViewer>
                    </Flyout>
                </Grid.Tag>

                <ListView
                    VerticalAlignment="Top"
                    ItemsSource="{x:Bind ViewModel.SongsTabInfoList, Mode=OneWay}"
                    ScrollViewer.HorizontalScrollBarVisibility="Auto"
                    ScrollViewer.VerticalScrollBarVisibility="Disabled"
                    SelectedIndex="{x:Bind ViewModel.SelectedSongsTabInfoIndex, Mode=TwoWay}">
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <ItemsStackPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="models:SongsTabInfo">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="1*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Grid
                                    Grid.Column="0"
                                    Background="Transparent"
                                    ColumnSpacing="6"
                                    Tapped="PlaylistGrid_Tapped">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="1*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <FontIcon
                                        Grid.Column="0"
                                        FontFamily="{StaticResource IconFontFamily}"
                                        FontSize="16"
                                        Glyph="{Binding Icon}" />
                                    <TextBlock
                                        Grid.Column="1"
                                        VerticalAlignment="Center"
                                        Text="{Binding Name}" />
                                </Grid>
                                <Button
                                    Grid.Column="1"
                                    Click="PlaylistCloseButton_Click"
                                    Content="{ui:FontIcon FontSize=10,
                                                          FontFamily={StaticResource IconFontFamily},
                                                          Glyph=&#xE8BB;}"
                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                    Style="{StaticResource GhostButtonStyle}"
                                    Visibility="{Binding IsClosable, Converter={StaticResource BoolToVisibilityConverter}}" />
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

                <Grid Margin="0,48,0,0" VerticalAlignment="Top">
                    <AutoSuggestBox
                        x:Name="SongSearchBox"
                        x:Uid="MusicGalleryPageSongSearchBox"
                        HorizontalAlignment="Stretch"
                        QueryIcon="Find"
                        Text="{x:Bind ViewModel.SongSearchQuery, Mode=TwoWay}" />
                </Grid>

                <Grid Margin="0,96,0,0" VerticalAlignment="Top">
                    <StackPanel
                        HorizontalAlignment="Left"
                        Orientation="Horizontal"
                        Spacing="12">
                        <ToggleButton
                            x:Name="SelectAllToggleButton"
                            x:Uid="MusicGalleryPageSelectAll"
                            Click="SelectAllToggleButton_Click" />
                        <Button x:Uid="MusicGalleryPageAddToPlayingQueue">
                            <Button.Flyout>
                                <MenuFlyout>
                                    <MenuFlyoutItem x:Uid="MusicGalleryPageAddToNext" Click="AddSongToQueueNextMenuFlyoutItem_Click" />
                                    <MenuFlyoutItem x:Uid="MusicGalleryPageAddToEnd" Click="AddSongToQueueEndMenuFlyoutItem_Click" />
                                </MenuFlyout>
                            </Button.Flyout>
                        </Button>
                        <Button x:Uid="MusicGalleryPageAddToCustomList" Visibility="Collapsed">
                            <Button.Flyout>
                                <MenuFlyout>
                                    <MenuFlyoutItem x:Uid="MusicGalleryPageNewPlaylist" Icon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE710;}" />
                                </MenuFlyout>
                            </Button.Flyout>
                        </Button>
                    </StackPanel>
                    <StackPanel
                        HorizontalAlignment="Right"
                        Orientation="Horizontal"
                        Spacing="12">
                        <StackPanel Orientation="Horizontal" Spacing="12">
                            <TextBlock
                                x:Uid="MusicGalleryPageSortType"
                                VerticalAlignment="Center"
                                Style="{StaticResource BodyStrongTextBlockStyle}" />
                            <controls:Segmented
                                x:Name="Segmented"
                                SelectedIndex="{x:Bind ViewModel.SongOrderType, Converter={StaticResource EnumToIntConverter}, Mode=TwoWay}"
                                SelectionMode="Single">
                                <controls:SegmentedItem x:Uid="MusicGalleryPageSortByTitle" Icon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xEC4F;}" />
                                <controls:SegmentedItem x:Uid="MusicGalleryPageSortByAlbum" Icon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE93C;}" />
                                <controls:SegmentedItem x:Uid="MusicGalleryPageSortByArtist" Icon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xEFA9;}" />
                            </controls:Segmented>
                        </StackPanel>
                    </StackPanel>
                </Grid>

                <SemanticZoom Margin="0,140,0,0">
                    <SemanticZoom.ZoomedInView>
                        <ListView
                            x:Name="SongListView"
                            ItemsSource="{x:Bind GroupedTracksCVS.View, Mode=OneWay}"
                            SelectionChanged="SongListView_SelectionChanged"
                            SelectionMode="Multiple">
                            <ListView.ItemTemplate>
                                <DataTemplate x:DataType="atl:Track">
                                    <Grid Padding="12" RightTapped="SongListViewItemGrid_RightTapped">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="2*" />
                                            <ColumnDefinition Width="1.5*" />
                                            <ColumnDefinition Width="1.5*" />
                                            <ColumnDefinition Width="1*" />
                                            <ColumnDefinition Width="1*" />
                                        </Grid.ColumnDefinitions>

                                        <!--  歌曲名  -->
                                        <TextBlock
                                            Grid.Column="0"
                                            VerticalAlignment="Center"
                                            Text="{Binding Title}"
                                            TextWrapping="Wrap" />

                                        <!--  歌手名  -->
                                        <HyperlinkButton
                                            Grid.Column="1"
                                            VerticalAlignment="Center"
                                            Click="ArtistHyperlibkButton_Click"
                                            Tag="{Binding Artist}">
                                            <TextBlock Text="{Binding Artist}" TextWrapping="Wrap" />
                                        </HyperlinkButton>

                                        <!--  专辑名  -->
                                        <HyperlinkButton
                                            Grid.Column="2"
                                            VerticalAlignment="Center"
                                            Click="AlbumHyperlibkButton_Click"
                                            Tag="{Binding Album}">
                                            <TextBlock Text="{Binding Album}" TextWrapping="Wrap" />
                                        </HyperlinkButton>

                                        <!--  年份  -->
                                        <TextBlock
                                            Grid.Column="3"
                                            VerticalAlignment="Center"
                                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                            Text="{Binding Year}"
                                            TextWrapping="Wrap" />

                                        <!--  歌曲时长  -->
                                        <TextBlock
                                            Grid.Column="4"
                                            VerticalAlignment="Center"
                                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                            Text="{Binding Duration, Converter={StaticResource SecondsToFormattedTimeConverter}}"
                                            TextAlignment="Right"
                                            TextWrapping="Wrap" />
                                    </Grid>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                            <ListView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <ItemsStackPanel AreStickyGroupHeadersEnabled="True" />
                                </ItemsPanelTemplate>
                            </ListView.ItemsPanel>
                            <ListView.GroupStyle>
                                <GroupStyle>
                                    <GroupStyle.HeaderTemplate>
                                        <DataTemplate x:DataType="models:GroupInfoList">
                                            <Border AutomationProperties.AccessibilityView="Raw">
                                                <TextBlock
                                                    AutomationProperties.AccessibilityView="Raw"
                                                    Style="{ThemeResource SubtitleTextBlockStyle}"
                                                    Text="{Binding}" />
                                            </Border>
                                        </DataTemplate>
                                    </GroupStyle.HeaderTemplate>
                                </GroupStyle>
                            </ListView.GroupStyle>
                        </ListView>
                    </SemanticZoom.ZoomedInView>

                    <SemanticZoom.ZoomedOutView>
                        <GridView
                            MaxWidth="500"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            ItemsSource="{x:Bind GroupedTracksCVS.View.CollectionGroups, Mode=OneWay}"
                            ScrollViewer.IsHorizontalScrollChainingEnabled="False"
                            SelectionMode="None">
                            <GridView.ItemTemplate>
                                <DataTemplate x:DataType="models:GroupInfoList">
                                    <TextBlock Style="{ThemeResource TitleTextBlockStyle}" Text="{Binding}" />
                                </DataTemplate>
                            </GridView.ItemTemplate>
                        </GridView>
                    </SemanticZoom.ZoomedOutView>
                </SemanticZoom>

                <Grid Margin="0,140,0,0" Visibility="{x:Bind ViewModel.IsLocalMediaNotFound, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
                    <StackPanel
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Spacing="12">
                        <Image MaxWidth="200" Source="/Assets/EmptyState.png" />
                        <TextBlock
                            x:Uid="MusicGalleryPageFileNotFound"
                            HorizontalAlignment="Center"
                            Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                    </StackPanel>
                </Grid>

            </Grid>

            <Grid
                x:Name="PlayQueue"
                Grid.Column="1"
                Margin="0,0,12,0">

                <StackPanel Margin="0,10,0,0" Spacing="12">
                    <Grid Margin="0,6,0,0" VerticalAlignment="Top">
                        <TextBlock x:Uid="MusicGalleryPagePlayingQueue" Style="{StaticResource BodyStrongTextBlockStyle}" />
                        <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
                            <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Text="{x:Bind ViewModel.DisplayedPlayingSongIndex, Mode=OneWay}" />
                            <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Text="/" />
                            <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Text="{x:Bind ViewModel.TrackPlayingQueue.Count, Mode=OneWay}" />
                        </StackPanel>
                    </Grid>
                    <StackPanel Orientation="Horizontal" Spacing="12">
                        <Button x:Uid="MusicGalleryPageEmptyPlayingQueue" Click="EmptyPlayingQueueButton_Click" />
                        <Button x:Uid="MusicGalleryPageScrollToPlayingItem" Click="ScrollToPlayingItemButton_Click" />
                    </StackPanel>
                    <controls:Segmented HorizontalAlignment="Stretch" SelectedIndex="{x:Bind ViewModel.PlaybackOrder, Converter={StaticResource EnumToIntConverter}, Mode=TwoWay}">
                        <controls:Segmented.Items>
                            <controls:SegmentedItem x:Uid="MusicGalleryPageQueueLoop" />
                            <controls:SegmentedItem x:Uid="MusicGalleryPageSingleLoop" />
                            <controls:SegmentedItem x:Uid="MusicGalleryPageQueueRandom" />
                        </controls:Segmented.Items>
                    </controls:Segmented>
                </StackPanel>

                <ListView
                    x:Name="PlayingQueueListView"
                    Margin="0,136,0,0"
                    ItemsSource="{x:Bind ViewModel.TrackPlayingQueue, Mode=OneWay}"
                    SelectedIndex="{x:Bind ViewModel.PlayingSongIndex, Mode=TwoWay}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid Padding="0,6">
                                <Grid Tapped="PlayingQueueListVireItemGrid_Tapped">
                                    <StackPanel>
                                        <TextBlock Text="{Binding Track.Title}" TextWrapping="Wrap" />
                                        <TextBlock
                                            Foreground="{StaticResource TextFillColorSecondaryBrush}"
                                            Text="{Binding Track.Artist}"
                                            TextWrapping="Wrap" />
                                    </StackPanel>
                                </Grid>
                                <Grid HorizontalAlignment="Right">
                                    <Button
                                        Click="RemoveFromPlayingQueueButton_Click"
                                        Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                              FontSize=12,
                                                              Glyph=&#xE738;}"
                                        Style="{StaticResource GhostButtonStyle}">
                                        <ToolTipService.ToolTip>
                                            <TextBlock x:Uid="MusicGalleryPageRemoveFromPlayingQueue" />
                                        </ToolTipService.ToolTip>
                                    </Button>
                                </Grid>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

                <Grid Margin="0,136,0,0">
                    <interactivity:Interaction.Behaviors>
                        <interactivity:DataTriggerBehavior
                            Binding="{x:Bind ViewModel.TrackPlayingQueue.Count, Mode=OneWay}"
                            ComparisonCondition="Equal"
                            Value="0">
                            <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
                        </interactivity:DataTriggerBehavior>
                        <interactivity:DataTriggerBehavior
                            Binding="{x:Bind ViewModel.TrackPlayingQueue.Count, Mode=OneWay}"
                            ComparisonCondition="NotEqual"
                            Value="0">
                            <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
                        </interactivity:DataTriggerBehavior>
                    </interactivity:Interaction.Behaviors>
                    <StackPanel
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Spacing="12">
                        <Image MaxWidth="100" Source="/Assets/EmptyBox.png" />
                        <TextBlock
                            x:Uid="MusicGalleryPagePlayingQueueEmpty"
                            HorizontalAlignment="Center"
                            Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                    </StackPanel>
                </Grid>
            </Grid>
        </Grid>

        <Grid Background="{ThemeResource SolidBackgroundFillColorBaseBrush}" Visibility="{x:Bind ViewModel.IsDataLoading, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
            <Grid Margin="12">
                <Grid.RowDefinitions>
                    <RowDefinition Height="48" />
                    <RowDefinition Height="12" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="12" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="12" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <labs:Shimmer Grid.Row="0" CornerRadius="6" />
                <labs:Shimmer Grid.Row="2" CornerRadius="6" />
                <labs:Shimmer Grid.Row="4" CornerRadius="6" />
                <labs:Shimmer Grid.Row="6" CornerRadius="6" />
            </Grid>
            <ProgressRing IsActive="{x:Bind ViewModel.IsDataLoading, Mode=OneWay}" />
        </Grid>
    </Grid>
</Page>
