<Page x:Name="Page"
    x:Class="ForzaUI.A_LiveryVinylSelect"
    xmlns:local="clr-namespace:ForzaUI"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    mc:Ignorable="d"
    Style="{StaticResource A_Style_Page_Generic}"
    DataContext="{Binding RelativeSource={RelativeSource Self}}">

    <Page.Resources>
        <ResourceDictionary>
            <System:Double x:Key="A_Double_VinylItemWidth">174</System:Double>
            <System:Double x:Key="A_Double_VinylItemHeight">174</System:Double>

            <SolidColorBrush x:Key="PART_VinylModelColor" Color="White"/>

            <System:Double x:Key="A_Double_Vinyl_Size">170</System:Double>

            <ControlTemplate x:Key="A_ControlTemplate_Spinner">
                <ProgressBar x:Name="Spinner"
                             IsIndeterminate="True"
                             Style="{StaticResource A_Style_ProgressBar_WaitSpinner}"
                             Height="56" />
            </ControlTemplate>

            <DataTemplate x:Key="A_DataTemplate_LiveryVinylItem">
                <Grid local:ZPanel.DisableClipping="{Binding (Selector.IsSelected), RelativeSource={RelativeSource AncestorType=ListBoxItem}}">
                    <local:FZMaterial x:Name="FzMaterial_LiveryShape"
                                      Width="128"
                                      Height="128"
                                      ClipToBounds="True"
                                      Visibility="{Binding IsStorefrontItem, Converter={StaticResource A_FZBooleanToVisibilityConverter_Inverse}}"
                                      IsHitTestVisible="False">
                        <local:FZMaterial.Effect>
                            <local:LinearToSRGBEffect>
                                <local:LinearToSRGBEffect.Input>
                                    <ImageBrush ImageSource="{Binding LiveryImage}"/>
                                </local:LinearToSRGBEffect.Input>
                            </local:LinearToSRGBEffect>
                        </local:FZMaterial.Effect>
                    </local:FZMaterial>

                    <Grid Visibility="{Binding IsStorefrontItem, Converter={StaticResource A_FZBooleanToVisibilityConverter}}"
                          IsHitTestVisible="False">
                        <ContentControl DataContext="{Binding}" Template="{StaticResource A_ControlTemplate_Spinner}" Visibility="{Binding IsReady, Converter={StaticResource A_FZBooleanToVisibilityConverter_Inverse}}" />
                        <local:FZMaterial x:Name="FzMaterial_LiveryShape_UGC" Width="145" Height="145" HorizontalAlignment="Center" VerticalAlignment="Center"
                                          Visibility="{Binding IsReady, Converter={StaticResource A_FZBooleanToVisibilityConverter}}">
                            <local:FZMaterial.Effect>
                                <local:LinearToSRGBEffect>
                                    <local:LinearToSRGBEffect.Input>
                                        <ImageBrush ImageSource="{Binding LiveryImage}"/>
                                    </local:LinearToSRGBEffect.Input>
                                </local:LinearToSRGBEffect>
                            </local:FZMaterial.Effect>
                        </local:FZMaterial>
                    </Grid>
                </Grid>
            </DataTemplate>

            <Style x:Key="A_Style_FrameworkElement_CategoryContainer"
                   TargetType="FrameworkElement">
                <Setter Property="Visibility" Value="{Binding ShowTabs, Converter={StaticResource A_FZBooleanToVisibilityConverter}}" />
            </Style>

            <Style x:Key="A_Style_FZTextBlock_CreatorInfoLabel"
                   TargetType="local:FZTextBlock"
                   BasedOn="{StaticResource A_Style_FZTextBlock_HorizonA}">
                <Setter Property="Color" Value="{StaticResource A_Color_Body_Text}" />
                <Setter Property="CapHeight" Value="16" />
                <Setter Property="Margin" Value="0,0,0,12" />
            </Style>

            <Style x:Key="A_Style_FZTextBlock_CreatorInfoValue"
                   TargetType="local:FZTextBlock"
                   BasedOn="{StaticResource A_Style_FZTextBlock_HorizonB}">
                <Setter Property="Color" Value="{StaticResource A_Color_Body_Text}" />
                <Setter Property="CapHeight" Value="24" />
                <Setter Property="Margin" Value="0,0,0,35" />
            </Style>

        </ResourceDictionary>
    </Page.Resources>

    <local:UIPageTransitionManager.TransitionManager>
        <local:UIPageTransitionManager Preset="{StaticResource A_UIPageTransitionManagerPreset_Menu}"/>
    </local:UIPageTransitionManager.TransitionManager>

    <Grid x:Name="LayoutRoot">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="LiveryVinylInfoStateGroup">
                <VisualState x:Name="InfoAvailableState">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="InfoPanel">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="InfoUnavailableState"/>
            </VisualStateGroup>
            <VisualStateGroup x:Name="LiveryVisualStateGroup">
                <VisualState x:Name="VinylSelectVisualState"/>
                <VisualState x:Name="DecalSelectVisualState">
                    <Storyboard>
                        <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="MainContainer">
                            <EasingThicknessKeyFrame KeyTime="0" Value="8,20,8,0"/>
                        </ThicknessAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        
        <!-- Background Blur -->
       <Control Style="{StaticResource A_Style_Control_ScreenBackground}" />

        <!-- Bars -->
        <ContentControl x:Name="BottomBar" Style="{StaticResource A_Style_ButtonBar}">
            <ContentControl Name="DefaultHelpPanel" Focusable="False" 
                        Style="{StaticResource A_Style_ContentControl_DefaultButtonBar}" />
        </ContentControl>

        <Border Style="{StaticResource A_Style_Border_ScenePadding}">
            <Grid x:Name="MainContainer"  Margin="8,0,8,-15">

                <StackPanel Orientation="Vertical"
                            MaxWidth="1740"
                            VerticalAlignment="Bottom">
                    <StackPanel Orientation="Horizontal" Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_0}" >
                        <ContentControl Content="{Binding CurrentScreenTitle}"
                                Style="{StaticResource A_Style_ContentControl_ScreenTitleBlock}" 
                                local:BindingProxy.A="/ForzaUI;component/Textures/Anthem/Icons/Titles/Layers.png"
                                Focusable="False" Tag="{Binding CurrentScreenLocation}" />
                    </StackPanel>

                    <Decorator Style="{StaticResource A_Style_FrameworkElement_CategoryContainer}">
                        <Grid x:Name="Grid_CategoryRibbon"
                              Margin="0,0,0,16"
                              VerticalAlignment="Top"
                              HorizontalAlignment="Left"
                              Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_1}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <local:ItemsSelector x:Name="PART_CategoryList"
                                                 Grid.Column="2"
                                                 Style="{StaticResource A_Style_TextTabMenuList}"
                                                 Focusable="False"
                                                 ItemsSource="{Binding MenuItems}"
                                                 Width="1734" />
                        </Grid>
                    </Decorator>
                    
                    <DockPanel>
                        <DockPanel x:Name="InfoPanel" 
                                   Visibility="Collapsed"
                                   Width="342"
                                   Height="690"
                                   DockPanel.Dock="Right"
                                   VerticalAlignment="Top"
                                   Margin="0,0,6,0"
                                   Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_0}"
                                   DataContext="{Binding SelectedItem, ElementName=PART_ItemGrid}">
                            <ContentControl DockPanel.Dock="Top"
                                            Content="{local:Loc Livery.IDS_CreatorInfo}"
                                            Style="{StaticResource A_Style_ContentControl_Header}" />
                            <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_GlassPanel_BodyPanel}">
                                <DockPanel LastChildFill="False">
                                    <local:FZMaterial DockPanel.Dock="Bottom"
                                                      Style="{StaticResource A_Style_FZMaterial_FlatPanel_FooterPanel}"
                                                      Color="#FFFFFFFF"
                                                      MinHeight="69">
                                        <local:DeltaProgressBar Style="{StaticResource A_Style_DeltaProgressBar_Popularity}"
                                                                Margin="25"
                                                                HorizontalAlignment="Center"
                                                                VerticalAlignment="Center"
                                                                BaseValue="{Binding Popularity}"
                                                                NewValue="{Binding Popularity}" 
                                                                local:BindingProxy.B="#FF00b592" />
                                    </local:FZMaterial>
                                    <local:FZMaterial Color="{StaticResource A_Color_Header_Background}"
                                                      DockPanel.Dock="Bottom">
                                        <local:FZTextBlock Text="{local:Loc Storefront.IDS_LabelPopularity}"
                                                           Style="{StaticResource A_Style_FZTextBlock_CreatorInfoLabel}"
                                                           VerticalAlignment="Center"
                                                           HorizontalAlignment="Center"
                                                           CapHeight="16"
                                                           Margin="25,13" />
                                    </local:FZMaterial>
                                    <StackPanel Margin="25">
                                        <local:FZTextBlock Text="{local:Loc Storefront.IDS_LabelFilename}"
                                                           Style="{StaticResource A_Style_FZTextBlock_CreatorInfoLabel}" />
                                        <local:FZTextBlock Text="{Binding Filename}"
                                                           Style="{StaticResource A_Style_FZTextBlock_CreatorInfoValue}" />

                                        <local:FZTextBlock Text="{local:Loc Storefront.IDS_LabelCreator}"
                                                           Style="{StaticResource A_Style_FZTextBlock_CreatorInfoLabel}" />
                                        <local:FZTextBlock Text="{Binding UserProfile.FormattedGamertag}"
                                                           Style="{StaticResource A_Style_FZTextBlock_CreatorInfoValue}" />

                                        <local:FZTextBlock Text="{local:Loc Storefront.IDS_LabelCreatorFollowed}"
                                                           Style="{StaticResource A_Style_FZTextBlock_CreatorInfoLabel}"/>
                                        <Grid Visibility="{Binding HasItems, ElementName=PART_ItemGrid, Converter={StaticResource A_FZBooleanToVisibilityConverter}}">
                                            <local:FZTextBlock Text="{local:Loc Storefront.IDS_CreatorFollowed}"
                                                               Style="{StaticResource A_Style_FZTextBlock_CreatorInfoValue}"
                                                               Visibility="{Binding IsCreatorFollowed, Converter={StaticResource A_FZBooleanToVisibilityConverter}}"
                                                               Color="{StaticResource A_Color_InactiveTitle_Text}"/>
                                            <local:FZTextBlock Text="{local:Loc Storefront.IDS_CreatorNotFollowed}"
                                                               Style="{StaticResource A_Style_FZTextBlock_CreatorInfoValue}"
                                                               Visibility="{Binding IsCreatorFollowed, Converter={StaticResource A_FZBooleanToVisibilityConverter_Inverse}}"
                                                               Color="{StaticResource A_Color_InactiveTitle_Text}"/>
                                        </Grid>
                                    </StackPanel>
                                </DockPanel>
                            </local:FZMaterial>
                        </DockPanel>
                        <Grid x:Name="ItemContainer"
                              Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_1}"
                              DockPanel.Dock="Left"
                              VerticalAlignment="Top"
                              Height="780">
                            <local:WrapListBox x:Name="PART_ItemGrid"
                                               Template="{StaticResource A_ControlTemplate_Carousel_Default}"
                                               Tag="{Binding SelectedItem.LiveryCategoryType, ElementName=PART_CategoryList}"
                                               HorizontalAlignment="Left"
                                               PageSize="0"
                                               Height="696"
                                               VerticalAlignment="Top"
                                               ItemWidth="{StaticResource A_Double_VinylItemWidth}"
                                               ItemHeight="{StaticResource A_Double_VinylItemHeight}"
                                               ItemsSource="{Binding VinylItems}"
                                               AllowMouseWheelScrolling="False"
                                               OverrideAcrossNavigation="True"
                                               ItemTemplate="{StaticResource A_DataTemplate_LiveryVinylItem}"
                                               ItemContainerStyle="{StaticResource A_Style_ContentControl_Carousel_ContainerStyle_SelectOnMouseHover}"
                                               Panel.ZIndex="1" />

                            <ScrollBar Style="{StaticResource A_Style_ScrollBar_Default}"
                                       Orientation="Horizontal"
                                       VerticalAlignment="Top"
                                       Margin="0,701,0,0"
                                       Minimum="{Binding ScrollWindowMin, ElementName=PART_ItemGrid}"
                                       Maximum="{Binding ScrollWindowMax, ElementName=PART_ItemGrid}"
                                       Value="{Binding ScrollWindowValue, ElementName=PART_ItemGrid, Mode=TwoWay}"
                                       ViewportSize="{Binding ScrollWindowSize, ElementName=PART_ItemGrid}" />
                        </Grid>
                    </DockPanel>
                </StackPanel>
            </Grid>
        </Border>
    </Grid>
</Page>