<?xml version="1.0" encoding="utf-8" ?>
<local:WavePanelBase
    x:Class="RodelAgent.UI.Controls.WavePanel"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:ext="using:RodelAgent.UI.Extensions"
    xmlns:ic="using:FluentIcons.WinUI"
    xmlns:local="using:RodelAgent.UI.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:xaml="using:Microsoft.Graphics.Canvas.UI.Xaml"
    mc:Ignorable="d">
    <UserControl.Resources>
        <Style x:Key="WaveSliderStyle" TargetType="Slider">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="Foreground" Value="Transparent" />
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
            <Setter Property="ManipulationMode" Value="None" />
            <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
            <Setter Property="FocusVisualMargin" Value="-7,0,-7,0" />
            <Setter Property="IsFocusEngagementEnabled" Value="True" />
            <Setter Property="CornerRadius" Value="{ThemeResource SliderTrackCornerRadius}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Slider">
                        <Grid Margin="{TemplateBinding Padding}">
                            <Grid.Resources>
                                <Style x:Key="SliderThumbStyle" TargetType="Thumb">
                                    <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseHighBrush}" />
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="Thumb">
                                                <Grid RowSpacing="8">
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="Auto" />
                                                        <RowDefinition />
                                                    </Grid.RowDefinitions>
                                                    <Ellipse
                                                        Width="{TemplateBinding Width}"
                                                        Height="{TemplateBinding Width}"
                                                        Fill="{TemplateBinding Background}"
                                                        UseLayoutRounding="False" />
                                                    <Border
                                                        Grid.Row="1"
                                                        Margin="0,0,0,12"
                                                        Background="{TemplateBinding Background}"
                                                        BorderBrush="{ThemeResource SliderThumbBorderBrush}"
                                                        BorderThickness="{TemplateBinding BorderThickness}"
                                                        CornerRadius="{TemplateBinding CornerRadius}" />
                                                </Grid>

                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </Grid.Resources>
                            <!--  This border exists only to draw the correct focus rect with rounded corners when element is focused.  -->
                            <Border
                                x:Name="FocusBorder"
                                Control.IsTemplateFocusTarget="True"
                                CornerRadius="{ThemeResource ControlCornerRadius}" />
                            <Grid x:Name="SliderContainer" Background="{ThemeResource SliderContainerBackground}">
                                <Grid x:Name="HorizontalTemplate" MinHeight="{ThemeResource SliderHorizontalHeight}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="{ThemeResource SliderPreContentMargin}" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="{ThemeResource SliderPostContentMargin}" />
                                    </Grid.RowDefinitions>
                                    <Rectangle
                                        x:Name="HorizontalTrackRect"
                                        Grid.Row="1"
                                        Grid.ColumnSpan="3"
                                        VerticalAlignment="Stretch"
                                        RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
                                        RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />
                                    <Rectangle
                                        x:Name="HorizontalDecreaseRect"
                                        Grid.Row="1"
                                        VerticalAlignment="Stretch"
                                        RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
                                        RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />
                                    <TickBar
                                        x:Name="TopTickBar"
                                        Grid.ColumnSpan="3"
                                        Height="{ThemeResource SliderOutsideTickBarThemeHeight}"
                                        Margin="0,0,0,4"
                                        VerticalAlignment="Bottom"
                                        Fill="{ThemeResource SliderTickBarFill}"
                                        Visibility="Collapsed" />
                                    <TickBar
                                        x:Name="HorizontalInlineTickBar"
                                        Grid.Row="1"
                                        Grid.ColumnSpan="3"
                                        Height="{ThemeResource SliderTrackThemeHeight}"
                                        Fill="{ThemeResource SliderInlineTickBarFill}"
                                        Visibility="Collapsed" />
                                    <TickBar
                                        x:Name="BottomTickBar"
                                        Grid.Row="2"
                                        Grid.ColumnSpan="3"
                                        Height="{ThemeResource SliderOutsideTickBarThemeHeight}"
                                        Margin="0,4,0,0"
                                        VerticalAlignment="Top"
                                        Fill="{ThemeResource SliderTickBarFill}"
                                        Visibility="Collapsed" />
                                    <Thumb
                                        x:Name="HorizontalThumb"
                                        Grid.Row="0"
                                        Grid.RowSpan="3"
                                        Grid.Column="1"
                                        Width="6"
                                        VerticalAlignment="Stretch"
                                        AutomationProperties.AccessibilityView="Raw"
                                        CornerRadius="2"
                                        DataContext="{TemplateBinding Value}"
                                        Style="{StaticResource SliderThumbStyle}" />
                                </Grid>
                            </Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="PointerOver" />
                                    <VisualState x:Name="Pressed" />
                                    <VisualState x:Name="Disabled" />
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusEngagementStates">
                                    <VisualState x:Name="FocusDisengaged" />
                                    <VisualState x:Name="FocusEngagedHorizontal" />
                                    <VisualState x:Name="FocusEngagedVertical" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Grid>
        <xaml:CanvasControl
            x:Name="WaveCanvas"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch" />
        <Grid Visibility="{x:Bind ViewModel.IsRecording, Mode=OneWay, Converter={StaticResource BoolToVisibilityReverseConverter}}">
            <Rectangle
                x:Name="HoverHolder"
                Width="6"
                HorizontalAlignment="Left"
                VerticalAlignment="Stretch"
                Fill="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                RadiusX="4"
                RadiusY="4"
                Visibility="Collapsed" />
            <Slider
                x:Name="WaveSlider"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                IsThumbToolTipEnabled="False"
                Maximum="{x:Bind ViewModel.Seconds, Mode=OneWay}"
                Minimum="0"
                PointerEntered="OnWaveSliderPointerEntered"
                PointerExited="OnWaveSliderPointerExited"
                PointerMoved="OnWaveSliderPointerMoved"
                StepFrequency="0.01"
                Style="{StaticResource WaveSliderStyle}"
                ThumbToolTipValueConverter="{StaticResource SecondsToTimeConverter}"
                ValueChanged="OnWaveSliderValueChanged"
                Visibility="{x:Bind ViewModel.Seconds, Mode=OneWay, Converter={StaticResource ObjectToVisibilityConverter}}"
                Value="{x:Bind ViewModel.Position, Mode=OneWay}" />
        </Grid>
        <StackPanel
            Margin="20"
            Padding="12,8"
            HorizontalAlignment="Center"
            VerticalAlignment="Bottom"
            Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}"
            BorderBrush="{ThemeResource ControlStrokeColorDefaultBrush}"
            BorderThickness="1"
            CornerRadius="{StaticResource OverlayCornerRadius}"
            Orientation="Horizontal"
            Spacing="8">
            <Button
                x:Name="PlayPauseButton"
                Width="40"
                Height="40"
                Padding="0"
                HorizontalContentAlignment="Center"
                VerticalContentAlignment="Center"
                Command="{x:Bind ViewModel.TogglePlayPauseCommand, Mode=OneWay}"
                CornerRadius="20"
                IsEnabled="{x:Bind ViewModel.IsParsing, Mode=OneWay, Converter={StaticResource ObjectToBoolReverseConverter}}">
                <Grid>
                    <ic:SymbolIcon
                        FontSize="16"
                        IconVariant="Filled"
                        Symbol="Play"
                        Visibility="{x:Bind ViewModel.IsPlaying, Mode=OneWay, Converter={StaticResource BoolToVisibilityReverseConverter}}" />
                    <ic:SymbolIcon
                        FontSize="16"
                        IconVariant="Filled"
                        Symbol="Pause"
                        Visibility="{x:Bind ViewModel.IsPlaying, Mode=OneWay}" />
                </Grid>
            </Button>
            <TextBlock VerticalAlignment="Center">
                <Run Text="{x:Bind ViewModel.Position, Mode=OneWay, Converter={StaticResource SecondsToTimeConverter}}" />
                <Run Text="/" />
                <Run Text="{x:Bind ViewModel.Seconds, Mode=OneWay, Converter={StaticResource SecondsToTimeConverter}}" />
            </TextBlock>
            <Button
                x:Name="OpenAudioButton"
                VerticalAlignment="Center"
                AutomationProperties.Name="{ext:Locale Name=OpenAudio}"
                Click="OnOpenAudioButtonClick"
                CornerRadius="18"
                Style="{StaticResource IconButtonStyle}"
                ToolTipService.ToolTip="{ext:Locale Name=OpenAudio}">
                <ic:SymbolIcon FontSize="14" Symbol="MusicNote1" />
            </Button>
            <Button
                x:Name="SaveAudioButton"
                VerticalAlignment="Center"
                AutomationProperties.Name="{ext:Locale Name=SaveAs}"
                Click="OnSaveAudioButtonClick"
                CornerRadius="18"
                Style="{StaticResource IconButtonStyle}"
                ToolTipService.ToolTip="{ext:Locale Name=SaveAs}">
                <ic:SymbolIcon FontSize="14" Symbol="Save" />
            </Button>
        </StackPanel>
    </Grid>
</local:WavePanelBase>
