<UserControl
    x:Class="Harmonia.WinUI.Views.PlaylistView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Harmonia.WinUI.Views"
    xmlns:vm="using:Harmonia.WinUI.ViewModels"
    xmlns:playlists="using:Harmonia.Core.Playlists"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    DataContext="{Binding Source={StaticResource Locator}, Path=PlaylistViewModel}"
    d:DataContext="{d:DesignInstance Type=vm:PlaylistViewModel, IsDesignTimeCreatable=True}"
    mc:Ignorable="d">
    <UserControl.Resources>
        <!--<SolidColorBrush x:Key="PlaylistBackground" Color="#393a45"/>-->
        <SolidColorBrush x:Key="PlaylistBackground" Color="#292a35"/>
        <SolidColorBrush x:Key="PlaylistItemHighlightColor" Color="#494a55"/>
        <!--<SolidColorBrush x:Key="PlaylistBackground" Color="#222"/>-->
        <SolidColorBrush x:Key="SongItemTitleBrush" Color="#dddddd"/>
        <SolidColorBrush x:Key="SongItemTitleBrushHighlighted" Color="#A2D2F6"/>
        <SolidColorBrush x:Key="SongItemSubtitleBrush" Color="#aaaaaa"/>
        <!--<SolidColorBrush x:Key="SongItemSubtitleBrushHighlighted" Color="#76b9ed"/>-->
        <SolidColorBrush x:Key="SongItemSubtitleBrushHighlighted" Color="#ddA2D2F6"/>

        <SolidColorBrush x:Key="SongItemFooterBrush" Color="#888"/>
        <SolidColorBrush x:Key="SongItemFooterBrushHighlighted" Color="#aaA2D2F6"/>

        <!-- Image Border -->
        <Style x:Key="PlaylistSongImageBorder" TargetType="Border">
            <Setter Property="Width" Value="60"/> <!-- as 75 -->
            <Setter Property="Height" Value="60"/> <!-- as 75 -->
            <Setter Property="CornerRadius" Value="8"/>
        </Style>
        
        <!-- Song Item Title Text Block -->
        <Style x:Key="SongTitleTextBlock" TargetType="TextBlock">
            <Setter Property="Foreground" Value="{StaticResource SongItemTitleBrush}"/>
            <Setter Property="FontSize" Value="15"/>
            <Setter Property="FontWeight" Value="Medium"/>
            <Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
            <Setter Property="LineHeight" Value="0"/>
        </Style>

        <Style x:Key="PlayingSongTitleTextBlock" TargetType="TextBlock" BasedOn="{StaticResource SongTitleTextBlock}">
            <Setter Property="Foreground" Value="{StaticResource AccentTextFillColorPrimaryBrush}"/>
        </Style>

        <!-- Song Item Subtitle Text Block -->
        <Style x:Key="SongSubtitleTextBlock" TargetType="TextBlock">
            <Setter Property="Foreground" Value="{StaticResource SongItemSubtitleBrush}"/>
            <Setter Property="FontSize" Value="13"/>
            <Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
            <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
            <Setter Property="LineHeight" Value="0"/>
        </Style>

        <Style x:Key="PlayingSongSubtitleTextBlock" TargetType="TextBlock" BasedOn="{StaticResource SongSubtitleTextBlock}">
            <Setter Property="Foreground" Value="{StaticResource AccentTextFillColorSecondaryBrush}"/>
        </Style>

        <DataTemplate x:Key="SongTemplate" x:DataType="playlists:PlaylistSong">
            <!-- Background was formerly transparent -->
            <Border x:Name="PlaylistSongListViewItem" DataContextChanged="PlaylistSongListViewItem_DataContextChanged" DoubleTapped="PlaylistListViewItem_DoubleTapped" RightTapped="PlaylistListViewItem_RightTapped" Background="Transparent">
                <Grid Padding="10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="0" Style="{StaticResource PlaylistSongImageBorder}">
                        <Grid>
                            <Image Loaded="Image_Loaded" Unloaded="Image_Unloaded"></Image>
                            <Canvas Background="#19000000"></Canvas>
                        </Grid>
                    </Border>
                    <Grid Grid.Column="1" Margin="10 0 0 0" VerticalAlignment="Center">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                            <ColumnDefinition Width="60"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Column="0" Grid.Row="0" x:Name="SongTitleTextBlock" Text="{x:Bind Song, Converter={StaticResource SongTitle}, Mode=OneWay}" Style="{StaticResource SongTitleTextBlock}" >
                        </TextBlock>
                        <TextBlock Grid.Row="1" x:Name="SongArtistsTextBlock" Text="{Binding Song.Artists, Converter={StaticResource ArtistsToString}}" Style="{StaticResource SongSubtitleTextBlock}">
                        </TextBlock>
                        <TextBlock Grid.Row="2" x:Name="SongAlbumTextBlock" Text="{Binding Song.Album}" Style="{StaticResource SongSubtitleTextBlock}">
                        </TextBlock>
                        <TextBlock Grid.Row="0" x:Name="SongLengthTextBlock" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" TextAlignment="Right" HorizontalTextAlignment="Right" Foreground="{StaticResource SongItemSubtitleBrush}" TextTrimming="CharacterEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="0" FontSize="13" Text="{Binding Song.Length.TotalSeconds, Converter={StaticResource SecondsToString}}"></TextBlock>
                        <TextBlock Grid.Row="1" x:Name="SongFormatTextBlock" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="{StaticResource SongItemFooterBrush}" TextTrimming="CharacterEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="0" FontSize="12" Text="{Binding Song.FileType}"></TextBlock>
                        <TextBlock Grid.Row="2" x:Name="SongBitRateTextBlock" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="{StaticResource SongItemFooterBrush}" TextTrimming="CharacterEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="0" FontSize="12">
                     <Run Text="{Binding Song.BitRate}"></Run><Run Text=" kbps"></Run>
                        </TextBlock>
                    </Grid>
                </Grid>
            </Border>
        </DataTemplate>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0" Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="Auto"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <TextBox Grid.Column="0" Text="{Binding Filter, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Center" Margin="10 0" HorizontalAlignment="Stretch" PlaceholderText="Filter"></TextBox>
            <StackPanel Grid.Column="1" Orientation="Horizontal" Spacing="10">
                <Button Style="{StaticResource FlatRoundButton}" Foreground="#7FD184">
                    <Button.Content>
                        <Path Style="{StaticResource FlatButtonPath}" Fill="#7FD184" Data="{StaticResource AddIcon}"></Path>
                    </Button.Content>
                    <Button.Flyout>
                        <MenuFlyout Placement="Bottom" ShouldConstrainToRootBounds="False" SystemBackdrop="{StaticResource AcrylicBackgroundFillColorDefaultBackdrop}">
                            <MenuFlyout.MenuFlyoutPresenterStyle>
                                <Style TargetType="MenuFlyoutPresenter">
                                    <Setter Property="Padding" Value="10"></Setter>
                                    <Setter Property="Background" Value="Transparent"></Setter>
                                </Style>
                            </MenuFlyout.MenuFlyoutPresenterStyle>
                            <MenuFlyoutItem Text="Add Files..." Command="{Binding AddFilesCommand}">
                                <MenuFlyoutItem.Icon>
                                    <PathIcon Data="{StaticResource AddFileIcon}"></PathIcon>
                                </MenuFlyoutItem.Icon>
                                <MenuFlyoutItem.KeyboardAccelerators>
                                    <KeyboardAccelerator Key="Insert"/>
                                </MenuFlyoutItem.KeyboardAccelerators>
                            </MenuFlyoutItem>
                            <MenuFlyoutItem Text="Add Folder..." Command="{Binding AddFolderCommand}">
                                <MenuFlyoutItem.Icon>
                                    <PathIcon Data="{StaticResource AddFolderIcon}"></PathIcon>
                                </MenuFlyoutItem.Icon>
                                <MenuFlyoutItem.KeyboardAccelerators>
                                    <KeyboardAccelerator Key="Insert" Modifiers="Control" />
                                </MenuFlyoutItem.KeyboardAccelerators>
                            </MenuFlyoutItem>
                        </MenuFlyout>
                    </Button.Flyout>
                </Button>
                <Button Style="{StaticResource FlatRoundButton}">
                    <Button.Content>
                        <Path Style="{StaticResource FlatButtonPath}" Data="{StaticResource MoreIcon}"></Path>
                    </Button.Content>
                    <Button.Flyout>
                        <MenuFlyout Placement="Bottom" ShouldConstrainToRootBounds="False" SystemBackdrop="{StaticResource AcrylicBackgroundFillColorDefaultBackdrop}">
                            <MenuFlyout.MenuFlyoutPresenterStyle>
                                <Style TargetType="MenuFlyoutPresenter">
                                    <Setter Property="Padding" Value="10"></Setter>
                                    <Setter Property="Background" Value="Transparent"></Setter>
                                </Style>
                            </MenuFlyout.MenuFlyoutPresenterStyle>
                            <MenuFlyoutItem Text="Refresh Tags" Command="{Binding RefreshTagsCommand}">
                                
                            </MenuFlyoutItem>
                            <MenuFlyoutItem Text="Remove Duplicates" Command="{Binding RemoveDuplicateSongsCommand}">
                                
                            </MenuFlyoutItem>
                            <MenuFlyoutItem Text="Remove Missing" Command="{Binding RemoveMissingSongsCommand}">
                                
                            </MenuFlyoutItem>
                            <MenuFlyoutItem Text="Lock Playlist">
                                
                            </MenuFlyoutItem>
                            <MenuFlyoutSeparator></MenuFlyoutSeparator>
                            <MenuFlyoutItem Text="Remove Playlist" Foreground="#ff99a4">
                                
                            </MenuFlyoutItem>
                            <MenuFlyoutSeparator></MenuFlyoutSeparator>
                            <MenuFlyoutItem Text="Settings">
                                
                            </MenuFlyoutItem>
                        </MenuFlyout>
                    </Button.Flyout>
                </Button>
            </StackPanel>
        </Grid>
        <ListView
            Grid.Row="1"
            Name="PlaylistListView"
            ItemsSource="{Binding FilteredPlaylistSongs}"
            ItemTemplate="{StaticResource SongTemplate}"
            CanReorderItems="True"
            CanDragItems="True"
            DragItemsStarting="PlaylistListView_DragItemsStarting"
            DragItemsCompleted="PlaylistListView_DragItemsCompleted"
            AllowDrop="True"
            SelectionMode="Extended"
            SelectionChanged="PlaylistListView_SelectionChanged">
            <ListView.ContextFlyout>
                <MenuFlyout x:Name="PlaylistListViewMenuFlyout" Opening="MenuFlyout_Opening" ShouldConstrainToRootBounds="False" SystemBackdrop="{StaticResource AcrylicBackgroundFillColorDefaultBackdrop}">
                    <MenuFlyout.MenuFlyoutPresenterStyle>
                        <Style TargetType="MenuFlyoutPresenter">
                            <Setter Property="Padding" Value="10"></Setter>
                            <Setter Property="Background" Value="Transparent"></Setter>
                        </Style>
                    </MenuFlyout.MenuFlyoutPresenterStyle>
                    <MenuFlyoutItem Text="Play" FontWeight="SemiBold" Command="{Binding PlaySongCommand}">
                        <MenuFlyoutItem.Icon>
                            <PathIcon Data="{StaticResource PlayIcon}"></PathIcon>
                        </MenuFlyoutItem.Icon>
                        <MenuFlyoutItem.KeyboardAccelerators>
                            <KeyboardAccelerator Key="Enter"/>
                        </MenuFlyoutItem.KeyboardAccelerators>
                    </MenuFlyoutItem>
                    <MenuFlyoutSeparator></MenuFlyoutSeparator>
                    <MenuFlyoutItem Text="Remove" Command="{Binding RemoveSongsCommand}" Foreground="#ff99a4">
                        <MenuFlyoutItem.Icon>
                            <PathIcon Data="{StaticResource DeleteIcon}" Foreground="#ff99a4"></PathIcon>
                        </MenuFlyoutItem.Icon>
                        <MenuFlyoutItem.KeyboardAccelerators>
                            <KeyboardAccelerator Key="Delete"/>
                        </MenuFlyoutItem.KeyboardAccelerators>
                    </MenuFlyoutItem>
                    <MenuFlyoutSeparator></MenuFlyoutSeparator>
                    <MenuFlyoutItem Text="Cut" Command="{Binding CutSongsCommand}">
                        <MenuFlyoutItem.Icon>
                            <PathIcon Data="{StaticResource CutIcon}"></PathIcon>
                        </MenuFlyoutItem.Icon>
                        <MenuFlyoutItem.KeyboardAccelerators>
                            <KeyboardAccelerator Key="X" Modifiers="Control" />
                        </MenuFlyoutItem.KeyboardAccelerators>
                    </MenuFlyoutItem>
                    <MenuFlyoutItem Text="Copy" Command="{Binding CopySongsCommand}">
                        <MenuFlyoutItem.Icon>
                            <PathIcon Data="{StaticResource CopyIcon}"></PathIcon>
                        </MenuFlyoutItem.Icon>
                        <MenuFlyoutItem.KeyboardAccelerators>
                            <KeyboardAccelerator Key="C" Modifiers="Control" />
                        </MenuFlyoutItem.KeyboardAccelerators>
                    </MenuFlyoutItem>
                    <MenuFlyoutItem Text="Paste" Command="{Binding PasteSongsCommand}">
                        <MenuFlyoutItem.Icon>
                            <PathIcon Data="{StaticResource PasteIcon}"></PathIcon>
                        </MenuFlyoutItem.Icon>
                        <MenuFlyoutItem.KeyboardAccelerators>
                            <KeyboardAccelerator Key="V" Modifiers="Control" />
                        </MenuFlyoutItem.KeyboardAccelerators>
                    </MenuFlyoutItem>
                    <MenuFlyoutSeparator></MenuFlyoutSeparator>
                    <MenuFlyoutItem Text="Open File Location" Command="{Binding OpenFileLocationCommand}">
                        <MenuFlyoutItem.KeyboardAccelerators>
                            <KeyboardAccelerator Key="O" Modifiers="Menu" />
                        </MenuFlyoutItem.KeyboardAccelerators>
                    </MenuFlyoutItem>
                </MenuFlyout>
            </ListView.ContextFlyout>
        </ListView>
    </Grid>
</UserControl>
