<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_Arrow_Up_LicensePlate" TargetType="Control" BasedOn="{StaticResource A_Style_Arrow_Up}">
                <Style.Resources>
                    <ColorAlias x:Key="A_Color_Spinner_ArrowSelected" Color="{StaticResource H_Color_Primary_Pink}"/>
                </Style.Resources>
            </Style>

            <Style x:Key="A_Style_Arrow_Down_LicensePlate" TargetType="Control" BasedOn="{StaticResource A_Style_Arrow_Down}">
                <Style.Resources>
                    <ColorAlias x:Key="A_Color_Spinner_ArrowSelected" Color="{StaticResource H_Color_Primary_Pink}"/>
                </Style.Resources>
            </Style>

            <Style x:Key="A_Style_ContentControl_LicensePlate"
                   TargetType="{x:Type ContentControl}">
                <Setter Property="Margin" Value="2"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding DataContext, RelativeSource={RelativeSource Self}, Converter={TypeCompareConverter}, ConverterParameter={Type local:FZButton}}"
                                Value="True">
                        <Setter Property="Margin" Value="2"/>
                    </DataTrigger>
                </Style.Triggers>
                <Setter Property="Focusable" Value="False"/>
                <Setter Property="local:RecursiveFocusOnMouseOverBehaviour.Self" Value="True" />
                <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>
                                    <StrokeHighlightControl x:Name="FocusHighlight"
                                                            ContentRadius="4"
                                                             Style="{StaticResource H_Style_StrokeHighlight_Instant_TextMenu}"
                                                            Opacity="0" />
                                    <local:FZMaterial x:Name="ItemBackground"
                                                      Style="{StaticResource A_Style_FZMaterial_FlatPanel_Tile}">
                                        <local:FZMaterial.Preset>
                                            <local:FZMaterialPresetRoundtangle BasedOn="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_OuterAll}"
                                                                                CornerRadius="4"/>
                                        </local:FZMaterial.Preset>
                                        <ContentPresenter />
                                    </local:FZMaterial>
                                </Grid>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <DataTrigger Binding="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource Self}}"
                                             Value="True">
                                    <DataTrigger.Setters>
                                        <Setter Property="Selector.IsSelected" Value="True" />
                                        <Setter TargetName="ItemBackground" Property="Color" Value="{StaticResource H_Color_Primary_Black}"/>
                                    </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_FZMaterial_LicensePlateIcon" TargetType="local:FZMaterial">
                <Setter Property="Visibility" Value="Visible"/>
                <Setter Property="HorizontalAlignment" Value="Center"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="Width" Value="180"/>
                <Setter Property="Height" Value="180"/>
                <Setter Property="Margin" Value="0,0,0,12"/>
                <Setter Property="Color" Value="{StaticResource H_Color_Primary_White}"/>
                <Style.Triggers>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBoxItem}}" Value="False"/>
                            <Condition Binding="{Binding SelectedItem.IsSpecialChar,  RelativeSource={RelativeSource TemplatedParent}}" Value="2" LogicalOp="NotEquals"/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property="Color" Value="{StaticResource H_Color_Primary_Black}"/>
                    </MultiDataTrigger>
                </Style.Triggers>
            </Style>

            <Style x:Key="A_Style_SpinnerControl_LicensePlateSelect" TargetType="local:SpinnerControl">
                <Style.Resources>
                    <Color x:Key="A_Color_Spinner_ArrowSelected">#FF341735</Color>
                    <Color x:Key="A_Color_Spinner_ArrowUnselected">#FFF7F7F7</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="250" />
                <Setter Property="Width" Value="142" />
                <Setter Property="Focusable" Value="True" />
                <Setter Property="ScreenReader.LineType" Value="SelectedItem"/> 
                <Setter Property="ScreenReader.Event" Value="OnChange"/> 
                <Setter Property="ScreenReader.ControlType" Value="VerticalSpinner"/> 
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="local:SpinnerControl">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="UpArrowStateGroup">
                                        <VisualState x:Name="PART_PrevDisabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                                Storyboard.TargetName="UpArrow">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{x:Static Visibility.Hidden}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="PART_PrevEnabled" />
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="DownArrowStateGroup">
                                        <VisualState x:Name="PART_NextDisabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                                Storyboard.TargetName="DownArrow">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
                                                                            Value="{x:Static Visibility.Hidden}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="PART_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_LicensePlate}"
                                                            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_LicensePlate}"
                                                            Margin="0"
                                                        Focusable="False" />
                                    </local:FZButton>

                                    <local:FZMaterial Name="Icon"
                                                      ImageSource="/ForzaUI;component/Textures/Anthem/LicensePlates/LicensePlateAtlas.png"
                                                      Style="{StaticResource A_Style_FZMaterial_LicensePlateIcon}">
                                        <local:FZMaterial.ImageTransform>
                                            <TransformGroup>
                                                <ScaleTransform ScaleX="{Binding AtlasW, RelativeSource={RelativeSource AncestorType=Page}}"
                                                                ScaleY="{Binding AtlasH, RelativeSource={RelativeSource AncestorType=Page}}" />
                                                <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" />
                                    <Setter Property="ScreenReader.Line" 
                                            Value="{Binding SelectedItem.ReaderDesc, RelativeSource={RelativeSource Self}}"/> 
                                </DataTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="A_Style_FZButton_AcceptButton" TargetType="FZ:Button">
                <Setter Property="Width" Value="142"/>
                <Setter Property="Height" Value="250"/>
                <Setter Property="Command" Value="{Binding AcceptLicensePlateCommand}" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type local:FZButton}">
                            <StackPanel Orientation="Vertical" 
                                            VerticalAlignment="Center"
                                            HorizontalAlignment="Center">
                                <FZMaterial x:Name="AcceptIcon" 
                                            ImageSource="/ForzaUI;component/Textures/Anthem/Icons/License_Plate_Accept.png" 
                                            HorizontalAlignment="Center" 
                                            Width="70" 
                                            Height="70" 
                                            Color="{StaticResource A_Color_EditLicensePlate_AcceptButton_Icon}" />
                                <Decorator Margin="0,15,0,0" />
                                <FZTextBlock Name="AcceptText"  
                                             Text="{Loc HelpButtons.IDS_Accept}" 
                                             HorizontalAlignment="Center"
                                             Color="{StaticResource A_Color_EditLicensePlate_AcceptButton_Text}" 
                                             FontSize="30" 
                                             FontFamily="Horizon_A"/>
                            </StackPanel>
                            <ControlTemplate.Triggers>
                                <DataTrigger Binding="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBoxItem}}" Value="True">
                                    <Setter TargetName="AcceptIcon" Property="Color" Value="{StaticResource H_Color_Primary_White}"/>
                                    <Setter TargetName="AcceptText" Property="Color" Value="{StaticResource H_Color_Primary_White}"/>
                                </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 IsIE, RelativeSource={RelativeSource AncestorType=Page}}"
                                 Value="{StaticResource A_Boolean_True}">
                        <Setter Property="Margin" Value="0,0,0,-6" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ResourceDictionary>
    </Page.Resources>

    <Grid>
        <ContentControl x:Name="BottomBar"
                            Style="{StaticResource A_Style_ButtonBar}">
            <ContentControl x:Name="PART_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" Margin="0,0,0,10">
                    <ContentControl Content="{local:Loc ScreenTitles.IDS_LicensePlateCustomisation}"
                                    Style="{StaticResource A_Style_ContentControl_ScreenTitleBlock}"
                                    HorizontalAlignment="Left"
                                    Margin="0,0,0,-2"
                                    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"
                                         Margin="-2,0,0,0"
                                         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:FZButton x:Name="AcceptButon" Style="{StaticResource A_Style_FZButton_AcceptButton}" />
                    </local:CommonListBox>
                </Decorator>
            </StackPanel>
        </Border>
    </Grid>
</Page>
