<UserControl x:Class="ModernFlyouts.Controls.SessionControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:ui="http://schemas.modernwpf.com/2019"
             xmlns:utils="clr-namespace:ModernFlyouts.Utilities"
             xmlns:resx="clr-namespace:ModernFlyouts.Properties"
             xmlns:input="clr-namespace:ModernFlyouts.Input"
             xmlns:designTime="clr-namespace:ModernFlyouts.DesignTime"
             xmlns:local="clr-namespace:ModernFlyouts"
             mc:Ignorable="d" d:DataContext="{d:DesignInstance designTime:MockMediaSession}"
             Width="{DynamicResource FlyoutWidth}" Height="{DynamicResource DefaultSessionControlHeight}" VerticalAlignment="Top">
    <Border CornerRadius="{DynamicResource FlyoutCornerRadius}">
        <Grid x:Name="ContentGrid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="24" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Border Grid.ColumnSpan="3" Grid.RowSpan="3" Opacity="0.5" CornerRadius="{DynamicResource FlyoutCornerRadius}" ClipToBounds="True"
                    Visibility="{Binding Source={x:Static local:FlyoutHandler.Instance}, Path=UIManager.UseGSMTCThumbnailAsBackground,
                        Converter={StaticResource BooleanToVisibilityConverter}}"
                    input:InputHelper.IsTapEnabled="True"
                    input:InputHelper.TappedCommand="{x:Static utils:CommonCommands.CloseFlyoutCommand}"
                    input:InputHelper.TappedCommandParameter="{x:Reference Name=ContentGrid}">
                <Border.OpacityMask>
                    <RadialGradientBrush x:Name="thumbnailBGOpacityBrush" x:FieldModifier="private"
                                         GradientOrigin="1,0.5" RadiusX="1" RadiusY="1" Center="1,0.5">
                        <GradientStop Color="White" Offset="0" />
                        <GradientStop Color="Transparent" Offset="1" />
                    </RadialGradientBrush>
                </Border.OpacityMask>
                <Border.Background>
                    <ImageBrush x:Name="ThumbnailBackgroundBrush" ImageSource="{Binding Thumbnail}" Stretch="UniformToFill"
                                RenderOptions.BitmapScalingMode="HighQuality">
                    </ImageBrush>
                </Border.Background>
            </Border>

            <Grid x:Name="TextBlockGrid" Grid.Column="1" Margin="0,35,0,0" Cursor="Hand"
                  VerticalAlignment="Bottom"
                  input:InputHelper.IsTapEnabled="True" input:InputHelper.TappedCommand="{Binding ActivateMediaSourceCommand}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Style="{DynamicResource BaseTextBlockStyle}"
                           Foreground="{DynamicResource SystemControlForegroundBaseHighBrush}"
                           Text="{Binding Title}" ToolTip="{Binding Title}"
                           ToolTipService.IsEnabled="{Binding Title, Converter={StaticResource TextToTooltipEnabledConverter}}"
                           TextWrapping="NoWrap" TextTrimming="CharacterEllipsis">
                    <TextBlock.RenderTransform>
                        <TranslateTransform x:Name="mediaTitleBlockTranslateTransform" />
                    </TextBlock.RenderTransform>
                </TextBlock>
                <TextBlock Grid.Row="1" Style="{DynamicResource CaptionTextBlockStyle}"
                           Margin="0,6,0,0"
                           Foreground="{DynamicResource SystemControlForegroundBaseHighBrush}"
                           Text="{Binding Artist}" ToolTip="{Binding Artist}"
                           ToolTipService.IsEnabled="{Binding Artist, Converter={StaticResource TextToTooltipEnabledConverter}}"
                           TextWrapping="NoWrap" TextTrimming="CharacterEllipsis">
                    <TextBlock.RenderTransform>
                        <TranslateTransform x:Name="mediaArtistBlockTranslateTransform" />
                    </TextBlock.RenderTransform>
                </TextBlock>
            </Grid>

            <Grid x:Name="ThumbnailGrid" x:FieldModifier="private" Grid.Column="2">
                <Grid Height="64" Width="64" Margin="24,24,24,2" Cursor="Hand" VerticalAlignment="Top"
                      input:InputHelper.IsTapEnabled="True" input:InputHelper.TappedCommand="{Binding ActivateMediaSourceCommand}">
                    <Border CornerRadius="{DynamicResource FlyoutCornerRadius}" Background="#333333" />
                    <Border CornerRadius="{DynamicResource FlyoutCornerRadius}">
                        <Border.Background>
                            <ImageBrush x:Name="ThumbnailImageBrush" ImageSource="{Binding Thumbnail}"
                                        Stretch="Uniform" RenderOptions.BitmapScalingMode="NearestNeighbor" />
                        </Border.Background>
                    </Border>
                </Grid>
            </Grid>

            <Grid x:Name="AppInfoPanel" Margin="0,24,0,0" Grid.RowSpan="2" Grid.Column="1"
                  VerticalAlignment="Top" Cursor="Hand"
                  input:InputHelper.IsTapEnabled="True" input:InputHelper.TappedCommand="{Binding ActivateMediaSourceCommand}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding MediaSourceIcon}" Grid.Column="0"
                       Width="16" Height="16" RenderOptions.BitmapScalingMode="Fant" />
                <TextBlock Text="{Binding MediaSourceName}"
                           VerticalAlignment="Center" Margin="8,0,0,0" Grid.Column="1"
                           TextTrimming="CharacterEllipsis" TextWrapping="NoWrap"
                           Style="{DynamicResource CaptionTextBlockStyle}"
                           Foreground="{DynamicResource SystemControlForegroundBaseHighBrush}" />
                <!--<Button Grid.Column="2" Margin="5,0,0,0" Padding="6,2">
                    <ui:FontIcon Glyph="{x:Static utils:CommonGlyphs.ChevronDown}" FontSize="12" />
                    <ui:FlyoutService.Flyout>
                        <ui:CommandBarFlyout>
                            <ui:AppBarButton Icon="Save"/>
                            <ui:AppBarButton Icon="Delete"/>
                            <ui:AppBarButton Icon="Edit"/>
                        </ui:CommandBarFlyout>
                    </ui:FlyoutService.Flyout>
                </Button>-->
            </Grid>

            <Grid Margin="24,10" Grid.Row="1" Grid.ColumnSpan="3"
                  Visibility="{Binding IsPlaybackPositionEnabled,
                      Converter={StaticResource BooleanToVisibilityConverter}}"
                  IsEnabled="{Binding IsPlaybackPositionEnabled}">
                <Grid VerticalAlignment="Center"
                      Visibility="{Binding ElementName=TimelineInfoButton, Path=IsChecked,
                          Converter={StaticResource BooleanToVisibilityConverter}}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <TextBlock VerticalAlignment="Center"
                        Text="{Binding PlaybackPosition, Converter={StaticResource TimeSpanToStringConverter}}" />
                    <Slider Grid.Column="1" IsMoveToPointEnabled="True" Margin="10,0"
                        IsEnabled="{Binding IsPlaybackPositionEnabled}"
                        Minimum="{Binding TimelineStartTime, Mode=OneWay, Converter={StaticResource TimeSpanToNumberConverter}}"
                        Maximum="{Binding TimelineEndTime, Mode=OneWay, Converter={StaticResource TimeSpanToNumberConverter}}"
                        Value="{Binding PlaybackPosition, Converter={StaticResource TimeSpanToNumberConverter}}" />
                    <TextBlock Grid.Column="2" VerticalAlignment="Center"
                        Text="{Binding TimelineEndTime, Converter={StaticResource TimeSpanToStringConverter}}" />
                </Grid>
            </Grid>

            <ui:ProgressBar Grid.Row="1" Grid.ColumnSpan="3" VerticalAlignment="Bottom" Margin="30,6"
                            Visibility="{Binding IsTimelinePropertiesEnabled, Converter={StaticResource BooleanToVisibilityConverter}}"
                            Minimum="{Binding TimelineStartTime, Mode=OneWay, Converter={StaticResource TimeSpanToNumberConverter}}"
                            Maximum="{Binding TimelineEndTime, Mode=OneWay, Converter={StaticResource TimeSpanToNumberConverter}}"
                            Value="{Binding PlaybackPosition, Converter={StaticResource TimeSpanToNumberConverter}}" />

            <Grid Grid.ColumnSpan="3" Grid.Row="2"
                  Visibility="{Binding ElementName=TimelineInfoButton, Path=IsChecked,
                          Converter={StaticResource InvertBooleanToVisibilityConverter}}">
                <ui:SplitView x:Name="ControlsSplitView" VerticalAlignment="Center"
                              OpenPaneLength="{DynamicResource FlyoutWidth}" PaneBackground="Transparent"
                              DisplayMode="Inline" IsPaneOpen="False">
                    <ui:SplitView.Pane>
                        <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
                            <ToggleButton x:Name="ShuffleButton" Command="{Binding ChangeShuffleActiveCommand}"
                                          IsChecked="{Binding IsShuffleActive, Mode=OneWay}"
                                          ToolTip="{Binding IsShuffleActive, Converter={StaticResource ShuffleButtonTooltipConverter}}"
                                          Style="{DynamicResource MediaToggleButtonStyle}">
                                <ui:FontIcon Glyph="{x:Static utils:CommonGlyphs.Shuffle}" FontSize="16.0" />
                            </ToggleButton>
                            <ToggleButton x:Name="RepeatButton" Command="{Binding ChangeAutoRepeatModeCommand}"
                                      IsChecked="{Binding AutoRepeatMode, Mode=OneWay, Converter={StaticResource RepeatButtonIsCheckedConverter}}"
                                      ToolTip="{Binding AutoRepeatMode, Converter={StaticResource RepeatButtonTooltipConverter}}"
                                      Margin="26,0" Style="{DynamicResource MediaToggleButtonStyle}">
                                <ui:FontIcon Glyph="{Binding AutoRepeatMode, Converter={StaticResource RepeatButtonGlyphConverter}}" FontSize="16" />
                            </ToggleButton>
                            <Button x:Name="StopButton" Command="{Binding StopCommand}"
                                ToolTip="{x:Static resx:Strings.SessionControl_Stop}"
                                Margin="2,0" Width="40" Style="{DynamicResource MediaButtonStyle}">
                                <ui:FontIcon Glyph="{x:Static utils:CommonGlyphs.Stop}" FontSize="16" />
                            </Button>
                        </StackPanel>
                    </ui:SplitView.Pane>
                    <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
                        <Button x:Name="PreviousButton" Command="{Binding PreviousTrackCommand}"
                            ToolTip="{x:Static resx:Strings.SessionControl_Previous}" Style="{DynamicResource MediaButtonStyle}">
                            <ui:FontIcon Glyph="{x:Static utils:CommonGlyphs.Previous}" FontSize="16" />
                        </Button>
                        <Button x:Name="PlayPauseButton" Command="{Binding PlayOrPauseCommand}"
                            ToolTip="{Binding IsPlaying, Converter={StaticResource PlayPauseButtonTooltipConverter}}"
                            Margin="26,0" Style="{DynamicResource HighlightedMediaButtonStyle}">
                            <ui:FontIcon Glyph="{Binding IsPlaying, Converter={StaticResource PlayPauseButtonGlyphConverter}}" FontSize="16" />
                        </Button>
                        <Button x:Name="NextButton" Command="{Binding NextTrackCommand}"
                            ToolTip="{x:Static resx:Strings.SessionControl_Next}" Style="{DynamicResource MediaButtonStyle}">
                            <ui:FontIcon Glyph="{x:Static utils:CommonGlyphs.Next}" FontSize="16" />
                        </Button>
                    </StackPanel>
                </ui:SplitView>

                <ToggleButton x:Name="MoreControlsButton" Grid.Row="1" Grid.ColumnSpan="3"
                              HorizontalAlignment="Left" VerticalAlignment="Center"
                              ToolTip="{x:Static resx:Strings.SessionControl_MoreControls}" Margin="24,0"
                              Style="{DynamicResource MediaToggleButtonStyle}"
                              Visibility="{Binding CalculatedMoreControlsButtonVisibility}"
                              IsChecked="{Binding ElementName=ControlsSplitView, Path=IsPaneOpen}">
                    <ui:FontIcon Glyph="{x:Static utils:CommonGlyphs.More}" FontSize="16" />
                </ToggleButton>
            </Grid>

            <ToggleButton x:Name="TimelineInfoButton" Visibility="{Binding IsPlaybackPositionEnabled,
                              Converter={StaticResource BooleanToVisibilityConverter}}"
                          Grid.Row="1" Grid.ColumnSpan="3" Padding="0" ui:ControlHelper.CornerRadius="6"
                          HorizontalAlignment="Left" VerticalAlignment="Bottom"
                          ToolTip="{x:Static resx:Strings.SessionControl_TimelineInfo}" Margin="4"
                          Style="{DynamicResource DefaultToggleButtonStyle}" Width="20" Height="20">
                <ui:FontIcon Glyph="{x:Static utils:CommonGlyphs.ChevronUp}" FontSize="10" />
            </ToggleButton>
        </Grid>
    </Border>
</UserControl>
