<UserControl
    DataContext="{Binding (HUDData.Data), RelativeSource={RelativeSource Self}}" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:ForzaUI" 
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    mc:Ignorable="d"
    x:Class="ForzaUI.HUDConvertibleControl"
    x:Name="UserControl"
    HorizontalAlignment="Right"
    VerticalAlignment="Bottom"
>

    <UserControl.Resources>
        <Style x:Key="A_Style_FZMaterial_ConvertibleIcon" TargetType="local:FZMaterial">
            <Setter Property="Height" Value="24"/>
            <Setter Property="Color" Value="{StaticResource A_Color_HUD_Text_NoBackground}"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding CanStartAnimation}" Value="False">
                    <Setter Property="Color" Value="{StaticResource A_Color_HUD_FadedText}"/>
                </DataTrigger>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding StateName1, Converter={StaticResource A_StringVisConverter}}" Value="{x:Static Visibility.Visible}" />
                        <Condition Binding="{Binding StateName2, Converter={StaticResource A_StringVisConverter}}" Value="{x:Static Visibility.Visible}" />
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Visibility" Value="Collapsed"/>
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="A_Style_ControllerButtonControl_ConvertibleTrigger" 
               TargetType="{x:Type local:ControllerButtonControl}"
               BasedOn="{StaticResource A_Style_ControllerButtonControl_Standalone}">
            <Setter Property="MinHeight" Value="24"/>
            <Setter Property="HideBackground" Value="True"/>
            <Setter Property="HideShadow" Value="True"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding CanStartAnimation}" Value="False">
                    <Setter Property="Opacity" Value="0.3"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="A_Style_FZMaterial_ButtonBackground"
            TargetType="{Type local:FZMaterial}"
            BasedOn="{StaticResource A_Style_FZMaterial_GlassPanel_NonInteractive}">
            <Setter Property="Preset"
                    Value="{StaticResource A_FZMaterialPresetGlassRoundtangle_GlassPanel_OuterAll3px}" />
            <Setter Property="Visibility"
                    Value="{x:Static Visibility.Collapsed}" />
            <Style.Triggers>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding StateName1, Converter={StaticResource A_StringVisConverter}}" Value="{x:Static Visibility.Visible}" />
                        <Condition Binding="{Binding StateName2, Converter={StaticResource A_StringVisConverter}}" Value="{x:Static Visibility.Visible}" />
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Visibility" Value="Visible"/>
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>

        <local:FZMaterialPresetRoundtangleStroke x:Key="A_FZMaterialPresetRoundtangleStroke_Stroke"
                BasedOn="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_OuterAll3px}"
                Thickness="2"/>

        <Color x:Key="A_Color_State_Inactive">#80A6A8AB</Color>
        <Color x:Key="A_Color_State_Active">#FF45F0F4</Color>

        <MappingConverter x:Key="A_Converter_ConvertibleStateToState1Color" Default="{StaticResource A_Color_State_Inactive}">
            <MappingConverterEntry Key="{x:Static local:ConvertibleState.Open}" Value="{StaticResource A_Color_State_Active}"/>
        </MappingConverter>

        <MappingConverter x:Key="A_Converter_ConvertibleStateToState2Color" Default="{StaticResource A_Color_State_Inactive}">
            <MappingConverterEntry Key="{x:Static local:ConvertibleState.Closed}" Value="{StaticResource A_Color_State_Active}"/>
        </MappingConverter>

        <Style x:Key="A_Style_FZMaterial_Stroke"
            TargetType="{x:Type local:FZMaterial}">
            <Setter Property="Preset" Value="{StaticResource A_FZMaterialPresetRoundtangleStroke_Stroke}"/>
            <Setter Property="Color" Value="#80A6A8AB"/>
            <Setter Property="Width" Value="88"/>
            <Setter Property="Height" Value="24"/>
        </Style>

        <Style x:Key="A_Style_FZMaterial_StateText"
            TargetType="{x:Type local:FZTextBlock}">
            <Setter Property="FontFamily" Value="Horizon_A"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="8,0"/>
            <Setter Property="CapHeight" Value="12"/>
        </Style>

        <local:Storyboard x:Key="A_Storyboard_StateTextFlashLoop">
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(local:FZTextBlock.Color)" RepeatBehavior="Forever">
                <EasingColorKeyFrame KeyTime="0:0:0.0" Value="{StaticResource A_Color_State_Inactive}"/>
                <EasingColorKeyFrame KeyTime="0:0:0.5" Value="{StaticResource A_Color_State_Active}"/>
                <DiscreteColorKeyFrame KeyTime="0:0:0.7" Value="{StaticResource A_Color_State_Active}"/>
                <EasingColorKeyFrame KeyTime="0:0:1.2" Value="{StaticResource A_Color_State_Inactive}"/>
                <DiscreteColorKeyFrame KeyTime="0:0:1.4" Value="{StaticResource A_Color_State_Inactive}"/>
            </ColorAnimationUsingKeyFrames>
        </local:Storyboard>

        <Style x:Key="A_Style_FZMaterial_State2Text"
               BasedOn="{StaticResource A_Style_FZMaterial_StateText}"
               TargetType="{x:Type local:FZTextBlock}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding ConvertibleState}" Value="{x:Static local:ConvertibleState.Closing}">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard x:Name="FlashLoop" Storyboard="{StaticResource A_Storyboard_StateTextFlashLoop}"/>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <StopStoryboard BeginStoryboardName="FlashLoop"/>
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="A_Style_FZMaterial_State1Text"
               BasedOn="{StaticResource A_Style_FZMaterial_StateText}"
               TargetType="{x:Type local:FZTextBlock}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding ConvertibleState}" Value="{x:Static local:ConvertibleState.Opening}">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard x:Name="FlashLoop" Storyboard="{StaticResource A_Storyboard_StateTextFlashLoop}"/>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <StopStoryboard BeginStoryboardName="FlashLoop"/>
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>

    </UserControl.Resources>

    <Grid x:Name="PART_LayoutRoot" >
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.0"/>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="PART_Hidden">
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PART_LayoutRoot">
                            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="PART_Shown">
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PART_LayoutRoot">
                            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <StackPanel Orientation="Horizontal" 
                    Margin="0,0,0,-8"
                    Visibility="{Binding IsConvertibleVisible, Converter={StaticResource A_FZBooleanToVisibilityConverter}}">

            <local:FZMaterial x:Name="ConvertibleIcon" Style="{StaticResource A_Style_FZMaterial_ConvertibleIcon}" 
                            Width="59" 
                            ImageSource="/ForzaUI;component/Textures/Anthem/HUD/HUD_Convertible_Icon.png"
                            Margin="0,0,5,0"/>

            <StackPanel Margin="0,0,8,0">
                <FZMaterial Style="{StaticResource A_Style_FZMaterial_ButtonBackground}">
                    <FZMaterial Style="{StaticResource A_Style_FZMaterial_Stroke}">
                        <FZTextBlock Style="{StaticResource A_Style_FZMaterial_State2Text}"
                            Text="{Binding StateName2}"
                            Color="{Binding ConvertibleState, Converter={StaticResource A_Converter_ConvertibleStateToState2Color}}"/>
                    </FZMaterial>
                </FZMaterial>
                <Decorator Height="4"/>
                <FZMaterial Style="{StaticResource A_Style_FZMaterial_ButtonBackground}">
                    <FZMaterial Style="{StaticResource A_Style_FZMaterial_Stroke}">
                        <FZTextBlock Style="{StaticResource A_Style_FZMaterial_State1Text}"
                            Text="{Binding StateName1}"
                            Color="{Binding ConvertibleState, Converter={StaticResource A_Converter_ConvertibleStateToState1Color}}"/>
                    </FZMaterial>
                </FZMaterial>
            </StackPanel>

            <local:ControllerButtonControl x:Name="ControllerButtonControl_Convertible"
                                           Command="{Binding ConvertibleTriggerCommand}"
                                           Style="{StaticResource A_Style_ControllerButtonControl_ConvertibleTrigger}"
                                           SupportsControllerInput="True"
                                           />
        </StackPanel>

    </Grid>

</UserControl>