<Page
    x:Class="AmbientSounds.Views.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"
    xmlns:controls="using:AmbientSounds.Controls"
    xmlns:converters="using:AmbientSounds.Converters"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:strings="using:AmbientSounds.Strings"
    xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:viewmodels="using:AmbientSounds.ViewModels"
    PointerEntered="{x:Bind ViewModel.ResetTime}"
    PointerMoved="{x:Bind ViewModel.ResetTime}"
    PointerPressed="{x:Bind ViewModel.ResetTime}"
    PointerReleased="{x:Bind ViewModel.ResetTime}"
    PreviewKeyDown="{x:Bind ViewModel.ResetTime}"
    mc:Ignorable="d">
    <Page.Resources>
        <DataTemplate x:Key="MainPageSoundTemplate" x:DataType="viewmodels:SoundViewModel">
            <GridViewItem
                Margin="8"
                AutomationProperties.ItemStatus="{x:Bind converters:LocalizationConverter.SoundStatus(IsCurrentlyPlaying), Mode=OneWay}"
                AutomationProperties.Name="{x:Bind Name}">
                <GridViewItem.Resources>
                    <!--  These two removes the border on hover and on pressed  -->
                    <SolidColorBrush x:Key="SystemControlHighlightListLowBrush" Color="Transparent" />
                    <SolidColorBrush x:Key="SystemControlHighlightListMediumBrush" Color="Transparent" />
                </GridViewItem.Resources>

                <toolkit:DropShadowPanel x:Name="RootGrid" Style="{StaticResource SoundItemShadow}">
                    <Grid
                        Width="120"
                        Height="120"
                        extensions:VisualExtensions.CenterPoint="60,60,0"
                        CornerRadius="8"
                        PointerEntered="GridScaleUp"
                        PointerExited="GridScaleNormal">
                        <animations:Implicit.Animations>
                            <animations:ScaleAnimation Duration="0:0:0.5" />
                        </animations:Implicit.Animations>
                        <Grid.Background>
                            <ImageBrush Stretch="UniformToFill">
                                <ImageBrush.ImageSource>
                                    <BitmapImage DecodePixelHeight="120" UriSource="{x:Bind ImagePath}" />
                                </ImageBrush.ImageSource>
                            </ImageBrush>
                        </Grid.Background>

                        <Grid x:Name="Image2" x:Load="{x:Bind HasSecondImage}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <toolkit:DropShadowPanel Grid.Column="1" BlurRadius="50">
                                <Image Stretch="UniformToFill">
                                    <Image.Source>
                                        <BitmapImage DecodePixelHeight="120" UriSource="{x:Bind SecondImagePath}" />
                                    </Image.Source>
                                </Image>
                            </toolkit:DropShadowPanel>
                        </Grid>

                        <Grid x:Name="Image3" x:Load="{x:Bind HasThirdImage}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <toolkit:DropShadowPanel
                                x:Name="SecondImage"
                                Grid.Column="1"
                                BlurRadius="50">
                                <Image Stretch="UniformToFill">
                                    <Image.Source>
                                        <BitmapImage DecodePixelHeight="120" UriSource="{x:Bind SecondImagePath}" />
                                    </Image.Source>
                                </Image>
                            </toolkit:DropShadowPanel>
                            <toolkit:DropShadowPanel
                                x:Name="ThirdImage"
                                Grid.Column="2"
                                BlurRadius="50">
                                <Image Stretch="UniformToFill">
                                    <Image.Source>
                                        <BitmapImage DecodePixelHeight="120" UriSource="{x:Bind ThirdImagePath}" />
                                    </Image.Source>
                                </Image>
                            </toolkit:DropShadowPanel>
                        </Grid>

                        <Grid
                            Margin="0,0,0,20"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Background="{StaticResource BackgroundAcrylicBrush}"
                            CornerRadius="30"
                            Visibility="{x:Bind IsCurrentlyPlaying, Mode=OneWay}">
                            <FontIcon
                                Margin="8"
                                FontFamily="{StaticResource FluentUIGlyphs}"
                                FontSize="28"
                                Foreground="White"
                                Glyph="&#xEB7D;" />
                        </Grid>


                        <Grid VerticalAlignment="Bottom" Background="{StaticResource BackgroundAcrylicBrush}">
                            <TextBlock
                                Margin="12,0,0,4"
                                FontFamily="Calibri"
                                FontSize="20"
                                Foreground="White"
                                Text="{x:Bind Name, Mode=OneWay}"
                                TextTrimming="CharacterEllipsis" />
                        </Grid>
                    </Grid>
                </toolkit:DropShadowPanel>

                <GridViewItem.ContextFlyout>
                    <muxc:CommandBarFlyout Placement="BottomEdgeAlignedLeft">
                        <muxc:CommandBarFlyout.SecondaryCommands>
                            <AppBarButton
                                x:Uid="DeleteAppBarButton"
                                Command="{x:Bind DeleteCommand}"
                                Icon="Delete"
                                Visibility="{x:Bind CanDelete}" />
                            <AppBarButton
                                x:Uid="RenameAppBarButton"
                                Command="{x:Bind RenameCommand}"
                                Icon="Rename"
                                Visibility="{x:Bind IsMix}" />
                            <AppBarElementContainer Visibility="{x:Bind IsNotMix}">
                                <StackPanel Width="300" Margin="12">
                                    <TextBlock x:Uid="Copyright" FontWeight="SemiBold" />
                                    <TextBlock
                                        Margin="0,8,0,0"
                                        IsTextSelectionEnabled="True"
                                        Text="{x:Bind Attribution}"
                                        TextWrapping="Wrap" />
                                </StackPanel>
                            </AppBarElementContainer>
                        </muxc:CommandBarFlyout.SecondaryCommands>
                    </muxc:CommandBarFlyout>
                </GridViewItem.ContextFlyout>
            </GridViewItem>
        </DataTemplate>
    </Page.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="92" />
            <RowDefinition x:Name="ActiveTracksRow" Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid Margin="40,32,40,0" VerticalAlignment="Center">
            <StackPanel
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Orientation="Horizontal">
                <controls:LogoControl />
                <TextBlock
                    Margin="8,0,0,0"
                    FontFamily="Calibri"
                    FontSize="32"
                    Text="Ambie" />
                <controls:ViewCatalogueButton
                    x:Name="CatalogueButton"
                    Margin="8,0,0,0"
                    IconOnly="True" />
                <controls:SleepTimerControl Margin="4,0,0,0" />
                <controls:ToggleCompactButton Margin="4,0,0,0" Visibility="{x:Bind IsNotTenFoot}" />
                <controls:MoreButton Margin="4,0,0,0" />
            </StackPanel>

            <StackPanel
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                Orientation="Horizontal">
                <controls:AccountControl x:Name="AccountButton" x:Load="{x:Bind IsNotTenFoot}" />
            </StackPanel>
        </Grid>

        <Grid
            Grid.Row="1"
            Margin="32,0"
            VerticalAlignment="Center">
            <controls:ActiveTrackList x:Name="ActiveList" HorizontalAlignment="Center">
                <FlyoutBase.AttachedFlyout>
                    <Flyout Opened="Flyout_Opened" Placement="Bottom">
                        <Grid MaxWidth="300">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>

                            <FontIcon
                                Margin="0,0,12,0"
                                FontFamily="{StaticResource FluentUIGlyphs}"
                                Glyph="&#xEA7D;" />

                            <StackPanel Grid.Column="1">
                                <TextBlock
                                    x:Uid="LimitReachedTitle"
                                    FontWeight="SemiBold"
                                    TextWrapping="WrapWholeWords" />
                                <TextBlock
                                    x:Name="LimitWarningText"
                                    x:Uid="LimitReachedMessage"
                                    AutomationProperties.LiveSetting="Assertive"
                                    TextWrapping="WrapWholeWords" />
                            </StackPanel>
                        </Grid>
                    </Flyout>
                </FlyoutBase.AttachedFlyout>
            </controls:ActiveTrackList>
            <animations:Implicit.Animations>
                <animations:OffsetAnimation Duration="0:0:1" />
            </animations:Implicit.Animations>
        </Grid>

        <controls:SoundGridControl
            x:Name="SoundGallery"
            Grid.Row="2"
            Margin="0,12,0,0"
            ItemTemplate="{StaticResource MainPageSoundTemplate}"
            ShowCatalogueButton="True">
            <animations:Implicit.Animations>
                <animations:OffsetAnimation Duration="0:0:1" />
            </animations:Implicit.Animations>
        </controls:SoundGridControl>

        <muxc:TeachingTip
            x:Name="PinTeachingTip"
            Title="{x:Bind strings:Resources.HelloAndWelcome}"
            ActionButtonClick="PinTeachingTip_ActionButtonClick"
            ActionButtonContent="{x:Bind strings:Resources.PinToTaskbar}"
            CloseButtonContent="{x:Bind strings:Resources.Dismiss}"
            PreferredPlacement="BottomRight"
            Subtitle="{x:Bind strings:Resources.FirstLaunchMessage}" />

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowHeight="800" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="ActiveTracksRow.Height" Value="360" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowHeight="1000" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="ActiveTracksRow.Height" Value="440" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowHeight="1200" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="ActiveTracksRow.Height" Value="520" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="1000" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="SoundGallery.ItemGridMaxWidth" Value="800" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="1500" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="SoundGallery.ItemGridMaxWidth" Value="1200" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>
