
<featurebase:FeaturePage
    x:Class="was.droidtransfer.features.music.MusicFeaturePage"
    xmlns:featurebase="using:was.droidtransfer.features"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:converters="using:was.droidtransfer.features.music.converters"
    xmlns:coreconverters="using:was.droidtransfer.features.converters"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="using:was.droidtransfer.features.music"
    xmlns:dialogs="using:was.droidtransfer.features.dialogs"
    mc:Ignorable="d"
    d:DataContext="{d:DesignInstance Type=local:MusicFeaturePage}"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.Resources>
        <ResourceDictionary>
            <converters:PlaybackStateToEnabledConverter x:Key="PlaybackStateToEnabledConverter" />
            <converters:PlaybackStateToPlayPauseGlyphConverter x:Key="PlaybackStateToPlayPauseGlyphConverter" />
            <converters:PlaybackStateToVisibilityConverter x:Key="PlaybackStateToVisibilityConverter" />
            <converters:TrackDetailToPlaybackInfoConverter x:Key="TrackDetailToPlaybackInfoConverter" />
            <converters:VolumeToGlyphConverter x:Key="VolumeToGlyphConverter" />
            <coreconverters:DurationToStringConverter x:Key="DurationToStringConverter" />
            <coreconverters:ValueToVisibilityConverter x:Key="ValueToVisibilityConverter" />
            <ThemeShadow x:Name="SharedShadow" />
        </ResourceDictionary>
    </Page.Resources>

    <Grid PreviewKeyDown="_grid_PreviewKeyDown">
        <Grid x:Name="gridContent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <Border Style="{StaticResource PageHeaderBorderStyle}">
                <Grid>
                    <CommandBar Style="{ThemeResource PageHeaderCommandBarStyle}">
                        <featurebase:CopyProgressAppBarUserController x:Name="copyProgressUserControl" Visibility="Collapsed" OnCancelTapped="_copyProgressUserControl_OnCancelTapped"/>
                        <AppBarButton x:Name="appBarButtonCopy" x:Uid="AppBarButtonCopy" Label="XX Copy to PC" Style="{ThemeResource AppBarButtonStyle}" Click="_appBarButtonCopy_Click" IsEnabled="{x:Bind AreFileOperationsAvailable, Mode=OneWay}" Visibility="{x:Bind FileOperationsVisibility, Mode=OneWay}">
                            <AppBarButton.Icon>
                                <SymbolIcon Symbol="Copy" Foreground="{ThemeResource AccentFillColorDefaultBrush}"/>
                            </AppBarButton.Icon>
                        </AppBarButton>
                        <!--<AppBarButton x:Name="appBarButtonITunes" x:Uid="AppBarButtonITunes" Icon="MusicInfo" Label="XX Copy to iTunes" Style="{ThemeResource AppBarButtonStyle}" Click="_appBarButtonItunes_Click" IsEnabled="{x:Bind AreFileOperationsAvailable, Mode=OneWay}" Visibility="{x:Bind FileOperationsVisibility, Mode=OneWay}" />-->
                        <AppBarSeparator Visibility="{x:Bind FileOperationsVisibility, Mode=OneWay}" />
                        <AppBarButton x:Name="appBarButtonAdd" x:Uid="AppBarButtonAdd" Label="XX Add Music to Device" Style="{ThemeResource AppBarButtonStyle}" IsEnabled="{x:Bind IsFileImportAvailable, Mode=OneWay}"  Visibility="{x:Bind FileImportVisibility, Mode=OneWay}">
                            <AppBarButton.Content>
                                <FontIcon Glyph="&#xE898;" Foreground="{ThemeResource AccentFillColorDefaultBrush}"/>
                            </AppBarButton.Content>
                            <AppBarButton.Flyout>
                                <MenuFlyout Placement="Bottom">
                                    <MenuFlyoutItem x:Uid="MenuFlyoutItemAddFolder" Text="XX Add Folder" Click="_appBarButtonAddFolder_Click" IsEnabled="{x:Bind IsFileImportAvailable, Mode=OneWay}">
                                        <MenuFlyoutItem.Icon>
                                            <FontIcon Glyph="&#xE8B7;" />
                                        </MenuFlyoutItem.Icon>
                                    </MenuFlyoutItem>
                                    <MenuFlyoutItem x:Uid="MenuFlyoutItemAddFiles" Text="XX Add Files" Click="_appBarButtonAddFiles_Click" IsEnabled="{x:Bind IsFileImportAvailable, Mode=OneWay}">
                                        <MenuFlyoutItem.Icon>
                                            <FontIcon Glyph="&#xE8B9;"  Foreground="{ThemeResource AccentFillColorDefaultBrush}"/>
                                        </MenuFlyoutItem.Icon>
                                    </MenuFlyoutItem>
                                </MenuFlyout>
                            </AppBarButton.Flyout>
                        </AppBarButton>
                        <AppBarButton x:Name="appBarButtonDelete" x:Uid="AppBarButtonDelete" Label="XX Delete Selection" Style="{ThemeResource AppBarButtonStyle}" Click="_appBarButtonDelete_Click" IsEnabled="{x:Bind AreFileOperationsAvailable, Mode=OneWay}" Visibility="{x:Bind FileOperationsVisibility, Mode=OneWay}">
                            <AppBarButton.Content>
                                <FontIcon Glyph="&#xE74D;" Foreground="{ThemeResource AccentFillColorDefaultBrush}"/>
                            </AppBarButton.Content>
                        </AppBarButton>
                        <AppBarSeparator Visibility="{x:Bind FileOperationsVisibility, Mode=OneWay}" />
                        <AppBarButton x:Name="appBarButtonSyncFolder" x:Uid="AppBarButtonSyncFolder" Label="XX Sync Folder" Style="{ThemeResource AppBarButtonStyle}" Click="_appBarButtonSyncFolder_Click" IsEnabled="{x:Bind AreFileOperationsAvailable, Mode=OneWay}" Visibility="{x:Bind FileOperationsVisibility, Mode=OneWay}">
                            <AppBarButton.Content>
                                <FontIcon Glyph="&#xE8F7;" Foreground="{ThemeResource AccentFillColorDefaultBrush}"/>
                            </AppBarButton.Content>
                        </AppBarButton>
                        <AppBarButton x:Name="appBarButtonSyncITunes" x:Uid="AppBarButtonSyncITunes" Label="XX Sync iTunes" Style="{ThemeResource AppBarButtonStyle}" Click="_appBarButtonSyncITunes_Click" IsEnabled="{x:Bind AreITunesOperationsAvailable, Mode=OneWay}" Visibility="{x:Bind ITunesOperationsVisibility, Mode=OneWay}">
                            <AppBarButton.Content>
                                <FontIcon Glyph="&#xE90B;" Foreground="{ThemeResource AccentFillColorDefaultBrush}"/>
                            </AppBarButton.Content>
                        </AppBarButton>
                    </CommandBar>
                    <TextBlock Text="{Binding PageTitle }" Style="{ThemeResource PageHeaderTitleStyle}"/>
                </Grid>
            </Border>

            <NavigationView Grid.Row="1" Margin="10,0" PaneDisplayMode="Top" SelectionChanged="_navigationView_SelectionChanged"
                        IsSettingsVisible="False" IsBackButtonVisible="Visible" IsBackEnabled="{Binding CanGoBack, ElementName=musicContentFrame}" BackRequested="_navigationView_BackRequested"
                            AllowDrop="True" DragOver="_navigationView_DragOver" Drop="_navigationView_Drop">
                <NavigationView.MenuItems>
                    <NavigationViewItem x:Uid="NavigationViewItemSongs"  Tag ="songs" IsSelected="True">
                        <NavigationViewItem.Content>
                            <StackPanel Orientation="Horizontal">
                                <FontIcon Glyph="&#xE8A6;" Foreground="{ThemeResource SystemAccentColor}" />
                                <TextBlock Text="Songs" />
                            </StackPanel>
                        </NavigationViewItem.Content>
                    </NavigationViewItem>
                    <NavigationViewItem x:Uid="NavigationViewItemAlbums" Tag="albums">
                        <StackPanel Orientation="Horizontal">
                            <FontIcon Glyph="&#xE93C;" Foreground="{ThemeResource SystemAccentColor}" />
                            <TextBlock Text="Albums" />
                        </StackPanel>
                    </NavigationViewItem>
                    <NavigationViewItem x:Uid="NavigationViewItemArtists" Tag="artists">
                        <StackPanel Orientation="Horizontal">
                            <FontIcon Glyph="&#xE77B;" Foreground="{ThemeResource SystemAccentColor}" />
                            <TextBlock Text="Artist" />
                        </StackPanel>
                    </NavigationViewItem>
                </NavigationView.MenuItems>
                <NavigationView.PaneCustomContent>
                    <StackPanel x:Name="navigationPaneCustomContent" HorizontalAlignment="Right" VerticalAlignment="Center" Orientation="Horizontal">
                        <StackPanel.Resources>
                            <Style TargetType="ComboBox">
                                <Setter Property="Foreground" Value="{ThemeResource SystemAccentColor}" />
                                <Setter Property="Background" Value="Transparent" />
                                <Setter Property="BorderThickness" Value="0" />
                                <Setter Property="Padding" Value="10,0,0,0" />
                                <Setter Property="Margin" Value="0,0,10,0" />
                            </Style>
                        </StackPanel.Resources>
                        <TextBlock x:Name="textBlockSortLabel" x:Uid="TextBlockSortLabel" Text="Sort By:" VerticalAlignment="Center" Visibility="Collapsed" />
                        <ComboBox x:Name="comboBoxTrackSort" PlaceholderText="{Binding SelectedValue, ElementName=comboBoxTrackSort, TargetNullValue=''}" Visibility="Collapsed" />
                        <ComboBox x:Name="comboBoxAlbumSort" PlaceholderText="{Binding SelectedValue, ElementName=comboBoxAlbumSort, TargetNullValue=''}" Visibility="Collapsed" />
                        <TextBlock x:Name="textBlockGenreLabel" x:Uid="TextBlockGenreLabel" Text="Genre:" VerticalAlignment="Center" />
                        <ComboBox x:Name="comboBoxGenres" PlaceholderText="{Binding SelectedValue, ElementName=comboBoxGenres, TargetNullValue=''}" />
                    </StackPanel>
                </NavigationView.PaneCustomContent>
                <NavigationView.AutoSuggestBox>
                    <AutoSuggestBox x:Name="autoSuggestBox" x:Uid="AutoSuggestBoxMusic" QueryIcon="Find" QuerySubmitted="_autoSuggestBox_QuerySubmitted" PlaceholderText="Search Music" TextChanged="_autoSuggestBox_TextChanged" />
                </NavigationView.AutoSuggestBox>
                <Frame x:Name="musicContentFrame" Navigating="_musicContentFrame_Navigating" Navigated="_musicContentFrame_Navigated" />
            </NavigationView>

            <!-- Playback Controlls -->
            <Border Grid.Row="2" Background="{ThemeResource TextFillColorInverse}" 
                 BorderThickness="0,1,0,0" CornerRadius="0"  VerticalAlignment="Bottom" Padding="20,0,20,10">
                <StackPanel>
                    <Grid ColumnSpacing="10" Visibility="{Binding MusicPlayback.LoadedTrack, Converter={StaticResource ValueToVisibilityConverter}, Mode=OneWay}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto" MinWidth="50" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="auto" MinWidth="50" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{x:Bind MusicPlayback.Position, Mode=OneWay, Converter={StaticResource DurationToStringConverter}, ConverterParameter='includeHour'}" Opacity=".6" VerticalAlignment="Center" TextAlignment="Center" FontSize="12" />
                        <Slider x:Name="positionSlider" Grid.Column="1" VerticalAlignment="Center" Margin="0,2,0,0"
                            IsEnabled="{x:Bind MusicPlayback.PlaybackState, Converter={StaticResource PlaybackStateToEnabledConverter}}"
                            ThumbToolTipValueConverter="{StaticResource DurationToStringConverter}"
                            Value="{x:Bind MusicPlayback.Position, Mode=TwoWay}" Maximum="{x:Bind MusicPlayback.Duration, Mode=OneWay, FallbackValue='1'}"
                            ManipulationMode="All" ManipulationCompleted="_slider_ManipulationCompleted" ManipulationStarted="_slider_ManipulationStarted" />
                        <TextBlock Grid.Column="2" Opacity=".6" Text="{x:Bind MusicPlayback.Duration, Mode=OneWay, Converter={StaticResource DurationToStringConverter}, ConverterParameter='includeHour'}" VerticalAlignment="Center" TextAlignment="Center" FontSize="12" />
                    </Grid>
                    <Grid ColumnSpacing="10" Margin="0,0,0,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid ColumnSpacing="10" Visibility="{x:Bind MusicPlayback.LoadedTrack, Converter={StaticResource ValueToVisibilityConverter}, Mode=OneWay}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Border x:Name="BorderArtwork" Height="72" Width="72" BorderThickness="1" CornerRadius="4" BorderBrush="{ThemeResource TextFillColorDisabled}">
                                <Grid>
                                    <FontIcon Glyph="&#xE93C;" Opacity=".8" Foreground="{ThemeResource TextFillColorPrimary}"/>
                                    <Image x:Name="imageArtworkThumnail" Tapped="_imageArtworkThumnail_Tapped" />
                                </Grid>
                            </Border>
                            <StackPanel x:Name="StackPanelPlaybackDetails" Grid.Column="1" VerticalAlignment="Center" Margin="0,0,0,10" Tapped="_stackPanelPlaybackDetails_Tapped">
                                <TextBlock Text="{x:Bind MusicPlayback.LoadedTrack, Converter={StaticResource TrackDetailToPlaybackInfoConverter},ConverterParameter='[trackName]', TargetNullValue='Track Name', Mode=OneWay}" TextTrimming="CharacterEllipsis" FontWeight="SemiBold" FontSize="16" />
                                <TextBlock Text="{x:Bind MusicPlayback.LoadedTrack, Converter={StaticResource TrackDetailToPlaybackInfoConverter},ConverterParameter='[album] - [artist]', TargetNullValue='Artist', Mode=OneWay}" TextTrimming="CharacterEllipsis" FontSize="12" Opacity="0.7" />
                            </StackPanel>
                        </Grid>
                        <StackPanel Spacing="5" Grid.Column="1" VerticalAlignment="Center" Orientation="Horizontal" Padding="0,00,0,0">
                            <Button Background="Transparent" BorderThickness="0" Click="_previousButton_Click">
                                <FontIcon Glyph="&#xE892;" Foreground="{ThemeResource TextFillColorPrimary}" />
                            </Button>
                            <Button Background="Transparent" Padding="0,6,0,6" BorderThickness="0" Click="_playPauseButton_Click">
                                <Border BorderThickness="2" BorderBrush="{ThemeResource SystemAccentColor}" CornerRadius="80" Padding="8" Margin="10,0,10,0">
                                    <FontIcon Glyph="{x:Bind MusicPlayback.PlaybackState, Converter={StaticResource PlaybackStateToPlayPauseGlyphConverter}, Mode=OneWay}" Foreground="{ThemeResource TextFillColorPrimary}" />
                                </Border>
                            </Button>
                            <Button Background="Transparent" BorderThickness="0" Click="_nextButton_Click">
                                <FontIcon Glyph="&#xE893;" Foreground="{ThemeResource TextFillColorPrimary}" />
                            </Button>
                        </StackPanel>
                        <StackPanel Spacing="10" Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Center" Orientation="Horizontal">
                            <Button>
                                <Button.Content>
                                    <FontIcon Glyph="{x:Bind MusicPlayback.Volume, Converter={StaticResource VolumeToGlyphConverter}, Mode=OneWay}" Foreground="{ThemeResource TextFillColorPrimary}" />
                                </Button.Content>
                                <Button.Flyout>
                                    <Flyout Placement="Top">
                                        <Slider Orientation="Vertical" MinHeight="100" TickPlacement="None" Padding="0" HorizontalAlignment="Center" Value="{x:Bind MusicPlayback.Volume, Mode=TwoWay}" />
                                    </Flyout>
                                </Button.Flyout>
                            </Button>
                        </StackPanel>
                    </Grid>
                </StackPanel>
            </Border>
        </Grid>
        <local:MusicSyncPage x:Name="musicSyncPage" Visibility="Collapsed" SyncPermissionRequested="_musicSyncPage_SyncPermissionRequested" DidSyncTrack="_musicSyncPage_DidSyncTrack" Finished="_musicSyncPage_Finished" />
        <Border x:Name="BorderFullSizeArtwork" CornerRadius="12" Shadow="{StaticResource SharedShadow}"
                Visibility="Collapsed" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="120" >
            <Image x:Name="ImageFullSize" Tapped="_imageFullSize_Tapped" />
        </Border>
        <dialogs:ConfirmDeleteMediaContentDialog x:Name="dialogConfirmDelete" />
        <dialogs:SdCardDetectedContentDialog x:Name="dialogSdCardDetected" />
        <dialogs:ExternalPermissionsRequiredContentDialog x:Name="dialogExternalPermissionsRequired" />
        <dialogs:ExternalPermissionsRequestedContentDialog x:Name="dialogExternalPermissionsRequested" />
        <dialogs:RequestFullFilesPermissionsContentDialog x:Name="dialogFullFilesPermissions" ShowAltText="True" />
    </Grid>
</featurebase:FeaturePage>
