<UserControl
    x:Class="AmbientSounds.Controls.UploadedSoundsList"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:convert="using:AmbientSounds.Converters"
    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:local="using:AmbientSounds.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:strings="using:AmbientSounds.Strings"
    xmlns:viewmodels="using:AmbientSounds.ViewModels"
    xmlns:winui="using:Microsoft.UI.Xaml.Controls"
    d:DesignHeight="300"
    d:DesignWidth="400"
    mc:Ignorable="d">
    <interactivity:Interaction.Behaviors>
        <core:EventTriggerBehavior EventName="Loaded">
            <core:InvokeCommandAction Command="{x:Bind ViewModel.LoadCommand}" />
        </core:EventTriggerBehavior>
    </interactivity:Interaction.Behaviors>

    <UserControl.Resources>
        <Style x:Key="PublishStateEllipse" TargetType="Ellipse">
            <Setter Property="Width" Value="20" />
            <Setter Property="Height" Value="20" />
        </Style>

        <Style x:Key="PublishStateIcon" TargetType="FontIcon">
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="FontFamily" Value="{StaticResource FluentUIGlyphs}" />
            <Setter Property="FontSize" Value="14" />
        </Style>

        <DataTemplate x:Key="UploadedSoundTemplate" x:DataType="viewmodels:UploadedSoundViewModel">
            <ListViewItem Padding="0,10" AutomationProperties.Name="{x:Bind Name}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Grid
                        Width="100"
                        VerticalAlignment="Stretch"
                        CornerRadius="8">
                        <Image Source="{x:Bind ImagePath}" Stretch="UniformToFill" />
                    </Grid>
                    <Grid Grid.Column="1" Margin="20,0,0,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="auto" />
                        </Grid.RowDefinitions>
                        <StackPanel>
                            <TextBlock
                                FontSize="20"
                                FontWeight="SemiBold"
                                Text="{x:Bind Name}" />
                            <TextBlock
                                IsTextSelectionEnabled="True"
                                Text="{x:Bind Attribution}"
                                TextTrimming="CharacterEllipsis" />
                            <StackPanel Margin="0,10,0,0" Orientation="Horizontal">
                                <Grid Visibility="{x:Bind IsPublished}">
                                    <Ellipse Fill="ForestGreen" Style="{StaticResource PublishStateEllipse}" />
                                    <FontIcon Glyph="&#xE9A1;" Style="{StaticResource PublishStateIcon}" />
                                </Grid>
                                <Grid Visibility="{x:Bind IsRejected}">
                                    <Ellipse Fill="DarkRed" Style="{StaticResource PublishStateEllipse}" />
                                    <FontIcon Glyph="&#xE9F9;" Style="{StaticResource PublishStateIcon}" />
                                </Grid>
                                <Grid Visibility="{x:Bind IsPending}">
                                    <Ellipse Fill="DodgerBlue" Style="{StaticResource PublishStateEllipse}" />
                                    <FontIcon Glyph="&#xEA8B;" Style="{StaticResource PublishStateIcon}" />
                                </Grid>

                                <TextBlock Margin="12,0,0,0" Text="{x:Bind convert:LocalizationConverter.ConvertPublishState(PublishState)}" />
                            </StackPanel>
                        </StackPanel>
                        <StackPanel
                            Grid.Row="1"
                            Margin="0,12,0,0"
                            Orientation="Horizontal">
                            <Button x:Uid="DeleteButton" IsEnabled="{x:Bind convert:VisibilityConverter.Invert(DeleteCommand.IsRunning), Mode=OneWay}">
                                <FontIcon FontFamily="{StaticResource FluentUIGlyphs}" Glyph="&#xE9ED;" />
                                <Button.Flyout>
                                    <Flyout
                                        Closed="DeleteFlyout_Closed"
                                        Opened="DeleteFlyout_Opened"
                                        Placement="Right">
                                        <StackPanel>
                                            <TextBlock Text="{x:Bind strings:Resources.AreYouSure}" />
                                            <Button
                                                Margin="0,4,0,0"
                                                HorizontalAlignment="Stretch"
                                                Click="CloseDeleteFlyout"
                                                Command="{x:Bind DeleteCommand}"
                                                Content="{x:Bind strings:Resources.Yes}" />
                                        </StackPanel>
                                    </Flyout>
                                </Button.Flyout>
                            </Button>
                        </StackPanel>
                    </Grid>
                </Grid>
            </ListViewItem>
        </DataTemplate>
    </UserControl.Resources>

    <Grid>
        <ListView
            x:Uid="UploadedSoundsList"
            Padding="32,10"
            ItemTemplate="{StaticResource UploadedSoundTemplate}"
            ItemsSource="{x:Bind ViewModel.UploadedSounds}"
            SelectionMode="None">
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    <Setter Property="IsFocusEngagementEnabled" Value="True" />
                </Style>
            </ListView.ItemContainerStyle>
        </ListView>

        <StackPanel
            Margin="0,0,0,80"
            VerticalAlignment="Center"
            Visibility="{x:Bind ViewModel.IsEmptyPlaceholderVisible, Mode=OneWay}">
            <Image Height="240" Source="ms-appx:///Assets/undraw_going_up_ttm5.png" />
            <TextBlock
                MaxWidth="240"
                Margin="0,12,0,0"
                HorizontalAlignment="Center"
                HorizontalTextAlignment="Center"
                Text="{x:Bind strings:Resources.UploadPlaceholderMessage}"
                TextWrapping="WrapWholeWords" />
        </StackPanel>

        <winui:ProgressRing
            x:Name="CatalogueProgressRing"
            Width="40"
            Height="40"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            x:Load="{x:Bind ViewModel.LoadCommand.IsRunning, Mode=OneWay}"
            Foreground="{ThemeResource DefaultTextForegroundThemeBrush}"
            IsActive="{x:Bind ViewModel.LoadCommand.IsRunning, Mode=OneWay}" />
    </Grid>
</UserControl>
