<Page x:Class="ForzaUI.Scenes.Anthem.A_PopupJumpToGroup"
      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"
      xmlns:System="clr-namespace:System;assembly=mscorlib"
      mc:Ignorable="d"
      xmlns:local="clr-namespace:ForzaUI"
      Style="{StaticResource A_Style_Page_Generic}"
      DataContext="{Binding RelativeSource={RelativeSource Self}}">
    <local:UIPageTransitionManager.TransitionManager>
        <local:UIPageTransitionManager Preset="{StaticResource A_UIPageTransitionManagerPreset_Popup}" />
    </local:UIPageTransitionManager.TransitionManager>
    <Page.Resources>

        <DataTemplate x:Key="H_DataTemplate_ListItem_Thumbnail">
            <Grid Margin="14">
                <DockPanel>
                    <FZTextBlock DockPanel.Dock="Top"
                                 Color="{StaticResource H_Color_Primary_Black}"
                                 CapHeight="16"
                                 VerticalAlignment="Center"
                                 FontFamily="Horizon_A"
                                 Text="{Binding Name}" />
                    <FZTextBlock DockPanel.Dock="Bottom"
                                 Color="{StaticResource H_Color_Primary_Black}"
                                 FontFamily="Horizon_B"
                                 CapHeight="16"
                                 VerticalAlignment="Center"
                                 Text="{Binding Id}" />
                    <Decorator />
                </DockPanel>
            </Grid>
        </DataTemplate>

        <Style x:Key="H_Style_ThumbnailSeparator"
               TargetType="ContentControl">
            <Setter Property="Height"
                    Value="20" />
            <Setter Property="Width"
                    Value="1500" />
            <Setter Property="Margin"
                    Value="0,0,4,4" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{Type ContentControl}">
                        <DockPanel Margin="40,0"
                                   VerticalAlignment="Center">
                            <FZMaterial Height="2"
                                        VerticalAlignment="Center"
                                        Color="#fff"
                                        Opacity="0.4"
                                        Width="280"
                                        DockPanel.Dock="Left" />
                            <FZTextBlock FontFamily="Horizon_A"
                                         Stretch="None"
                                         CapHeight="14"
                                         Color="{StaticResource H_Color_Primary_White}"
                                         DataContext="{TemplateBinding Content}"
                                         Text="{Binding Make}"
                                         DockPanel.Dock="Left"
                                         Margin="10,0"
                                         Opacity="0.8"
                                         VerticalAlignment="Center" />
                            <FZMaterial Height="2"
                                        VerticalAlignment="Center"
                                        Color="#fff"
                                        Opacity="0.4" />
                        </DockPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <ControlTemplate x:Key="H_ControlTemplate_Carousel"
                         TargetType="{Type WrapListBox}">
            <Grid Margin="-60">
                <Grid ClipToBounds="True">
                    <Decorator Margin="40"
                               ClipToBounds="True">
                        <Grid Margin="20"
                              ClipToBounds="True"
                              x:Name="ScrollClipper">
                            <VirtualizingWrapPanel IsItemsHost="True"
                                                   KeyboardNavigation.DirectionalNavigation="Contained"
                                                   OverrideAcrossNavigation="{TemplateBinding OverrideAcrossNavigation}"
                                                   ScrollOrientation="{TemplateBinding ScrollOrientation}"
                                                   Margin="0"
                                                   Style="{StaticResource H_VirtualizingWrapPanel_Default}"
                                                   ItemWidth="{TemplateBinding ItemWidth}"
                                                   ItemHeight="{TemplateBinding ItemHeight}"
                                                   EmptyItemStyle="{TemplateBinding EmptyItemStyle}"
                                                   SeparatorPlacement="{TemplateBinding SeparatorPlacement}"
                                                   SeparatorItemStyle="{TemplateBinding SeparatorItemStyle}"
                                                   BlendValue.ShouldSkipInitialInputChange="True"
                                                   BlendValue.BlendFromPreviousOutput="True"
                                                   SelectionLimitTop="{TemplateBinding SelectionLimitTop}"
                                                   SelectionLimitBottom="{TemplateBinding SelectionLimitBottom}"
                                                   ScrollWindowMin="{Binding ScrollWindowMin, Mode=OneWayToSource, RelativeSource={RelativeSource TemplatedParent}}"
                                                   ScrollWindowMax="{Binding ScrollWindowMax, Mode=OneWayToSource, RelativeSource={RelativeSource TemplatedParent}}"
                                                   ScrollWindowSize="{Binding ScrollWindowSize, Mode=OneWayToSource, RelativeSource={RelativeSource TemplatedParent}}"
                                                   ScrollWindowValue="{Binding ScrollWindowValue, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                                   x:Name="VirtualizingWrapPanel" />
                        </Grid>
                    </Decorator>
                </Grid>
            </Grid>
        </ControlTemplate>

        <Style
                x:Key="H_Style_ContentControl_Carousel_ContainerStyle"
                TargetType="ContentControl"
                BasedOn="{StaticResource H_Style_ContentControl_Carousel_ContainerStyle}">
            <Setter
                Property="Margin"
                Value="0,0,4,4" />
        </Style>
    </Page.Resources>
    <Grid>
        <local:FZMaterialGlassCapture />
        <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_Popup_Background}" />


        <PageInputHandler x:Name="a_button" Button="A"
                          Command="{Binding SelectCommand}"/>
        <PageInputHandler x:Name="rb_button" Button="RBumper"
                          Command="{Binding (VirtualizingWrapPanel.VWPPageDownCommand), ElementName=Menu}"/>
        <PageInputHandler x:Name="lb_button" Button="LBumper"
                          Command="{Binding (VirtualizingWrapPanel.VWPPageUpCommand), ElementName=Menu}"/>

        <!-- Bars -->
        <ContentControl x:Name="BottomBar"
                        Style="{StaticResource A_Style_ButtonBar}">
            <ControllerButtonPanel
                x:Name="PART_HelpPanel"
                Style="{StaticResource A_Style_ControllerButtonPanel_Default}">
                <ControllerButtonControl
                    Button="A"
                    Description="Select"
                    Visibility="{Binding SelectCommand.Enabled, FallbackValue=Collapsed, Converter={FZBooleanToVisibilityConverter}}" />
                <ControllerButtonControl
                    Button="B"
                    Description="Exit"
                    Visibility="{Binding BackCommand, FallbackValue=Collapsed, Converter={FZBooleanToVisibilityConverter}}" />     
                <ControllerButtonControl
                    Button="{Binding Button, ElementName=lb_button}"
                    Description="Next Group"
                    Visibility="{Binding Command, FallbackValue=Collapsed, Converter={FZBooleanToVisibilityConverter}, ElementName=lb_button}" />   
                <ControllerButtonControl
                    Button="{Binding Button, ElementName=rb_button}"
                    Description="Prev Group"
                    Visibility="{Binding Command, FallbackValue=Collapsed, Converter={FZBooleanToVisibilityConverter}, ElementName=rb_button}" />                               
            </local:ControllerButtonPanel>
        </ContentControl>
        <Grid Style="{StaticResource A_Style_FrameworkElement_LayoutRoot}">
            <StackPanel x:Name="MainContent"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_0}">
                <ContentControl Style="{StaticResource A_Style_ContentControl_PopupTitleBlock}"
                                Content="SELECT"
                                Width="auto" />
                <Grid>
                    <local:WrapListBox x:Name="Menu"
                                       ItemsSource="{Binding ListCollectionView}"
                                       SeparatorPlacement="{XAMLVWPThumbnailSeparatorPlacement}"
                                       OverrideAcrossNavigation="True"
                                       Template="{StaticResource H_ControlTemplate_Carousel}"
                                       ItemContainerStyle="{StaticResource H_Style_ContentControl_Carousel_ContainerStyle}"
                                       ItemTemplate="{StaticResource H_DataTemplate_ListItem_Thumbnail}"
                                       SeparatorItemStyle="{StaticResource H_Style_ThumbnailSeparator}"
                                       SelectionLimitTop="20"
                                       SelectionLimitBottom="20"
                                       SelectedItem="{Binding SelectedItem}"
                                       Height="750"
                                       Width="1500"
                                       ItemWidth="300"
                                       ItemHeight="75"
                                       Margin="0,0,-4,-4"
                                       ScrollOrientation="Vertical"
                                       local:FocusOnPageFocusGained.SelectorSelectedItem="True" />
                    <ScrollBar Style="{StaticResource H_Style_ScrollBar}"
                               Margin="0,0,-20,0"
                               x:Name="scrollbar"
                               HorizontalAlignment="Right"
                               Minimum="{Binding ScrollWindowMin, ElementName=Menu}"
                               Maximum="{Binding ScrollWindowMax, ElementName=Menu}"
                               Value="{Binding ScrollWindowValue, ElementName=Menu, Mode=TwoWay}"
                               ViewportSize="{Binding ScrollWindowSize, ElementName=Menu}"
                               DockPanel.Dock="Right">
                        <DynamicData.Data>
                            <DynamicDataItem Name="ScrollBarHideWhenNotNeeded"
                                             DataType="Boolean"
                                             Value="True" />
                        </DynamicData.Data>
                    </ScrollBar>
                </Grid>
            </StackPanel>
        </Grid>
    </Grid>
</Page>
