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

    <Page.Resources>
        <ResourceDictionary>
            <local:LinearTransformConverter x:Key="A_LinearTransformConverter_Invert" Scale="-1"/>

            <Style x:Key="A_Style_ListBox_LicensePlate" TargetType="{x:Type local:CommonListBox}">
                <Setter Property="KeyboardNavigation.DirectionalNavigation" Value="None"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type local:CommonListBox}">
                            <StackPanel Orientation="Horizontal" IsItemsHost="True"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="A_Style_ContentControl_LicensePlate"
                   TargetType="{x:Type ContentControl}">
                <Style.Resources>
                    <local:FZMaterialPresetRoundtangleStroke x:Key="A_FZMaterialPresetRoundtangleStroke_CarouselContainerHighlight"
                                                             BasedOn="{StaticResource A_FZMaterialPresetRoundtangleStroke_Rollover}"
                                                             CornerRadius="14"
                                                             Thickness="8" />
                    <Style x:Key="A_FZMaterial_CarouselContainerHighlight_Dynamic"
                           TargetType="{x:Type local:FZMaterial}">
                        <Setter Property="GreedyMeasure" Value="True" />
                        <Setter Property="Margin" Value="-6,-6,-6,-6" />
                        <Setter Property="local:ZPanel.DisableClipping" Value="True" />
                        <Setter Property="IsHitTestVisible" Value="False" />
                        <Setter Property="Preset" Value="{StaticResource A_FZMaterialPresetRoundtangleStroke_CarouselContainerHighlight}" />
                    </Style>
                </Style.Resources>
                <Setter Property="Focusable" Value="False"/>
                <Setter Property="local:RecursiveFocusOnMouseOverBehaviour.Self" Value="True" />
                <Setter Property="Margin" Value="3"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <ControlTemplate.Resources>
                                <Storyboard x:Key="SelectItemStory">
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                                                   Storyboard.TargetName="ScaleTransform">
                                        <DiscreteDoubleKeyFrame KeyTime="0:0:0.0"
                                                                Value="1.04" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                                                                   Storyboard.TargetName="ScaleTransform">
                                        <DiscreteDoubleKeyFrame KeyTime="0:0:0.0"
                                                                Value="1.04" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                                                   Storyboard.TargetName="FocusHighlight">
                                        <DiscreteDoubleKeyFrame KeyTime="0:0:0.0"
                                                                Value="1" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                                                   Storyboard.TargetName="DropShadow">
                                        <DiscreteDoubleKeyFrame KeyTime="0:0:0.0"
                                                                Value="0.6" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                                                   Storyboard.TargetName="ShadowScale">
                                        <DiscreteDoubleKeyFrame KeyTime="0:0:0.0"
                                                                Value="1.04" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                                                                   Storyboard.TargetName="ShadowScale">
                                        <DiscreteDoubleKeyFrame KeyTime="0:0:0.0"
                                                                Value="1.04" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.ZIndex)"
                                                                  Storyboard.Target="{Binding RelativeSource={RelativeSource AncestorType=ContentPresenter}}">
                                        <DiscreteInt32KeyFrame KeyTime="0:0:0.0"
                                                               Value="20" />
                                    </Int32AnimationUsingKeyFrames>
                                </Storyboard>
                                <local:UIStoryboard x:Key="DeselectItemStory"
                                                    Duration="{StaticResource A_Duration_Button_Select}">
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                                                   Storyboard.TargetName="ScaleTransform">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                                              Value="1.0"
                                                              EasingFunction="{local:CircleEasing}" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                                                                   Storyboard.TargetName="ScaleTransform">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                                              Value="1.0"
                                                              EasingFunction="{local:CircleEasing}" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                                                   Storyboard.TargetName="FocusHighlight">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                                              Value="0"
                                                              EasingFunction="{local:CircleEasing}" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                                                   Storyboard.TargetName="DropShadow">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                                              Value="0"
                                                              EasingFunction="{local:CircleEasing}" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                                                   Storyboard.TargetName="ShadowScale">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                                              Value="0.75"
                                                              EasingFunction="{local:CircleEasing}" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                                                                   Storyboard.TargetName="ShadowScale">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                                              Value="0.75"
                                                              EasingFunction="{local:CircleEasing}" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.ZIndex)"
                                                                  Storyboard.Target="{Binding RelativeSource={RelativeSource AncestorType=ContentPresenter}}">
                                        <EasingInt32KeyFrame KeyTime="0:0:0.3"
                                                             Value="0"
                                                             EasingFunction="{local:CircleEasing}" />
                                    </Int32AnimationUsingKeyFrames>
                                </local:UIStoryboard>
                            </ControlTemplate.Resources>
                            <Grid>
                                <local:FZMaterial x:Name="DropShadow"
                                                  Style="{StaticResource A_Style_FZMaterial_ShadowBase_Dynamic}">
                                    <local:FZMaterial.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleX="0"
                                                            ScaleY="0"
                                                            x:Name="ShadowScale" />
                                        </TransformGroup>
                                    </local:FZMaterial.RenderTransform>
                                </local:FZMaterial>

                                <Grid x:Name="ScaledContainer"
                                      RenderTransformOrigin="0.5,0.5"
                                      local:ZPanel.ZOffset="0">
                                    <Grid.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform x:Name="ScaleTransform" />
                                        </TransformGroup>
                                    </Grid.RenderTransform>
                                    <local:FZMaterial x:Name="FocusHighlight"
                                                      Style="{DynamicResource A_FZMaterial_CarouselContainerHighlight_Dynamic}"
                                                      Opacity="0" />
                                    <local:FZMaterial x:Name="ItemBackground"
                                                      Style="{StaticResource A_Style_FZMaterial_RaiseFocusItemBackground}">
                                        <ContentPresenter />
                                    </local:FZMaterial>
                                </Grid>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <DataTrigger Binding="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource Self}}"
                                             Value="True">
                                    <DataTrigger.Setters>
                                        <Setter Property="Selector.IsSelected" Value="True" />
                                    </DataTrigger.Setters>
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard x:Name="ShowSelected_BeginStoryboard2"
                                                         HandoffBehavior="SnapshotAndReplace"
                                                         Storyboard="{StaticResource SelectItemStory}" />
                                    </DataTrigger.EnterActions>
                                    <DataTrigger.ExitActions>
                                        <BeginStoryboard x:Name="HideSelected_BeginStoryboard2"
                                                         HandoffBehavior="SnapshotAndReplace"
                                                         Storyboard="{StaticResource DeselectItemStory}" />
                                    </DataTrigger.ExitActions>
                                </DataTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="A_Style_SpinnerControl_LicensePlateSelect" TargetType="local:SpinnerControl">
                <Style.Resources>
                    <Color x:Key="A_Color_Spinner_ArrowSelected">#FFFF6214</Color>
                    <Color x:Key="A_Color_Spinner_ArrowUnselected">#FFFF6214</Color>
                    <Color x:Key="A_Color_Spinner_ArrowPCBoxUnselected">#5F969696</Color>
                </Style.Resources>
                <Setter Property="Orientation" Value="Vertical"/>
                <Setter Property="ItemsSource" Value="{Binding CharCollection}"/>
                <Setter Property="MouseWheelSelection" Value="True" />
                <Setter Property="WrapSelection" Value="True"/>
                <Setter Property="Height" Value="252" />
                <Setter Property="Width" Value="120" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="local:SpinnerControl">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="UpArrowStateGroup">
                                        <VisualState x:Name="PrevDisabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                                Storyboard.TargetName="UpArrow">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{x:Static Visibility.Hidden}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="PrevEnabled" />
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="DownArrowStateGroup">
                                        <VisualState x:Name="NextDisabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                                Storyboard.TargetName="DownArrow">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{x:Static Visibility.Hidden}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="NextEnabled" />
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <DockPanel VerticalAlignment="Center">
                                    <local:FZButton x:Name="UpArrow"
                                            Command="{TemplateBinding PrevSelectCommand}"
                                            Visibility="Hidden"
                                            Style="{StaticResource A_Style_Button_SpinnerArrowButton}"
                                            HorizontalAlignment="Center"
                                            DockPanel.Dock="Top"
                                            Margin="0,10,0,10">
                                        <ContentControl Style="{StaticResource A_Style_Arrow_Up}"
                                                            Margin="0"
                                                        Focusable="False" />
                                    </local:FZButton>

                                    <local:FZButton x:Name="DownArrow"
                                            Command="{TemplateBinding NextSelectCommand}"
                                            Visibility="Hidden"
                                            Style="{StaticResource A_Style_Button_SpinnerArrowButton}"
                                            HorizontalAlignment="Center"
                                            DockPanel.Dock="Bottom"
                                            Margin="0,10,0,10">
                                        <ContentControl Style="{StaticResource A_Style_Arrow_Down}"
                                                            Margin="0"
                                                        Focusable="False" />
                                    </local:FZButton>

                                    <local:FZMaterial ImageSource="/ForzaUI;component/Textures/Anthem/LicensePlates/LicensePlateAtlas.png"
                                                      Visibility="Visible"
                                                      Color="White"
                                                      HorizontalAlignment="Center"
                                                      VerticalAlignment="Center"
                                                      Width="180"
                                                      Height="180"
                                                      IsHitTestVisible="False"
                                                      Margin="0,0,0,12">
                                        <local:FZMaterial.ImageTransform>
                                            <TransformGroup>
                                                <ScaleTransform ScaleX="8"
                                                                ScaleY="8" />
                                                <TranslateTransform X="{Binding SelectedItem.AtlasX, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource A_LinearTransformConverter_Invert}}"
                                                                    Y="{Binding SelectedItem.AtlasY, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource A_LinearTransformConverter_Invert}}" />
                                            </TransformGroup>
                                        </local:FZMaterial.ImageTransform>
                                    </local:FZMaterial>
                                </DockPanel>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <!-- Gray out the spinnner if it is disabled -->
                                <DataTrigger Binding="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBoxItem}}" Value="True">
                                    <Setter Property="Visibility"
                                            Value="Visible"
                                            TargetName="UpArrow" />
                                    <Setter Property="Visibility"
                                            Value="Visible"
                                            TargetName="DownArrow" />
                                </DataTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="A_Style_FrameworkElement_IEOffset"
                   TargetType="FrameworkElement">
                <Setter Property="Margin" Value="0,0,0,-36" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding SceneEnum, RelativeSource={RelativeSource AncestorType=Page}}"
                                 Value="{x:Static local:SceneEntryEnum.IELicensePlateCustomisation}">
                        <Setter Property="Margin" Value="0,0,0,-6" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ResourceDictionary>
    </Page.Resources>

    <Grid>
        <local:PlayerBarControl x:Name="TopBar"
                            Style="{StaticResource A_Style_PlayerBarControl}" />
        <ContentControl x:Name="BottomBar"
                            Style="{StaticResource A_Style_ButtonBar}">
            <ContentControl x:Name="DefaultHelpPanel"
                            Style="{StaticResource A_Style_ContentControl_DefaultButtonBar}"/>
        </ContentControl>
        <Border Style="{StaticResource A_Style_Border_ScenePadding_Opus}"
                SnapsToDevicePixels="True"
                UseLayoutRounding="True">
            <StackPanel VerticalAlignment="Bottom"
                        Style="{StaticResource A_Style_FrameworkElement_IEOffset}">
                <Decorator Style="{StaticResource A_Style_FrameworkElement_DefaultTransition}"
                           local:UIPageTransitionManager.TransitionIndex="0">
                    <ContentControl Content="{local:Loc ScreenTitles.IDS_LicensePlateCustomisation}"
                                    Style="{StaticResource A_Style_ContentControl_ScreenTitleBlock}"
                                    HorizontalAlignment="Left"
                                    local:BindingProxy.A="/ForzaUI;component/Textures/Anthem/Icons/Titles/LicensePlate.png" />
                </Decorator>

                <Decorator Style="{StaticResource A_Style_FrameworkElement_DefaultTransition}"
                      local:UIPageTransitionManager.TransitionIndex="1">
                    <local:CommonListBox x:Name="PART_SpinnerCollection"
                                         KeyboardNavigation.DirectionalNavigation="Contained"
                                         Style="{StaticResource A_Style_ListBox_LicensePlate}"
                                         ItemContainerStyle="{StaticResource A_Style_ContentControl_LicensePlate}"
                                         Height="256"
                                         HorizontalAlignment="Left"
                                         VerticalAlignment="Stretch">
                        <local:SpinnerControl Style="{StaticResource A_Style_SpinnerControl_LicensePlateSelect}" />
                        <local:SpinnerControl Style="{StaticResource A_Style_SpinnerControl_LicensePlateSelect}" />
                        <local:SpinnerControl Style="{StaticResource A_Style_SpinnerControl_LicensePlateSelect}" />
                        <local:SpinnerControl Style="{StaticResource A_Style_SpinnerControl_LicensePlateSelect}" />
                        <local:SpinnerControl Style="{StaticResource A_Style_SpinnerControl_LicensePlateSelect}" />
                        <local:SpinnerControl Style="{StaticResource A_Style_SpinnerControl_LicensePlateSelect}" />
                        <local:SpinnerControl Style="{StaticResource A_Style_SpinnerControl_LicensePlateSelect}" />
                        <local:SpinnerControl Style="{StaticResource A_Style_SpinnerControl_LicensePlateSelect}" />
                    </local:CommonListBox>
                </Decorator>
            </StackPanel>
        </Border>
    </Grid>
</Page>
