<Page 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"
      xmlns:local="clr-namespace:ForzaUI"
      mc:Ignorable="d"
      x:Class="ForzaUI.Scenes.Anthem.A_ChapterSelect"
      Style="{StaticResource A_Style_Page_Generic}"
      FlowDirection="LeftToRight"
      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_ChapterSelectionWidth">552</System:Double>
            <System:Double x:Key="A_Double_ChapterSelectionGoalTileWidth">180</System:Double>

            <Style x:Key="A_Style_FZMaterial_HighlightShadowOnFocus" TargetType="local:FZMaterial" BasedOn="{StaticResource A_Style_FZMaterial_HighlightShadow}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsFocused, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}" Value="True">
                        <Setter Property="CaptureSubgraph" Value="True"/>
                    </DataTrigger>
                </Style.Triggers>
                <Setter Property="CaptureSubgraph"
                        Value="False" />
            </Style>

            <Style x:Key="A_Style_FZRun_NUM" TargetType="{x:Type local:FZRun}">
                <Setter Property="FontFamily" Value="Horizon_A" />
             </Style>
             
            <Style x:Key="A_Style_FZMaterial_StarIcon" TargetType="local:FZMaterial">
                <Setter Property="Width" Value="32"/>
                <Setter Property="Height" Value="32"/>
            </Style>

            <Style x:Key="A_Style_FZMaterial_HeaderStarIcon" TargetType="local:FZMaterial">
                <Setter Property="Width" Value="54"/>
                <Setter Property="Height" Value="51"/>
            </Style>
                
            <Style x:Key="A_Style_FZMaterial_InactiveStar" TargetType="local:FZMaterial" BasedOn="{StaticResource A_Style_FZMaterial_StarIcon}">
                <Setter Property="ImageSource" Value="/ForzaUI;component/Textures/Data_Bound/Anthem/HorizonStories/GreyStar.png"/>
            </Style>
            
            <Style x:Key="A_Style_FZMaterial_ActiveStar" TargetType="local:FZMaterial" BasedOn="{StaticResource A_Style_FZMaterial_StarIcon}">
                <Setter Property="ImageSource" Value="/ForzaUI;component/Textures/Data_Bound/Anthem/HorizonStories/Star.png"/>
            </Style>
            
            <Style x:Key="A_Style_FZMaterial_HeaderInactiveStar" TargetType="local:FZMaterial" BasedOn="{StaticResource A_Style_FZMaterial_HeaderStarIcon}">
                <Setter Property="ImageSource" Value="/ForzaUI;component/Textures/Data_Bound/Anthem/HorizonStories/GreyHeaderStar.png"/>
            </Style>
            
            <Style x:Key="A_Style_FZMaterial_HeaderActiveStar" TargetType="local:FZMaterial" BasedOn="{StaticResource A_Style_FZMaterial_HeaderStarIcon}">
                <Setter Property="ImageSource" Value="/ForzaUI;component/Textures/Data_Bound/Anthem/HorizonStories/HeaderStar.png"/>
            </Style>
                        
            <!-- ControlTemplate for the star counter used in list-->
            <ControlTemplate x:Key="A_ControlTemplate_StarDisplay" >
                <Grid HorizontalAlignment="Right" >
                    <local:FZMaterial DockPanel.Dock="Left" x:Name="FZMaterial_Streak" HorizontalAlignment="Left" Style="{StaticResource A_Style_FZMaterial_HighlightShadowOnFocus}" Margin="0,0,-10,0" Height="48">
                        <StackPanel x:Name="StarContainer" Orientation="Horizontal" Margin="0,0,10,0">
                            <local:FZMaterial x:Name="Star1" Style="{StaticResource A_Style_FZMaterial_ActiveStar}" Visibility="Visible" />
                            <local:FZMaterial x:Name="Star2" Style="{StaticResource A_Style_FZMaterial_ActiveStar}" Visibility="Visible" />
                            <local:FZMaterial x:Name="Star3" Style="{StaticResource A_Style_FZMaterial_ActiveStar}" Visibility="Visible" />
                        </StackPanel>    
                     </local:FZMaterial>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                     <local:FZMaterial x:Name="Star1Off" Style="{StaticResource A_Style_FZMaterial_InactiveStar}" Visibility="Collapsed" />
                     <local:FZMaterial x:Name="Star2Off" Style="{StaticResource A_Style_FZMaterial_InactiveStar}" Visibility="Collapsed" />
                     <local:FZMaterial x:Name="Star3Off" Style="{StaticResource A_Style_FZMaterial_InactiveStar}" Visibility="Collapsed" />
                        </StackPanel>
                </Grid>
                <ControlTemplate.Triggers>
                    <DataTrigger Binding="{Binding StarCount}" Value="0">
                        <Setter TargetName="Star1" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="Star2" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="Star3" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="Star1Off" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="Star2Off" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="Star3Off" Property="Visibility" Value="Visible"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding StarCount}" Value="1">
                        <Setter TargetName="Star1" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="Star2" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="Star3" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="Star1Off" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="Star2Off" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="Star3Off" Property="Visibility" Value="Collapsed"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding StarCount}" Value="2">
                        <Setter TargetName="Star1" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="Star2" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="Star3" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="Star1Off" Property="Visibility" Value="Collapsed"/>
                        <Setter TargetName="Star2Off" Property="Visibility" Value="Collapsed"/>
                        <Setter TargetName="Star3Off" Property="Visibility" Value="Visible"/>
                    </DataTrigger>
                </ControlTemplate.Triggers>
            
        </ControlTemplate>
            <Style x:Key="A_Style_ControlTemplate_StarDisplay" TargetType="{x:Type Control}">
                <Setter Property="Template" Value="{StaticResource A_ControlTemplate_StarDisplay}"/>
            </Style>

            <!--Control for a star used in the header-->
            <ControlTemplate x:Key="A_ControlTemplate_StarHeader">
                <Grid>
                    <local:FZMaterial x:Name="StarImageOff" Style="{StaticResource A_Style_FZMaterial_HeaderInactiveStar}"/>
                    <local:FZMaterial x:Name="StarImageOn" Visibility="Collapsed"
                                      Style="{StaticResource A_Style_FZMaterial_HeaderActiveStar}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <DataTrigger Binding="{Binding Tag, RelativeSource={RelativeSource Self}}" Value="True">
                        <Setter TargetName="StarImageOn" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="StarImageOff" Property="Visibility" Value="Collapsed"/>
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
            <Style x:Key="A_Style_StarHeader" TargetType="{x:Type Control}" >
                <Setter Property="Template" Value="{StaticResource A_ControlTemplate_StarHeader}"/>
                <Setter Property="Tag" Value="0"/>
            </Style>

            <!--Slightly Different Control for the star bar used in the header-->
            <ControlTemplate x:Key="A_ControlTemplate_StarDisplay_Header" >
                <StackPanel x:Name="StarContainerHeader" Orientation="Horizontal" HorizontalAlignment="Center">
                    <Control x:Name="Star1" Style="{StaticResource A_Style_StarHeader}" Visibility="Collapsed" Tag="False"/>
                    <Control x:Name="Star2" Style="{StaticResource A_Style_StarHeader}" Visibility="Collapsed" Tag="False"/>
                    <Control x:Name="Star3" Style="{StaticResource A_Style_StarHeader}" Visibility="Collapsed" Tag="False"/>
                </StackPanel>
                <ControlTemplate.Triggers>
                    <DataTrigger Binding="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}" Value="1">
                        <Setter TargetName="Star1" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="Star2" Property="Visibility" Value="Collapsed"/>
                        <Setter TargetName="Star3" Property="Visibility" Value="Collapsed"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}" Value="2">
                        <Setter TargetName="Star1" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="Star2" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="Star3" Property="Visibility" Value="Collapsed"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}" Value="3">
                        <Setter TargetName="Star1" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="Star2" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="Star3" Property="Visibility" Value="Visible"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding (local:BindingProxy.A), RelativeSource={RelativeSource Self}}" Value="True">
                        <Setter TargetName="Star1" Property="Tag" Value="True"/>
                        <Setter TargetName="Star2" Property="Tag" Value="True"/>
                        <Setter TargetName="Star3" Property="Tag" Value="True"/>
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
            <Style x:Key="A_Style_ControlTemplate_StarDisplay_Header" TargetType="{x:Type Control}">
                <Setter Property="Template" Value="{StaticResource A_ControlTemplate_StarDisplay_Header}"/>
            </Style>

            <DataTemplate x:Key="A_DataTemplate_ListBoxItem_ChapterList">
                <Grid VerticalAlignment="Center" HorizontalAlignment="Left" Height="48" Width="{StaticResource A_Double_ChapterSelectionWidth}">
                    <local:FZMaterial x:Name="TextShadow" Style="{StaticResource A_Style_FZMaterial_HighlightShadowOnFocus}">
                        <local:FZTextBlock HorizontalAlignment="Left" Margin="18,0"
                                           Text="{Binding ChapterName}" Style="{StaticResource A_Style_FZTextBlock_OptionText}"/>
                    </local:FZMaterial>
                    <local:FZMaterial Width="116" HorizontalAlignment="Right" Color="#10000000" Style="{StaticResource A_Style_FZMaterial_FlatPanel_TileRight}">
                        <Control VerticalAlignment="Center" HorizontalAlignment="Center"
                                        Style="{StaticResource A_Style_ControlTemplate_StarDisplay}" />
                    </local:FZMaterial>
                </Grid>
            </DataTemplate>

            <Style x:Key="A_Style_ListBox_TextMenu_Chapter"
                   TargetType="{x:Type local:CommonListBox}" BasedOn="{StaticResource A_Style_ListBox_TextMenu_Default}">
                <Style.Resources>
                    <Style x:Key="A_Style_FZMaterial_HighlightShadow_Dynamic" TargetType="{x:Type local:FZMaterial}" BasedOn="{StaticResource A_Style_FZMaterial_HighlightShadow}">
                        <Setter Property="CaptureSubgraph" Value="False"/>
                    </Style>
                </Style.Resources>
            </Style>

            <ControlTemplate x:Key="A_ControlTemplate_StarConditions">
                <StackPanel Orientation="Vertical" Width="auto">
                    <local:FZMaterial Height="70" Style="{StaticResource A_Style_FZMaterial_GlassPanel_HeaderPanel}">
                        <Control VerticalAlignment="Center" HorizontalAlignment="Center"
                                        x:Name="StarHeaderDisplay"
                                        Style="{StaticResource A_Style_ControlTemplate_StarDisplay_Header}"
                                        Tag="{Binding Tag}"
                                        local:BindingProxy.A="False"/>
                    </local:FZMaterial>

                    <local:FZMaterial x:Name="MedalPanelIncomplete" Height="70" Width="auto" Color="#FF716D6A" Style="{StaticResource A_Style_FZMaterial_FlatPanel_FooterPanel}">
                        <local:FZTextBlock Style="{StaticResource A_Style_FZTextBlock_HorizonB}"
                                           HorizontalAlignment="Center"
                                           VerticalAlignment="Center"
                                           Margin="12" CapHeight="20"
                                           Color="{StaticResource A_Color_White}"
                                           local:TextBlockInlineMarkup.Markup="{Binding Content, Converter={StaticResource A_StringToUpper} , RelativeSource={RelativeSource TemplatedParent}}"
                                           local:TextBlockInlineMarkup.ResourceBaseName="A_Style_FZRun_"/>
                    </local:FZMaterial>
                    <local:FZMaterial x:Name="MedalPanelAchieved" Visibility="Collapsed" ImageSource="/ForzaUI;component/Textures/Data_Bound/Anthem/HorizonStories/GoldPanel.png"
                                      Height="70" Width="auto" Color="#FFEED486" Style="{StaticResource A_Style_FZMaterial_FlatPanel_FooterPanel}">
                        <local:FZTextBlock x:Name="HighlightedTextName"
                                           Style="{StaticResource A_Style_FZTextBlock_HorizonB}"
                                           HorizontalAlignment="Center"
                                           VerticalAlignment="Center"
                                           Margin="20,24" CapHeight="20"
                                           Color="{StaticResource A_Color_White}"
                                           local:TextBlockInlineMarkup.Markup="{Binding Content, Converter={StaticResource A_StringToUpper} , RelativeSource={RelativeSource TemplatedParent}}"
                                           local:TextBlockInlineMarkup.ResourceBaseName="A_Style_FZRun_"/>
                    </local:FZMaterial>
                </StackPanel>
                <!--Triggers use a compare converter to evaluate if the achieved stars are greater than or equal to requirement to activate the medal panel-->
                <ControlTemplate.Triggers>
                    <DataTrigger Binding="{Binding (local:BindingProxy.A), RelativeSource={RelativeSource Self}}" Value="1">
                        <Setter TargetName="StarHeaderDisplay" Property="local:BindingProxy.A" Value="True"/>
                        <Setter TargetName="MedalPanelIncomplete" Property="Visibility" Value="Collapsed"/>
                        <Setter TargetName="MedalPanelAchieved" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="HighlightedTextName" Property="Color" Value="#85000000"/>
                    </DataTrigger>

                    <DataTrigger Binding="{Binding (local:BindingProxy.A), RelativeSource={RelativeSource Self}}" Value="0">
                        <Setter TargetName="StarHeaderDisplay" Property="local:BindingProxy.A" Value="True"/>
                        <Setter TargetName="MedalPanelIncomplete" Property="Visibility" Value="Collapsed"/>
                        <Setter TargetName="MedalPanelAchieved" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="HighlightedTextName" Property="Color" Value="#85000000"/>
                    </DataTrigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </ResourceDictionary>
    </Page.Resources>

    <Grid>
        <ContentControl x:Name="BottomBar" Style="{StaticResource A_Style_ButtonBar}">
            <ContentControl x:Name="DefaultHelpPanel"
                            local:ControllerButtonPanel.ADescription="{local:Loc HelpButtons.IDS_Select}"
                            local:ControllerButtonPanel.BDescription="{local:Loc HelpButtons.IDS_Back}"
                            local:ControllerButtonPanel.XDescription="{local:Loc HelpButtons.IDS_ViewLeaderboard}"
                            Style="{StaticResource A_Style_ContentControl_DefaultButtonBar}" />
        </ContentControl>

        <Border Style="{StaticResource A_Style_Border_ScenePadding}">
            <Grid Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_0}" 
                  Height="Auto" Margin="-6,114,0,108"
                  Width="{StaticResource A_Double_ChapterSelectionWidth}" 
                  HorizontalAlignment="Left">
                
                <StackPanel Width="{StaticResource A_Double_ChapterSelectionWidth}" VerticalAlignment="Top">
                    <!--Header-->
                    <ContentControl Content="{Binding StoryName, Converter={StaticResource A_StringToUpper}}"
                                    HorizontalAlignment="Left"
                                    local:BindingProxy.A="{Binding StoryIcon}"
                                    Style="{StaticResource A_Style_ContentControl_ScreenTitleBlock}" />
                    <!--List Content. Note change height to max height if you want to remove invisible panels-->
                    <local:CommonListBox ItemTemplate="{StaticResource A_DataTemplate_ListBoxItem_ChapterList}"
                                                        ItemsSource="{Binding Chapters}"
                                                        SelectedItem="{Binding SelectedItem}"
                                                        Style="{StaticResource A_Style_ListBox_TextMenu_Chapter}"
                                                        x:Name="ChapterList" Height="306"
                                                        local:FocusOnPageFocusGained.SelectorSelectedItem="True"/>
                </StackPanel>
                <!--Description Panels-->
                <DockPanel LastChildFill="True" MaxWidth="{StaticResource A_Double_ChapterSelectionWidth}" VerticalAlignment="Bottom">
                    <local:FZMaterial DockPanel.Dock="Top" Height="48" Style="{StaticResource A_Style_FZMaterial_FlatPanel_HeaderPanel}">
                        <Grid>
                            <local:FZTextBlock Text="{Binding ChapterName}"
                                                Style="{StaticResource A_Style_FZTextBlock_SubHeading}"
                                                FontSize="22"
                                                HorizontalAlignment="Left" VerticalAlignment="Center"
                                                Margin="18,0,0,0" Color="{StaticResource A_Color_White}"
                                                DataContext="{Binding SelectedItem, ElementName=ChapterList}"/>
                        </Grid>
                    </local:FZMaterial>
                    <local:FZMaterial DockPanel.Dock="Top" Height="113" Width="auto" Style="{StaticResource A_Style_FZMaterial_GlassPanel_BodyPanel}">
                        <local:FZTextBlock Style="{StaticResource A_Style_FZTextBlock_OptionText}" DataContext="{Binding SelectedItem, ElementName=ChapterList}"
                                            HorizontalAlignment="Left" VerticalAlignment="Top"
                                            Margin="18,18"
                                            CapHeight="15"
                                            TextWrapping="Wrap"
                                            Color="{StaticResource A_Color_White}"
                                            Text="{Binding ChapterDescription}"/>
                    </local:FZMaterial>
                    <ContentControl DockPanel.Dock="Left" Margin="0,6" Width="{StaticResource A_Double_ChapterSelectionGoalTileWidth}"
                                    Tag="1"
                                    Template="{StaticResource A_ControlTemplate_StarConditions}"
                                    DataContext="{Binding SelectedItem, ElementName=ChapterList}"
                                    Content="{Binding AchievementTarget1}"
                                    local:BindingProxy.A="{Binding StarCount, Converter={StaticResource A_CompareConverter}, ConverterParameter=1}" />
                    <ContentControl Margin="6,6" Width="{StaticResource A_Double_ChapterSelectionGoalTileWidth}"
                                    Tag="2"
                                    Template="{StaticResource A_ControlTemplate_StarConditions}"
                                    DataContext="{Binding SelectedItem, ElementName=ChapterList}"
                                    Content="{Binding AchievementTarget2}"
                                    local:BindingProxy.A="{Binding StarCount, Converter={StaticResource A_CompareConverter}, ConverterParameter=2}"/>
                    <ContentControl DockPanel.Dock="Right" Margin="0,6" Width="{StaticResource A_Double_ChapterSelectionGoalTileWidth}"
                                    Tag="3"
                                    Template="{StaticResource A_ControlTemplate_StarConditions}"
                                    DataContext="{Binding SelectedItem, ElementName=ChapterList}"
                                    Content="{Binding AchievementTarget3}"
                                    local:BindingProxy.A="{Binding StarCount, Converter={StaticResource A_CompareConverter}, ConverterParameter=3}" />
                </DockPanel>
            </Grid>
        </Border>
    </Grid>
</Page>