<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:System="clr-namespace:System;assembly=mscorlib"
      xmlns:local="clr-namespace:ForzaUI;assembly="
      x:Class="ForzaUI.A_WhatsNext"
      x:Name="page"
      Style="{StaticResource A_Style_Page_Generic}"
      DataContext="{Binding RelativeSource={x:Static RelativeSource.Self}}">
    <Page.Resources>

        <Double x:Key="H_ItemWidth">442</Double>
        <Double x:Key="H_ItemHeight">708</Double>
        <Double x:Key="H_ItemGap">10</Double>

        <Double x:Key="H_ItemsH">4</Double>
        <Double x:Key="H_ItemsV">1</Double>


        <Style
            x:Key="H_Style_Material_ItemBacking"
            TargetType="FZMaterial">
            <Setter
                Property="Color"
                Value="#0000" />
            <Setter
                Property="Preset"
                Value="{Roundtangle CornerRadius=30}" />
        </Style>


        <Thickness x:Key="H_Thickness_ItemMarginScale">0.5,0.5,0.5,0.5</Thickness>
        <Style x:Key="H_ContainerStyle_WhatsNextItem"
            BasedOn="{StaticResource H_Style_ContentControl_Carousel_ContainerStyle}"
            TargetType="{x:Type ListBoxItem}">
            <Style.Resources>
                <CornerRadius x:Key="A_StrokeHighlight_ContentRadius">3</CornerRadius>
                <Thickness x:Key="A_StrokeHighlight_InnerThickness">6</Thickness>
                <Thickness x:Key="A_StrokeHighlight_OuterThickness">6</Thickness>
            </Style.Resources>
            <Setter Property="Margin" Value="{Convert {StaticResource H_ItemGap}, Converter={MathOperationConverter Operation=Multiply}, Parameter={StaticResource H_Thickness_ItemMarginScale}, TargetType={x:Type Thickness}}"/>
            <Setter Property="DynamicData.Data">
                <Setter.Value>
                    <DynamicDataSource>
                        <DynamicDataItem 
                            Name="ItemBackgroundStyle"
                            DataType="Style"
                            Value="{StaticResource H_Style_Material_ItemBacking}" />
                    </DynamicDataSource>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="H_ContainerStyle_WhatsNextItem_Empty"
            TargetType="{x:Type Control}">
            <Setter Property="Margin" Value="{Convert {StaticResource H_ItemGap}, Converter={MathOperationConverter Operation=Multiply}, Parameter={StaticResource H_Thickness_ItemMarginScale}, TargetType={x:Type Thickness}}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Control">
                        <FZMaterial Color="{StaticResource H_Color_Glass_Purple_20pc}" Preset="{GlassRoundtangle CornerRadius=3, BlurAmount=High}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <EventBlueprintFlyerTemplateSelector x:Key="A_EventSelect_FlyerTemplateSelector" DataTemplateBaseName="A_DataTemplate_CampaignSetup_Tile" />
        
        <Style x:Key="H_Style_Run_Yellow" TargetType="FZRun">
            <Setter Property="Color" Value="{StaticResource H_Color_Primary_Yellow}"/>
            <Setter Property="FontFamily" Value="Horizon_A_tf"/>
        </Style>

        <MappingConverter x:Key="H_MarkupConverter_HighlightYellow">
            <MappingConverterEntry Key="{NoCase Highlight}" Value="{StaticResource H_Style_Run_Yellow}"/>
        </MappingConverter>

        <MultiConverter x:Key="H_Converter_Expiry">
            <MultiConverterEntry Converter="{AbbreviatedTimeConverter}" />
            <MultiConverterEntry Converter="{StringFormatConverter}" Parameter="{Loc Campaign.IDS_WhatsNext_ExpiryFormat}" />
        </MultiConverter>

        <!-- we don't want on-change narration triggering once a second for times which show seconds, because it will interrupt itself (interruptbehaviour only protects it against interrupting the parts of the item narration which come before it), 
        and we don't want to use a repeat interval because then it won't read on focus as part of the item description.
        Since we want it to read on focus, and intermittently thereafter, we can read it on change but have the time rounding to our desired repeat interval
        -->
        <MultiConverter x:Key="H_Converter_ExpiryForNarration">
            <local:MultiConverterEntry>
                <local:MultiConverterEntry.Converter>
                    <local:AbbreviatedTimeConverter RoundDownToMultipleOf="30" />
                </local:MultiConverterEntry.Converter>
            </local:MultiConverterEntry>
            <MultiConverterEntry Converter="{StringFormatConverter}" Parameter="{Loc Campaign.IDS_WhatsNext_ExpiryFormat}" />
        </MultiConverter>

        <Storyboard
            x:Key="H_Storyboard_BlendExpiry">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(BlendValue.Blend)"
                Storyboard.TargetName="{Null}"
                FillBehavior="Stop">
                <DiscreteDoubleKeyFrame
                    KeyTime="0:0:0.0"
                    Value="0" />
                <EasingDoubleKeyFrame
                    KeyTime="0:0:0.3"
                    Value="1"
                    EasingFunction="{QuadraticEasing EasingMode=EaseOut}" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <DataTemplate x:Key="H_Template_WhatsNextItem">
            <Grid>
                <FZMaterial x:Name="capture" CaptureSubgraph="False" Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlyerBackgroundImage}">
                    <Grid x:Name="captured" >
                        <FZMaterial Color="#0000"/>
                        <Decorator>
                            <ContentPresenter Content="{Binding Flyer}" ContentTemplateSelector="{StaticResource A_EventSelect_FlyerTemplateSelector}"/>
                        </Decorator>
                    </Grid>
                </FZMaterial>
                <Grid x:Name="timer_root" Style="{StaticResource A_Style_ManualPassThrough_Visible_And_AncestorListBoxFocused_Allowed}"
                    ZPanel.DisableClipping="True" 
                    Visibility="{Binding CanExpire, Converter={FZBooleanToVisibilityConverter}, FallbackValue=Collapsed}"
                    local:ManualPassthroughProperty.Input="{Binding ExpiresSec, Converter={StaticResource H_Converter_ExpiryForNarration}}"
                    local:ScreenReader.Line="{Binding (local:ManualPassthroughProperty.Output), RelativeSource={RelativeSource Self}, Converter={StaticResource A_Converter_TrimInlineMarkup}}"
                    local:ScreenReader.LineType="ItemState"
                    local:ScreenReader.Event="OnChange"
                    local:ScreenReader.InterruptBehavior="WaitForNonePlaying">
                    <!-- this element is required somehow, to make the grid below it not get clipped -->
                    <FZMaterial Color="#0fff" Width="1" Height="1"/>
                    <Grid VerticalAlignment="Top"
                        Height="50"
                        Margin="0,-70,0,0">
                        <FZMaterial ImageSource="game:\Media\UI\Textures\Data_Bound\Event_Blueprint\Timer_Background.png" />
                        <StackPanel Orientation="Horizontal"
                            HorizontalAlignment="Center">
                            <FZMaterial ImageSource="game:\Media\UI\Textures\Data_Bound\Event_Blueprint\Clock_Icon.png"
                                Width="25"
                                Height="25" />
                            <Decorator Width="6"/>
                            <Grid>
                                <FZTextBlock x:Name="blended"
                                    HorizontalAlignment="Center"
                                    CapHeight="16" 
                                    TextWrapping="NoWrap"
                                    Stretch="None"
                                    Width="{Binding (BlendValue.Output), RelativeSource={RelativeSource Self}}"
                                    MarkupConverter="{StaticResource H_MarkupConverter_HighlightYellow}"
                                    VerticalAlignment="Center"
                                    Color="{StaticResource H_Color_Primary_White}"
                                    Text="{Binding Text, ElementName=text_helper}"

                                    BlendValue.Input="{Binding ActualWidth, ElementName=size_helper}"
                                    BlendValue.SkipInitialInputChanges="2"
                                    BlendValue.InputChangedStoryboard="{StaticResource H_Storyboard_BlendExpiry}"
                                    BlendValue.BlendFromPreviousOutput="True"/>
                                <Canvas Visibility="Hidden">
                                    <Grid x:Name="size_helper">
                                        <FZTextBlock x:Name="text_helper"
                                            CapHeight="16" 
                                            MarkupConverter="{StaticResource H_MarkupConverter_HighlightYellow}"
                                            Text="{Binding ExpiresSec, Converter={StaticResource H_Converter_Expiry}}"/>
                                    </Grid>
                                </Canvas>
                            </Grid>
                        </StackPanel>
                    </Grid>
                </Grid>

                <Grid ZPanel.DisableClipping="True" Style="{StaticResource A_Style_ManualPassThrough_Visible_And_AncestorListBoxFocused_Allowed}"
                    Visibility="{Binding TagDisplayString, Converter={StringVisConverter}, FallbackValue=Collapsed}"
                    local:ManualPassthroughProperty.Input="{Binding Text, ElementName=text_below}"
                    local:ScreenReader.Line="{Binding (local:ManualPassthroughProperty.Output), RelativeSource={RelativeSource Self}, Converter={StaticResource A_Converter_TrimInlineMarkup}}"
                    local:ScreenReader.LineType="ItemDescription"
                    local:ScreenReader.Event="OnChange">
                    <!-- this element is required somehow, to make the grid below it not get clipped -->
                    <FZMaterial Color="#0fff" Width="1" Height="1"/>
                    <Grid VerticalAlignment="Top"
                        Height="42"
                        Margin="0,-60,0,0">
                        <FZMaterial Color="{Binding TagColor}" />
                        <FZMaterial DockPanel.Dock="Left" ImageSource="{Binding TagIconPath}" GreedyMeasure="True" Height="50" VerticalAlignment="Center" HorizontalAlignment="Left"  Margin="10,0,0,0" Stretch="Uniform"/>
                        <FZTextBlock x:Name="text_below"
                                     HorizontalAlignment="Center"
                                     CapHeight="17" 
                                     TextWrapping="NoWrap"
                                     Stretch="None"
                                     Margin="40,0,20,0"
                                     MarkupConverter="{StaticResource H_MarkupConverter_HighlightYellow}"
                                     VerticalAlignment="Center"
                                     Color="{StaticResource H_Color_Primary_Black}"
                                     Text="{Binding TagDisplayString}"
                                     AutoScroll="{StaticResource H_AutoScrollSettings_Horizontal_Title}"/>
                    </Grid>
                </Grid>
            </Grid>
            <DataTemplate.Triggers>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition  Binding="{Binding ExpiresSec}" Value="0" />
                        <Condition  Binding="{Binding CanExpire}" Value="True" />
                    </MultiDataTrigger.Conditions>
                    <Setter TargetName="timer_root" Property="local:ManualPassthroughProperty.Input" Value="{Loc Campaign.IDS_WhatsNext_Expired}"/>
                    <Setter TargetName="blended" Property="Text" Value="{Loc Campaign.IDS_WhatsNext_Expired}"/>
                    <Setter TargetName="blended" Property="Width" Value="auto"/>

                    <Setter TargetName="capture" Property="CaptureSubgraph" Value="True"/>
                    <Setter TargetName="capture" Property="Preset" Value="{Roundtangle Saturation=0}"/>
                    <Setter TargetName="capture" Property="Margin" Value="-2"/>
                    <Setter TargetName="captured" Property="Margin" Value="2"/>
                </MultiDataTrigger>
                <DataTrigger Binding="{Binding Disabled}" Value="True">
                    <Setter TargetName="capture" Property="CaptureSubgraph" Value="True"/>
                    <Setter TargetName="capture" Property="Preset" Value="{Roundtangle Saturation=0}"/>
                    <Setter TargetName="capture" Property="Margin" Value="-2"/>
                    <Setter TargetName="captured" Property="Margin" Value="2"/>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>

    </Page.Resources>
    <UIPageTransitionManager.TransitionManager>
        <UIPageTransitionManager Preset="{StaticResource A_UIPageTransitionManagerPreset_Menu}" />
    </UIPageTransitionManager.TransitionManager>
    <Grid>
        <FZMaterialGlassCapture />
        <Control Style="{StaticResource A_Style_Control_ScreenBackground}" />
        <PageInputHandler x:Name="a_button"
                          Button="A"
                          Command="{Binding SelectCommand}" />
        <PageInputHandler x:Name="b_button"
                          Button="B"
                          Command="{Binding BackCommand}" />
        <PageInputHandler x:Name="toggle_button"
                          Button="R3"
                          Command="{Binding ToggleCommand}" />
        <ContentControl x:Name="BottomBar"
                        Panel.ZIndex="10"
                        Style="{StaticResource A_Style_ButtonBar}">
            <ControllerButtonPanel x:Name="PART_HelpPanel"
                                   Style="{StaticResource A_Style_ControllerButtonPanel_Default}">

                <ControllerButtonControl Button="{Binding Button, ElementName=a_button}"
                                         Description="{Loc HelpButtons.IDS_Select}"
                                         Visibility="{Binding Command.Enabled, FallbackValue=Collapsed, Converter={FZBooleanToVisibilityConverter}, ElementName=a_button}" />
                <ControllerButtonControl Button="{Binding Button, ElementName=b_button}"
                                         Description="{Loc HelpButtons.IDS_Back}"
                                         Visibility="{Binding Command.Enabled, FallbackValue=Collapsed, Converter={FZBooleanToVisibilityConverter}, ElementName=b_button}" />
                <ControllerButtonControl Button="{Binding Button, ElementName=toggle_button}"
                                         Description="{Binding Command.Name, ElementName=toggle_button}"
                                         Visibility="{Binding Command.Enabled, FallbackValue=Collapsed, Converter={FZBooleanToVisibilityConverter}, ElementName=toggle_button}" />

            </ControllerButtonPanel>
        </ContentControl>
        <Border Style="{StaticResource A_Style_FrameworkElement_LayoutRoot}"
                SnapsToDevicePixels="True"
                UseLayoutRounding="True"
                x:Name="root">
            <StackPanel HorizontalAlignment="Center"
                  VerticalAlignment="Center"
                  Margin="0,-60,0,0"
                  Style="{StaticResource A_Style_FrameworkElement_DefaultTransition}"
                  UIPageTransitionManager.TransitionIndex="0">
                <Decorator HorizontalAlignment="Left"
                           VerticalAlignment="Top">
                    <ContentControl Content="{Loc ScreenTitles.IDS_WhatsNext}"
                                    Style="{StaticResource A_Style_ContentControl_ScreenTitleBlock}"
                                    Width="{StaticResource H_ItemWidth}"/>
                </Decorator>
                <Decorator Height="60"/>
                <Decorator>
                    <WrapListBox x:Name="menu"
                                 ItemsSource="{Binding Items}"
                                 ScrollOrientation="Vertical"
                                 Width="{Convert {StaticResource H_ItemWidth}, Converter={LinearTransformConverter Scale={StaticResource H_ItemsH}, Add={Convert {StaticResource H_ItemGap}, Converter={LinearTransformConverter Scale={StaticResource H_ItemsH}}}}}"
                                 Height="{Convert {StaticResource H_ItemHeight}, Converter={LinearTransformConverter Scale={StaticResource H_ItemsV}, Add={Convert {StaticResource H_ItemGap}, Converter={LinearTransformConverter Scale={StaticResource H_ItemsV}}}}}"
                                 HorizontalAlignment="Center"
                                 ItemTemplate="{StaticResource H_Template_WhatsNextItem}"
                                 Template="{StaticResource A_ControlTemplate_Carousel_Default}"
                                 ItemContainerStyle="{StaticResource H_ContainerStyle_WhatsNextItem}"
                                 EmptyItemStyle="{StaticResource H_ContainerStyle_WhatsNextItem_Empty}"
                                 ItemWidth="{Convert {StaticResource H_ItemWidth}, Converter={LinearTransformConverter Add={StaticResource H_ItemGap}}}"
                                 ItemHeight="{Convert {StaticResource H_ItemHeight}, Converter={LinearTransformConverter Add={StaticResource H_ItemGap}}}"
                                 SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                                 SelectedIndex="{Binding SelectedIndex, Mode=OneWayToSource}"
                                 FocusOnPageFocusGained.SelectorSelectedItem="True"
                                 Margin="{Margin 
                                    Left={Convert {StaticResource H_ItemGap}, Converter={LinearTransformConverter Scale=-0.5}}, 
                                    Top={Convert {StaticResource H_ItemGap}, Converter={LinearTransformConverter Scale=-0.5}},
                                    Right={Convert {StaticResource H_ItemGap}, Converter={LinearTransformConverter Scale=-0.5}},
                                    Bottom={Convert {StaticResource H_ItemGap}, Converter={LinearTransformConverter Scale=-0.5}}
                                    }">
                        <WrapListBox.Resources>
                            <Thickness x:Key="H_Dynamic_CarouselInnerClip">12</Thickness>
                            <Thickness x:Key="H_Dynamic_CarouselOuterClip">16</Thickness>
                        </WrapListBox.Resources>
                    </WrapListBox>
                </Decorator>
            </StackPanel>
        </Border>
    </Grid>
</Page>
