<PlayerNameSelect 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}}"
      ForzaScene.SelectCommand="{Binding SelectedItem.SelectCommand, ElementName=PART_List}">
    <local:UIPageTransitionManager.TransitionManager>
        <local:UIPageTransitionManager Preset="{StaticResource A_UIPageTransitionManagerPreset_Menu}"/>
    </local:UIPageTransitionManager.TransitionManager>

    <Page.Resources>
        <ResourceDictionary>

            <System:Double x:Key="A_Double_NameItem_Height">68</System:Double>
            <System:Double x:Key="A_Double_NameItem_Width">284</System:Double>
            <System:Double x:Key="A_Double_NameItem_HeightWithMargin">72 </System:Double>
            <System:Double x:Key="A_Double_NameItem_WidthWithMargin">288</System:Double>
            
            <System:Double x:Key="A_Double_Checkbox_Height">36</System:Double>
            <System:Double x:Key="A_Double_Checkbox_Width">36</System:Double>
            <System:Double x:Key="A_Double_Checkbox_HeightWithOutline">40</System:Double>
            <System:Double x:Key="A_Double_Checkbox_WidthWithOutline">40</System:Double>

            <System:Double x:Key="A_Double_CurrentName_Width">572</System:Double>

            <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_FZMaterial_NameItemIsCurrent"
                TargetType="{x:Type local:FZMaterial}"
                BasedOn="{StaticResource A_Style_FZMaterial_FlatPanel_Tile}">
                <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>

           <Style x:Key="A_Style_FZTextBlock_DisplayCurrent"
                TargetType="{x:Type local:FZTextBlock}"
                BasedOn="{StaticResource A_Style_FZTextBlock_GridMenuItemText}">
                <Setter Property="Color" Value="{StaticResource H_Color_Primary_Black}" />
                <Setter Property="CapHeight" Value="18 " />
                <Setter Property="FontFamily" Value="Horizon_C" />
            </Style>

            <Style x:Key="A_Style_FZMaterial_CurrentName" TargetType="{x:Type FZMaterial}"
                   BasedOn="{StaticResource A_Style_FrameworkElement_DefaultTransition_0}">
                <Setter Property="Width" Value="{StaticResource A_Double_CurrentName_Width}" />
                <Setter Property="Height" Value="68" />
                <Setter Property="Margin" Value="0,2,0,0"/>      
                <Setter Property="Color" Value="{StaticResource H_Color_Primary_Green}" />
                <Setter Property="HorizontalAlignment" Value="Left" />
                <Setter Property="Preset" Value="{StaticResource H_Roundtangle_Outer_2px}" />
            </Style>

            <Style x:Key="A_Style_FZMaterial_Checkbox" TargetType="{x:Type FZMaterial}">
                <Setter Property="Width" Value="{StaticResource A_Double_Checkbox_Width}" />
                <Setter Property="Height" Value="{StaticResource A_Double_Checkbox_Height}" />
                <Setter Property="Color" Value="{StaticResource H_Color_Primary_Green}" />
                <Setter Property="Preset" Value="{StaticResource H_Roundtangle_8px}" />
            </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}" Style="{StaticResource A_Style_FZTextBlock_GridMenuItemText}"/>
                    <Grid x:Name="CheckBox"
                          Width="{StaticResource A_Double_Checkbox_WidthWithOutline}" 
                          Height="{StaticResource A_Double_Checkbox_HeightWithOutline}"
                          HorizontalAlignment="Right"
                          Margin="0,0,16,0"
                          Visibility="{Binding IsCurrent, Converter={StaticResource A_FZBooleanToVisibilityConverter}}">
                         <FZMaterial Style="{StaticResource A_Style_FZMaterial_Checkbox}">
                                <local:FZMaterial ImageSource="\Textures\Data_Bound\Checkbox\Checkbox_On.png" 
                                                Color="{StaticResource H_Color_Primary_Black}"/>
                        </FZMaterial> 
                    </Grid>
                </Grid>
            </DataTemplate>

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

            <!-- 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="PART_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>
        <local:PageInputHandler Command="{Binding SelectCommand}" Button="A"/>
        <Control Style="{StaticResource A_Style_Control_ScreenBackground}"
                 local:BindingProxy.A="{x:Static UIScreenBackgroundStyle.GlassOnly}"/>
        <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="PART_HelpPanel" Style="{StaticResource A_Style_ControllerButtonPanel_Default}">
                <local:ControllerButtonControl Button="A" Description="{local:Loc HelpButtons.IDS_Select}" />
                <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">
            <DockPanel Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_0}" HorizontalAlignment="Center" VerticalAlignment="Center">
                <FZMaterial Style="{StaticResource H_Style_Container_ScreenTitle}"
                            HorizontalAlignment="Left"
                            Margin="0,0,0,10"
                            MinWidth="364"
                            DockPanel.Dock="Top">
                    <FZTextBlock Style="{StaticResource H_Style_Text_ScreenTitle}"
                                 Text="{Loc ScreenTitles.IDS_PlayerNameSelect}"
                                 Margin="14,0,0,0"
                                 ScreenReader.Line="{Loc ScreenTitles.IDS_PlayerNameSelect}"
                                 ScreenReader.LineType="ScreenTitle"
                                 ScreenReader.Event="OnLoad"/>
                </FZMaterial>
                <Decorator Focusable="False"
                           HorizontalAlignment="Left"
                           VerticalAlignment="Bottom"
                           DockPanel.Dock="Top">
                    <FZTabButtonsSelector
                        x:Name="PART_Categories"
                        ItemsSource="{Binding PlayerNameCategories}"
                        Style="{StaticResource H_Style_TabBar}"
                        SelectedIndex="0" 
                        Margin="0,0,0,10"
                        HorizontalAlignment="Left"
                        HorizontalContentAlignment="Left"/>
                </Decorator>
                <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_CurrentName}"
                    DockPanel.Dock="Bottom"> 
                    <StackPanel Orientation="Horizontal">
                        <local:FZTextBlock Text="{local:Loc MyProfile.IDS_NameSelect_Current}" Style="{StaticResource A_Style_FZTextBlock_DisplayCurrent}" FontFamily="Horizon_D" HorizontalAlignment ="Left" Margin="10,0,0,0"/>
                        <local:FZTextBlock Text="{Binding CurrentName}" Style="{StaticResource A_Style_FZTextBlock_DisplayCurrent}" HorizontalAlignment ="Right" Margin="3,0,0,0"/>
                    </StackPanel>
                </local:FZMaterial>
                <Decorator Style="{StaticResource A_Style_FrameworkElement_DefaultTransition}"
                           local:UIPageTransitionManager.TransitionIndex="2"
                           HorizontalAlignment="Left">
                    <Grid>
                        <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="1728"
                                             Height="648"
                                             local:BindingProxy.A="{x:Static ScrollBarVisibility.Visible}"
                                             Margin="-2,0,0,0"/>
                    </Grid>
                </Decorator>
            </DockPanel>
        </Border>

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