<?xml version="1.0" encoding="utf-8"?>
<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:ABStemPlayer.ViewModels"
             xmlns:conv="using:ABStemPlayer.Converters"
             x:DataType="vm:PlaybackViewModel"
             x:Class="ABStemPlayer.Views.PlaybackControls">
    <UserControl.Resources>
        <conv:BoolInvertConverter x:Key="BoolInvert" />
    </UserControl.Resources>

    <Border Padding="8"
            Background="#101010"
            CornerRadius="4">

        <Grid>

            <!-- NORMAL UI -->
            <Grid x:Name="NormalUI"
                  ColumnDefinitions="Auto,*,Auto"
                  RowDefinitions="Auto,Auto"
                  IsVisible="{Binding IsConverting, Converter={StaticResource BoolInvert}}" >

                <!-- Transport buttons -->
                <Grid Grid.Row="0"
                      Grid.Column="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <!-- File Open -->
                    <Button Command="{Binding OpenFileCommand}"
                            Width="40"
                            Height="40"
                            Grid.Column="0"
                            Margin="0,0,6,0">
                        <Path Fill="#e0e0e0"
                              Data="M 6 10 H 18 L 22 14 H 34 V 30 H 6 Z"/>
                    </Button>

                    <!-- Rewind -->
                    <Button Command="{Binding RewindCommand}"
                            Width="40"
                            Height="40"
                            Grid.Column="1"
                            Margin="0,0,6,0">
                        <Path Fill="#e0e0e0"
                              Data="M 30 8 L 10 20 L 30 32 Z M 18 8 L -2 20 L 18 32 Z"/>
                    </Button>

                    <!-- Play -->
                    <Button Command="{Binding PlayCommand}"
                            Width="40"
                            Height="40"
                            Grid.Column="2"
                            Margin="0,0,6,0">
                        <Path Fill="#00ff00"
                              Data="M 10 8 L 32 20 L 10 32 Z"/>
                    </Button>

                    <!-- Pause -->
                    <Button Command="{Binding PauseCommand}"
                            Width="40"
                            Height="40"
                            Grid.Column="3"
                            Margin="0,0,6,0">
                        <Path Fill="#e0e0e0"
                              Data="M 8 8 H 16 V 32 H 8 Z
                                    M 24 8 H 32 V 32 H 24 Z"/>
                    </Button>

                    <!-- Stop -->
                    <Button Command="{Binding StopCommand}"
                            Width="40"
                            Height="40"
                            Grid.Column="4"
                            Margin="0,0,6,0">
                        <Path Fill="#e0e0e0"
                              Data="M 8 8 H 32 V 32 H 8 Z"/>
                    </Button>

                    <!-- Fast Forward -->
                    <Button Command="{Binding FastForwardCommand}"
                            Width="40"
                            Height="40"
                            Grid.Column="5">
                        <Path Fill="#e0e0e0"
                              Data="M 10 8 L 30 20 L 10 32 Z M 22 8 L 42 20 L 22 32 Z"/>
                    </Button>
                </Grid>

                <!-- Speed slider -->
                <Grid Grid.Row="0"
                      Grid.Column="1"
                      HorizontalAlignment="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <TextBlock Text="Speed"
                               Foreground="#f0f0f0"
                               VerticalAlignment="Center"
                               Grid.Column="0"
                               Margin="20,10,8,0"/>

                    <Slider Minimum="0.25"
                            Maximum="2.0"
                            Value="{Binding PlaybackSpeed}"
                            Width="260"
                            Grid.Column="1"
                            Margin="0,10,8,0"/>

                    <TextBlock Text="{Binding PlaybackSpeed, StringFormat='x{0:F2}'}"
                               Foreground="#c0c0c0"
                               VerticalAlignment="Center"
                               Grid.Column="2"/>
                </Grid>

                <!-- AB loop controls -->
                <Grid Grid.Row="0"
                      Grid.Column="2"
                      HorizontalAlignment="Right">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <ToggleSwitch IsChecked="{Binding LoopEnabled}"
                                  Content="Loop"
                                  VerticalAlignment="Center"
                                  Grid.Column="0"
                                  Margin="0,0,6,0"/>

                    <Button Command="{Binding SetPointACommand}"
                            Width="60"
                            Height="32"
                            Grid.Column="1"
                            Margin="0,0,6,0">
                        <Grid>
                            <Path Fill="#0080ff"
                                  Data="M 30 6 L 46 18 L 38 18 L 38 26 L 22 26 L 22 18 L 14 18 Z"/>
                            <Path Stroke="#e0e0e0"
                                  StrokeThickness="2"
                                  Fill="Transparent"
                                  Data="M 20 5 L 34 35 H 28 L 25 25 H 15 L 12 35 H 6 Z M 20 13 L 17 21 H 23 Z"/>
                        </Grid>
                    </Button>

                    <Button Command="{Binding SetPointBCommand}"
                            Width="60"
                            Height="32"
                            Grid.Column="2">
                        <Grid>
                            <Path Fill="#0080ff"
                                  Data="M 30 26 L 46 14 L 38 14 L 38 6 L 22 6 L 22 14 L 14 14 Z"/>
                            <Path Stroke="#e0e0e0"
                                  StrokeThickness="2"
                                  Fill="Transparent"
                                  Data="
                                    M 10 2.44 L 18.4 2.44
                                    A 6 6 0 0 1 24.4 8.44
                                    A 6 6 0 0 1 18.4 14.44
                                    L 22 14.44
                                    A 5.4 5.4 0 0 1 27.4 19.84
                                    A 5.4 5.4 0 0 1 22 25.24
                                    L 10 25.24 Z

                                    M 19 7.24 L 19 10.44
                                    L 25 10.44
                                    A 1.2 1.2 0 0 0 26.2 9.24
                                    A 1.2 1.2 0 0 0 25 7.24 Z

                                    M 19 14.44 L 19 19.04
                                    L 25 19.04
                                    A 1.8 1.8 0 0 0 26.8 17.24
                                    A 1.8 1.8 0 0 0 25 14.44 Z
                                  "/>
                        </Grid>
                    </Button>
                </Grid>

                <!-- Segment list -->
                <ItemsControl Grid.Row="1"
                              Grid.ColumnSpan="3"
                              Margin="0,8,0,0"
                              ItemsSource="{Binding Segments}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border Margin="2"
                                    Padding="4"
                                    Background="#202020"
                                    CornerRadius="2">
                                <Grid ColumnDefinitions="Auto,Auto,Auto,Auto,Auto">

                                    <TextBlock Text="{Binding Name}"
                                               Foreground="#f0f0f0"
                                               Grid.Column="0"
                                               Margin="0,0,8,0"/>

                                    <TextBlock Text="{Binding StartFormatted}"
                                               Foreground="#c0c0c0"
                                               Grid.Column="1"
                                               Margin="0,0,8,0"/>

                                    <TextBlock Text="-"
                                               Foreground="#c0c0c0"
                                               Grid.Column="2"
                                               Margin="0,0,8,0"/>

                                    <TextBlock Text="{Binding EndFormatted}"
                                               Foreground="#c0c0c0"
                                               Grid.Column="3"
                                               Margin="0,0,8,0"/>

                                    <ToggleSwitch IsChecked="{Binding Active}"
                                                  Content="Active"
                                                  Grid.Column="4"
                                                  Margin="8,0,0,0"/>
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>

            </Grid>

            <!-- CONVERSION MODE -->
            <StackPanel x:Name="ConversionUI"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Spacing="12"
                        IsVisible="{Binding IsConverting}">

                <ProgressBar Minimum="0"
                             Maximum="100"
                             Value="{Binding Progress}"
                             Width="300"
                             Height="24"/>

                <Button Content="Cancel"
                        Command="{Binding CancelConversionCommand}"
                        Width="120"
                        Height="36"/>
            </StackPanel>

        </Grid>
    </Border>
</UserControl>
