<Page x:Class="ForzaUI.Scenes.Anthem.A_PlayerNameSelect"
      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>

            <System:Double x:Key="A_Double_NameItem_Height">50</System:Double>
            <System:Double x:Key="A_Double_NameItem_Width">280</System:Double>
            <System:Double x:Key="A_Double_NameItem_HeightWithMargin">53</System:Double>
            <System:Double x:Key="A_Double_NameItem_WidthWithMargin">283</System:Double>

            <Style x:Key="A_Style_Control_NameSelect_EmptyItemStyle"
                TargetType="Control"
                BasedOn="{StaticResource A_Style_Control_Carousel_EmptyItemStyle}">
                <Setter Property="Margin" Value="0,0,-3,-3"/>
            </Style>

            <Style x:Key="A_Style_ListBoxItem_TextMenu_PlayerNames"
                   BasedOn="{StaticResource A_Style_ListBoxItem_TextMenu_Default}"
                   TargetType="{x:Type ListBoxItem}">
                <Setter Property="Visibility"
                        Value="Visible" />
                <Setter Property="Width"
                        Value="{StaticResource A_Double_NameItem_Width}" />
                <Setter Property="Height"
                        Value="{StaticResource A_Double_NameItem_Height}" />
            </Style>

            <Style x:Key="A_Style_FZTextBlock_NameItemText"
                TargetType="{x:Type local:FZTextBlock}"
                BasedOn="{StaticResource A_Style_FZTextBlock_GridMenuItemText}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsCurrent}"
                        Value="True">
                        <Setter Property="Color"
                            Value="{StaticResource A_Color_TextMenu_Text_Highlighted}" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>

            <Style x:Key="A_Style_FZMaterial_NameItemIsCurrent"
                TargetType="{x:Type local:FZMaterial}"
                BasedOn="{StaticResource A_Style_FZMaterial_FlatPanel_Tile}">
                <Setter Property="Color" Value="{StaticResource A_Color_Header_Background}"/>
                <Setter Property="Visibility" Value="{Binding IsCurrent, Converter={StaticResource A_FZBooleanToVisibilityConverter}}"/>
                <Setter Property="local:ScreenReader.Event" Value="OnChange"/>
                <Setter Property="local:ScreenReader.ControlType" Value="Button"/>
                <Setter Property="local:ScreenReader.LineType" Value="SelectedItem"/>
                <Setter Property="local:ScreenReader.SelectedNumber" Value="{Binding Row, Converter={StaticResource A_IndexToNumberConverter}, FallbackValue=0}"/>
                <Setter Property="local:ScreenReader.SelectedCount" Value="{Binding Items.Count, RelativeSource={RelativeSource AncestorType={x:Type Selector}}, FallbackValue=0}"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource AncestorType=ListBoxItem}}"
                        Value="True">
                        <Setter Property="Visibility" Value="{x:Static Visibility.Collapsed}"/>
                        <Setter Property="local:ScreenReader.Line" Value="{Binding DisplayName}"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>

            <DataTemplate x:Key="A_DataTemplate_NameItem">
                <Grid Focusable="True" IsHitTestVisible="False">
                    <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_NameItemIsCurrent}"/>
                    <local:FZTextBlock Text="{Binding DisplayName, Converter={StaticResource A_StringToUpper}}" Style="{StaticResource A_Style_FZTextBlock_NameItemText}"/>
                </Grid>
            </DataTemplate>

            <Thickness x:Key="A_Thickness_NameSelectScrollbarMargin">11,0,0,0</Thickness>
            <local:LinearTransformConverter x:Key="A_Converter_NameSelectScrollbarSize" Add="0" />

            <!-- We need the scrollbar to sit outside the popup content box in the filter popup -->
            <ControlTemplate x:Key="A_ControlTemplate_ScrollViewer_NameSelect"
                             TargetType="ScrollViewer">
                <Grid>
                    <!-- Canvas ensures the scrollbar doesn't contribute to measure -->
                    <Canvas HorizontalAlignment="Right">
                        <ScrollBar x:Name="PART_VerticalScrollBar"
                                   HorizontalAlignment="Left"
                                   Minimum="0"
                                   Margin="{StaticResource A_Thickness_NameSelectScrollbarMargin}"
                                   MinHeight="{Binding ActualHeight, ElementName=PART_ScrollContentPresenter, Converter={StaticResource A_Converter_NameSelectScrollbarSize}}"
                                   Maximum="{TemplateBinding ScrollViewer.ScrollableHeight}"
                                   ViewportSize="{TemplateBinding ScrollViewer.ViewportHeight}"
                                   Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                   Visibility="{TemplateBinding ScrollViewer.ComputedVerticalScrollBarVisibility}"
                                   Style="{StaticResource A_Style_ScrollBar_TextMenu}" />
                    </Canvas>

                    <ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
                                            Content="{TemplateBinding Content}"
                                            CanContentScroll="{TemplateBinding ScrollViewer.CanContentScroll}"
                                            ClipToBounds="True" />
                </Grid>
            </ControlTemplate>

            <Style x:Key="A_Style_ListBox_MultiColumnList"
                   TargetType="{x:Type local:CommonListBox}">
                <Setter Property="local:FZScrollViewer.IsAtTop"
                        Value="True" />
                <Setter Property="local:FZScrollViewer.IsAtBottom"
                        Value="False" />
                <Setter Property="local:BindingProxy.A"
                        Value="{x:Static ScrollBarVisibility.Disabled}" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type local:CommonListBox}">
                            <Grid>
                                <local:FZScrollViewer Template="{StaticResource A_ControlTemplate_ScrollViewer_NameSelect}"
                                                      CanContentScroll="True"
                                                      HorizontalScrollBarVisibility="Disabled"
                                                      VerticalScrollBarVisibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:BindingProxy.A)}"
                                                      local:FZScrollViewer.IsAtTop="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:FZScrollViewer.IsAtTop), Mode=OneWayToSource}"
                                                      local:FZScrollViewer.IsAtBottom="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:FZScrollViewer.IsAtBottom), Mode=OneWayToSource}"
                                                      Focusable="False"
                                                      KeepSelectionOnScreen="True">
                                    <local:FZVirtualizingTilePanel Orientation="Vertical"
                                                                   IsItemsHost="True"
                                                                   ChildWidth="{StaticResource A_Double_NameItem_WidthWithMargin}"
                                                                   ChildHeight="{StaticResource A_Double_NameItem_HeightWithMargin}"
                                                                   ScrollAnimationDuration="0:0:0.0" />
                                </local:FZScrollViewer>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Storyboard x:Key="A_Storyboard_FadeOut">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Fader">
                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />
                    <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </ResourceDictionary>
    </Page.Resources>

    <Grid>
       <Control Style="{StaticResource A_Style_Control_ScreenBackground}" />
        <local:PlayerBarControl x:Name="TopBar"
                            Style="{StaticResource A_Style_PlayerBarControl}"
                                Visibility="{Binding IsInPauseFlow, RelativeSource={RelativeSource FindAncestor, AncestorType=Page}, Converter={StaticResource A_FZBooleanToVisibilityConverter}}"/>
        <ContentControl x:Name="BottomBar" Style="{StaticResource A_Style_ButtonBar}">
            <local:ControllerButtonPanel x:Name="HelpPanel" Style="{StaticResource A_Style_ControllerButtonPanel_Default}">
                <local:ControllerButtonControl Button="B" Description="{local:Loc HelpButtons.IDS_Back}" Visibility="{Binding IsBackAllowed, Converter={StaticResource A_FZBooleanToVisibilityConverter}}"/>
            </local:ControllerButtonPanel>
        </ContentControl>
        <Border Style="{StaticResource A_Style_Border_ScenePadding}"
                SnapsToDevicePixels="True"
                UseLayoutRounding="True">
            <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
                <Decorator Style="{StaticResource A_Style_FrameworkElement_DefaultTransition}"
                           local:UIPageTransitionManager.TransitionIndex="0">
                    <ContentControl Content="{local:Loc ScreenTitles.IDS_PlayerNameSelect}"
                                    Style="{StaticResource A_Style_ContentControl_ScreenTitleBlock}"
                                    HorizontalAlignment="Left"
                                    local:BindingProxy.A="/ForzaUI;component/Textures/Anthem/Icons/Titles/CharacterCustomisation.png" />
                </Decorator>
                <Decorator Style="{StaticResource A_Style_FrameworkElement_DefaultTransition}"
                           local:UIPageTransitionManager.TransitionIndex="1"
                           Focusable="False"
                           HorizontalAlignment="Left"
                           VerticalAlignment="Bottom">
                    <local:ItemsSelector x:Name="PART_Categories"
                                         MaxWidth="830"
                                         ItemsSource="{Binding PlayerNameCategories}"
                                         Style="{StaticResource A_Style_ItemsSelector_TabTitle}"
                                         SelectedIndex="0"
                                         Focusable="False" />
                </Decorator>
                <Decorator Style="{StaticResource A_Style_FrameworkElement_DefaultTransition}"
                           local:UIPageTransitionManager.TransitionIndex="2"
                           HorizontalAlignment="Left">
                    <Grid>
                        <UniformGrid VerticalAlignment="Bottom"
                                     Height="{StaticResource A_Double_NameItem_HeightWithMargin}"
                                     Width="1698"
                                     Rows="1"
                                     Columns="6"
                                     Margin="1.5,0,0,0">
                            <Control Style="{StaticResource A_Style_Control_NameSelect_EmptyItemStyle}"/>
                            <Control Style="{StaticResource A_Style_Control_NameSelect_EmptyItemStyle}"/>
                            <Control Style="{StaticResource A_Style_Control_NameSelect_EmptyItemStyle}"/>
                            <Control Style="{StaticResource A_Style_Control_NameSelect_EmptyItemStyle}"/>
                            <Control Style="{StaticResource A_Style_Control_NameSelect_EmptyItemStyle}"/>
                            <Control Style="{StaticResource A_Style_Control_NameSelect_EmptyItemStyle}"/>
                        </UniformGrid>
                        <local:CommonListBox x:Name="PART_List"
                                             KeyboardNavigation.DirectionalNavigation="Contained"
                                             FocusManager.IsFocusScope="True"
                                             ItemsSource="{Binding SelectedItem.Items, ElementName=PART_Categories}"
                                             Style="{StaticResource A_Style_ListBox_MultiColumnList}"
                                             ItemContainerStyle="{StaticResource A_Style_ListBoxItem_TextMenu_PlayerNames}"
                                             ItemTemplate="{StaticResource A_DataTemplate_NameItem}"
                                             Width="1698"
                                             Height="689"
                                             local:BindingProxy.A="{x:Static ScrollBarVisibility.Visible}"/>
                    </Grid>
                </Decorator>
            </StackPanel>
        </Border>

        <local:FZMaterial x:Name="Fader" Color="Black" Opacity="0" IsHitTestVisible="False" />
    </Grid>
</Page>
