<UserControl
    x:Class="AmbientSounds.Controls.ActiveTrackList"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:AmbientSounds.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:strings="using:AmbientSounds.Strings"
    xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
    xmlns:viewmodels="using:AmbientSounds.ViewModels"
    xmlns:winui="using:Microsoft.UI.Xaml.Controls"
    d:DesignHeight="300"
    d:DesignWidth="400"
    mc:Ignorable="d">

    <UserControl.Resources>
        <!--  Makes save button disabled background transparent.  -->
        <SolidColorBrush x:Key="ButtonBackgroundDisabled" Color="Transparent" />
    </UserControl.Resources>

    <Grid>
        <Border
            x:Name="BorderBackplate"
            Width="220"
            Height="{x:Bind MainGrid.Height, Mode=OneWay}"
            Background="{ThemeResource AcrylicBackplateBrush}"
            BorderBrush="{ThemeResource CardStrokeBrush}"
            BorderThickness="1"
            CornerRadius="8" />

        <Grid
            x:Name="MainGrid"
            Width="220"
            Padding="0"
            CornerRadius="8">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <StackPanel
                x:Name="ControlsPanel"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Orientation="Horizontal">

                <local:PlayerControl />

                <Button
                    x:Uid="ClearActiveButton"
                    Margin="12,0,0,0"
                    Command="{x:Bind ViewModel.ClearCommand}"
                    Style="{StaticResource TransparentRoundButtonStyle}">
                    <FontIcon FontFamily="{StaticResource FluentUIGlyphs}" Glyph="&#xE9F9;" />
                </Button>

                <Button
                    x:Uid="SaveMixButton"
                    Margin="12,0,0,0"
                    IsEnabled="{x:Bind ViewModel.CanSave, Mode=OneWay}"
                    Style="{StaticResource TransparentRoundButtonStyle}">
                    <Button.KeyboardAccelerators>
                        <KeyboardAccelerator Key="S" Modifiers="Control" />
                    </Button.KeyboardAccelerators>

                    <FontIcon FontFamily="{StaticResource FluentUIGlyphs}" Glyph="&#xEB4A;" />
                    <Button.Flyout>
                        <Flyout x:Name="SaveFlyout" Closed="SaveFlyout_Closed">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="auto" />
                                    <ColumnDefinition Width="auto" />
                                </Grid.ColumnDefinitions>
                                <TextBox
                                    x:Name="NameInput"
                                    x:Uid="NameInputBox"
                                    Width="200"
                                    KeyDown="NameInput_KeyDown"
                                    MaxLength="30" />
                                <Button
                                    x:Uid="ConfirmSaveButton"
                                    Grid.Column="1"
                                    Margin="4,0,0,0"
                                    VerticalAlignment="Bottom"
                                    Background="Transparent"
                                    Click="Button_Click"
                                    Command="{x:Bind ViewModel.SaveCommand}"
                                    CommandParameter="{x:Bind NameInput.Text, Mode=OneWay}">
                                    <FontIcon FontFamily="{StaticResource FluentUIGlyphs}" Glyph="&#xE9A1;" />
                                </Button>
                            </Grid>
                        </Flyout>
                    </Button.Flyout>
                </Button>
            </StackPanel>

            <Grid
                Grid.Row="1"
                Margin="8,24,8,0"
                Visibility="{x:Bind ShowList, Mode=OneWay}">
                <winui:ItemsRepeater
                    x:Uid="ActiveTrackListView"
                    ItemsSource="{x:Bind ViewModel.ActiveTracks, Mode=OneWay}"
                    Loaded="OnListLoaded"
                    TabFocusNavigation="Local">
                    <winui:ItemsRepeater.ItemTemplate>
                        <DataTemplate x:DataType="viewmodels:ActiveTrackViewModel">
                            <Grid Margin="0,0,0,16">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto" />
                                    <RowDefinition Height="auto" />
                                </Grid.RowDefinitions>

                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="auto" />
                                    </Grid.ColumnDefinitions>

                                    <TextBlock
                                        VerticalAlignment="Center"
                                        Text="{x:Bind Name, Mode=OneWay}"
                                        TextTrimming="CharacterEllipsis"
                                        ToolTipService.ToolTip="{x:Bind Name, Mode=OneWay}" />
                                    <Button
                                        Grid.Column="1"
                                        Padding="2"
                                        AutomationProperties.Name="{x:Bind local:ActiveTrackList.FormatDeleteMessage(Name), Mode=OneWay}"
                                        Background="Transparent"
                                        Command="{x:Bind RemoveCommand, Mode=OneWay}"
                                        CommandParameter="{x:Bind Sound, Mode=OneWay}">
                                        <FontIcon
                                            FontFamily="{StaticResource FluentUIGlyphs}"
                                            FontSize="12"
                                            Glyph="&#xE9F9;" />
                                    </Button>
                                </Grid>

                                <Slider
                                    x:Uid="VolumeSliderSound"
                                    Grid.Row="1"
                                    HorizontalAlignment="Stretch"
                                    Value="{x:Bind Volume, Mode=TwoWay}" />
                            </Grid>
                        </DataTemplate>
                    </winui:ItemsRepeater.ItemTemplate>
                </winui:ItemsRepeater>


                <StackPanel
                    Grid.Row="1"
                    VerticalAlignment="Center"
                    ui:VisualExtensions.NormalizedCenterPoint="0.5"
                    Visibility="{x:Bind ViewModel.IsPlaceholderVisible, Mode=OneWay}">
                    <ani:Implicit.ShowAnimations>
                        <ani:ScaleAnimation
                            Delay="0:0:0.1"
                            From="0.90"
                            To="1"
                            Duration="0:0:0.5" />
                        <ani:OpacityAnimation
                            Delay="0:0:0.1"
                            From="0"
                            To="1"
                            Duration="0:0:0.3" />
                    </ani:Implicit.ShowAnimations>

                    <FontIcon FontFamily="{StaticResource FluentUIGlyphs}" Glyph="&#xEAD4;" />
                    <TextBlock
                        MaxWidth="120"
                        Margin="0,4,0,0"
                        Text="{x:Bind strings:Resources.SelectSoundsPlaceholder}"
                        TextAlignment="Center"
                        TextWrapping="Wrap" />
                </StackPanel>
            </Grid>
        </Grid>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="ShowListState">
                    <VisualState.Setters>
                        <Setter Target="MainGrid.Height" Value="300" />
                        <Setter Target="MainGrid.Padding" Value="12" />
                        <Setter Target="ControlsPanel.(Grid.Row)" Value="0" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="HideListState">
                    <VisualState.Setters>
                        <Setter Target="MainGrid.Height" Value="60" />
                        <Setter Target="MainGrid.Padding" Value="0" />
                        <Setter Target="ControlsPanel.(Grid.Row)" Value="1" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup>
                <VisualState x:Name="RegularBackgroundState" />
                <VisualState x:Name="ImageBackgroundState">
                    <VisualState.Setters>
                        <Setter Target="BorderBackplate.BorderBrush" Value="Transparent" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</UserControl>
