<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:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
    xmlns:controls="using:AmbientSounds.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    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:ui="using:Microsoft.Toolkit.Uwp.UI"
    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="NarrowSoundTemplate" x:DataType="viewmodels:SoundViewModel">
            <!--
                The control below gets its viewmodel/datacontext
                via the itemRepeater's OnElementPrepared event.
            -->
            <controls:SoundListItem />
        </DataTemplate>
        <DataTemplate x:Key="MainPageSoundTemplate" x:DataType="viewmodels:SoundViewModel">
            <!--
                The control below gets its viewmodel/datacontext
                via the itemRepeater's OnElementPrepared event.
            -->
            <controls:SoundItemControl />
        </DataTemplate>

        <muxc:StackLayout
            x:Name="VerticalStackLayout"
            Orientation="Vertical"
            Spacing="4" />

        <muxc:UniformGridLayout
            x:Name="UniformLayout"
            MinColumnSpacing="8"
            MinRowSpacing="8" />
    </Page.Resources>

    <Grid x:Name="RootGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Rectangle
            x:Name="HeaderBackplate"
            Fill="{ThemeResource SystemControlAcrylicWindowBrush}"
            Stretch="Fill" />
        <Grid
            x:Name="HeaderGrid"
            Margin="0,32,0,12"
            Padding="{StaticResource NarrowPageMargin}">
            <Grid HorizontalAlignment="Left">
                <Border
                    Height="40"
                    HorizontalAlignment="Stretch"
                    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                    CornerRadius="20" />
                <StackPanel Orientation="Horizontal">
                    <Grid x:Name="HomeBackplate">
                        <toolkit:DropShadowPanel Style="{StaticResource SubtleShadow}">
                            <Rectangle
                                Width="{Binding ElementName=HomeTextGrid, Path=ActualWidth}"
                                Height="48"
                                Fill="{ThemeResource FallbackBackgroundOppositeBrush}"
                                RadiusX="24"
                                RadiusY="24" />
                        </toolkit:DropShadowPanel>
                        <Grid
                            x:Name="HomeTextGrid"
                            Height="48"
                            Padding="20,0">
                            <TextBlock
                                VerticalAlignment="Center"
                                FontWeight="SemiBold"
                                Foreground="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                                Text="{x:Bind strings:Resources.Home}" />
                        </Grid>
                    </Grid>
                    <Button
                        Height="40"
                        Margin="4,0,0,0"
                        Padding="12,0"
                        AutomationProperties.Name="{x:Bind strings:Resources.Catalogue}"
                        Background="Transparent"
                        Click="GoToCatalogue"
                        Content="{x:Bind strings:Resources.Catalogue}"
                        CornerRadius="20" />
                </StackPanel>
            </Grid>

            <StackPanel
                HorizontalAlignment="Right"
                VerticalAlignment="Center"
                ui:VisualExtensions.NormalizedCenterPoint="0.5"
                Orientation="Horizontal">
                <controls:ToggleCompactButton Margin="4,0,0,0" Visibility="{x:Bind IsNotTenFoot}" />
                <Button
                    Margin="4,0,0,0"
                    AutomationProperties.Name="{x:Bind strings:Resources.ThemeSettings}"
                    Click="{x:Bind ViewModel.OpenThemeSettings}"
                    Style="{StaticResource TransparentRoundButtonStyle}"
                    ToolTipService.ToolTip="{x:Bind strings:Resources.ThemeSettings}">
                    <FontIcon FontFamily="{StaticResource FluentUIGlyphs}" Glyph="&#xE9C0;" />
                </Button>
                <controls:MoreButton Margin="4,0,0,0" />
                <controls:AccountControl Margin="4,0,0,0" />

                <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>
            </StackPanel>
        </Grid>

        <Grid
            x:Name="ContentGrid"
            Grid.Row="1"
            Padding="0,12,0,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Grid
                x:Name="SideBar"
                Grid.Column="1"
                Margin="16,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>
                <controls:ActiveTrackList x:Name="TrackList" ShowList="False" />
                <controls:SleepTimerControl
                    x:Name="SleepTimer"
                    Grid.Row="1"
                    Margin="0,8,0,0"
                    Visibility="Collapsed" />
            </Grid>

            <controls:SoundGridControl
                x:Name="SoundGallery"
                Grid.Row="1"
                Grid.Column="1"
                Margin="0,12,0,0"
                InnerMargin="16,0,16,16"
                ItemTemplate="{StaticResource NarrowSoundTemplate}"
                Layout="{StaticResource VerticalStackLayout}" />
        </Grid>

        <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 x:Name="NarrowLayout" />
                <VisualState x:Name="WideLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideWindowBreakpoint}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="SoundGallery.(Grid.Column)" Value="1" />
                        <Setter Target="SoundGallery.Margin" Value="12,0,0,0" />
                        <Setter Target="SoundGallery.ItemTemplate" Value="{StaticResource MainPageSoundTemplate}" />
                        <Setter Target="SoundGallery.Layout" Value="{StaticResource UniformLayout}" />
                        <Setter Target="SideBar.(Grid.Row)" Value="1" />
                        <Setter Target="SideBar.(Grid.Column)" Value="0" />
                        <Setter Target="TrackList.ShowList" Value="True" />
                        <Setter Target="SideBar.Margin" Value="0" />
                        <Setter Target="HeaderGrid.Padding" Value="{StaticResource WidePageMargin}" />
                        <Setter Target="SoundGallery.Margin" Value="0,0,0,0" />
                        <Setter Target="SoundGallery.InnerMargin" Value="8,0,40,32" />
                        <Setter Target="ContentGrid.Padding" Value="40,24,0,0" />
                        <Setter Target="SleepTimer.Visibility" Value="Visible" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup>
                <VisualState x:Name="RegularBackgroundState" />
                <VisualState x:Name="ImageBackgroundState">
                    <VisualState.Setters>
                        <Setter Target="HeaderBackplate.Fill" Value="{ThemeResource AcrylicBackplateBrush}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>
