<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:noesis="clr-namespace:NoesisGUIExtensions;assembly=Noesis.GUI.Extensions"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    xmlns:local="clr-namespace:NoesisGUIExtensions">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Styles.xaml" />
    </ResourceDictionary.MergedDictionaries>

    <!-- COMBO BOX TOGGLE STYLE -->
    <!--////////////////////////////////////////////////////////////////////-->
    <Style x:Key="Style.ComboBox.Toggle" TargetType="ToggleButton" BasedOn="{StaticResource Style.Expander.Toggle}"/>

    <!-- COMBO BOX TEXT SCROLL TEMPLATE -->
    <!--////////////////////////////////////////////////////////////////////-->
    <ControlTemplate x:Key="Template.ComboBox.TextScroll" TargetType="ScrollViewer">
        <Border Background="Transparent" Padding="{TemplateBinding Padding}">
            <ScrollContentPresenter />
        </Border>
    </ControlTemplate>

    <!-- COMBO BOX TEXT TEMPLATE -->
    <!--////////////////////////////////////////////////////////////////////-->
    <ControlTemplate x:Key="Template.ComboBox.Text" TargetType="TextBox">
        <ScrollViewer
            x:Name="PART_ContentHost"
            Template="{StaticResource Template.ComboBox.TextScroll}"
            Padding="{TemplateBinding Padding}"
            Foreground="{TemplateBinding Foreground}"
            Focusable="False"
            HorizontalScrollBarVisibility="Hidden"
            VerticalScrollBarVisibility="Disabled"/>
    </ControlTemplate>

    <!-- COMBO BOX ITEM TEMPLATE -->
    <!--////////////////////////////////////////////////////////////////////-->
    <!-- The ComboBoxItem renders the items in the dropdown menu of the ComboBox and defines their visual appearance and content -->
    <ControlTemplate x:Key="Template.ComboBoxItemControl" TargetType="ComboBoxItem">

        <!-- The ComboBoxItem.Base defines the item's container in which we render its content -->
        <Border
            x:Name="ComboBoxItem.Base"
            Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Height="{TemplateBinding Height}">

            <Grid>
                <Grid.Resources>
                    <Style TargetType="TextBlock">
                        <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
                        <Setter Property="TextWrapping" Value="NoWrap"/>
                    </Style>
                </Grid.Resources>
                
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="32" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="24"/>
                </Grid.ColumnDefinitions>

                <!-- The Check displays a checkmark icon in front of the item's label -->
                <!-- The checkmark will only be visible if the ComboBoxItem IsSelected property is set to "True" -->
                <Path
                    x:Name="Check"
                    Grid.Column="0"
                    Margin="0"
                    Data="{DynamicResource Icon.Checkmark}"
                    Fill="{DynamicResource Color.IconFill}"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Visibility="Hidden"/>

                <!-- The ContentPresenter displays the content of the item which is usually a text label -->
                <ContentPresenter
                    Grid.Column="1"
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                    <ContentPresenter.ContentTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding}"
                                    TextTrimming="CharacterEllipsis"
                                    TextWrapping="NoWrap"/>
                        </DataTemplate>
                    </ContentPresenter.ContentTemplate>
                </ContentPresenter>
            </Grid>
        </Border>

        <ControlTemplate.Triggers>
            <!-- These triggers define the property changes that happen in the different interactive states of the ComboBoxIcon -->
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="{DynamicResource Color.Background.MenuItem.Hover}" TargetName="ComboBoxItem.Base"/>
            </Trigger>

            <!-- This trigger also displays the checkmark icon when the item is selected -->
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="{DynamicResource Color.Background.MenuItem.Selected}" TargetName="ComboBoxItem.Base"/>
                <Setter Property="Visibility" Value="Visible" TargetName="Check"/>
            </Trigger>

            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsMouseOver" Value="True"/>
                    <Condition Property="IsSelected" Value="True"/>
                </MultiTrigger.Conditions>

                <Setter Property="Background" Value="{DynamicResource Color.Background.MenuItem.Hover}" TargetName="ComboBoxItem.Base"/>
            </MultiTrigger>

            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Foreground" Value="{DynamicResource Color.TextDisable}"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <!-- COMBO BOX ITEM STYLE -->
    <!--////////////////////////////////////////////////////////////////////-->
    <Style x:Key="Style.ComboBoxItemControl" TargetType="ComboBoxItem" BasedOn="{StaticResource {x:Type ContentControl}}">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Height" Value="40"/>
        <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}"/>
        <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}"/>
        <Setter Property="Template" Value="{StaticResource Template.ComboBoxItemControl}"/>
        <Setter Property="FocusVisualStyle" Value="{DynamicResource Style.Focus}"/>
    </Style>

    <!-- COMBO BOX TEMPLATE -->
    <!--////////////////////////////////////////////////////////////////////-->
    <ControlTemplate x:Key="Template.ComboBoxControl" TargetType="ComboBox">
        <!-- This is a small animation that moves the arrow up and down which is triggered when the player clicks the toggle button and opens the dropdown menu -->
        <ControlTemplate.Resources>
            <Storyboard x:Key="Anim.Expand">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="RenderTransform.Y">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="2"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0">
                        <EasingDoubleKeyFrame.EasingFunction>
                            <CubicEase EasingMode="EaseOut"/>
                        </EasingDoubleKeyFrame.EasingFunction>
                    </EasingDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <Style TargetType="ComboBoxItem" BasedOn="{StaticResource {x:Type ContentControl}}">
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Height" Value="40"/>
                <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}"/>
                <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}"/>
                <Setter Property="Template" Value="{StaticResource Template.ComboBoxItemControl}"/>
                <Setter Property="FocusVisualStyle" Value="{DynamicResource Style.Focus}"/>
            </Style>
        </ControlTemplate.Resources>

        <Grid>
            <!-- The ComboBox.Button defines the toggle button which players press to expand/collapse the dropdown menu -->
            <ToggleButton
                x:Name="ComboBox.Button"
                Style="{StaticResource Style.ComboBox.Toggle}"
                ClickMode="Press"
                Foreground="{TemplateBinding Foreground}"
                IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                IsTabStop="False"
                Padding="12,0">

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <!-- The ComboBox.Button.Base defines the button's container over which we render its content -->
                    <Border
                        x:Name="ComboBox.Button.Base"
                        Grid.ColumnSpan="2"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="2"
                        CornerRadius="4"/>

                    <!-- This grid wraps both the ContentPresenter and the Placeholder and only one can be visible at the same time -->
                    <!-- The ContentPresenter renders content inside of the toggle button. The content source is whichever the selected item from the dropdown menu is -->
                    <!-- The Placeholder is displayed only when there isn't a selected item in the dropdown menu -->
                    <Grid Grid.Column="0">
                        <ContentPresenter
                            x:Name="SelectionBoxItemHost"
                            ContentSource="SelectionBoxItem"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Center"
                            Margin="{TemplateBinding Padding}"/>

                        <TextBlock
                            x:Name="Placeholder"
                            Text="{Binding (local:Text.Placeholder), RelativeSource={RelativeSource TemplatedParent}}"
                            Style="{DynamicResource Style.TextBox.PlaceholderText}"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Center"
                            Margin="{TemplateBinding Padding}"
                            Visibility="Collapsed"/>
                    </Grid>

                    <!-- The Arrow renders an arrow texture which communicates that pressing the toggle button will open a dropdown menu below -->
                    <Image
                        x:Name="Arrow"
                        Grid.Column="1"
                        Source="/Root;component/Textures/Controls/Arrow.png"
                        Width="16"
                        Height="16"
                        VerticalAlignment="Center"
                        Margin="16,0,16,0"
                        RenderTransformOrigin="0.5,0.5"
                        IsHitTestVisible="False">

                        <Image.RenderTransform>
                            <TranslateTransform />
                        </Image.RenderTransform>
                    </Image>
                </Grid>
            </ToggleButton>

            <!-- The Popup control defines the appearance, behaviour and placement of the dropdown menu -->
            <Popup
                x:Name="PART_Popup"
                IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}"
                Focusable="False"
                Placement="Bottom"
                PopupAnimation="Fade"
                AllowsTransparency="True">

                <!-- The DropDown.Base defines the dropdown menu's container -->
                <Border
                    x:Name="DropDown.Base"
                    Background="{DynamicResource Color.Background.Control}"
                    BorderBrush="{DynamicResource Color.Border.Control.Active}"
                    BorderThickness="2,0,2,2"
                    CornerRadius="0,0,4,4"
                    Width="{TemplateBinding ActualWidth}"
                    MaxHeight="{TemplateBinding MaxDropDownHeight}">

                    <!-- The DropDown.Base defines the dropdown menu's container -->
                    <Border
                        x:Name="DropDown.Separator"
                        Background="Transparent"
                        BorderBrush="{DynamicResource Color.Separator}"
                        BorderThickness="0,2,0,0"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch">

                        <!-- The ItemsPresenter loads items in the dropdown menu. -->
                        <!-- Items are either explicitly defined as ComboBoxItems in the ComboBox control or they are loaded by setting a collection to the ItemsSource property  -->
                        <!-- The ItemsPresenter is wrapped in a ScrollViewer to enable scrolling if there are more items that can be displayed in the menu's height -->
                        <ScrollViewer
                            Focusable="False"
                            Padding="0,6"
                            HorizontalScrollBarVisibility="Disabled"
                            KeyboardNavigation.TabNavigation="Cycle"
                            KeyboardNavigation.DirectionalNavigation="Contained">

                            <ItemsPresenter />
                        </ScrollViewer>
                    </Border>
                </Border>
            </Popup>
        </Grid>

        <ControlTemplate.Triggers>
            <!-- This trigger displays the Placeholder text in the toggle button when there is no selected item in the dropdown menu -->
            <Trigger Property="SelectedIndex" Value="-1">
                <Setter Property="Visibility" Value="Visible" TargetName="Placeholder"/>
            </Trigger>

            <!-- These triggers define the property changes that happen in the different interactive states of the ComboBox toggle button -->
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="BorderBrush" Value="{DynamicResource Color.Border.Control.Hover}" TargetName="ComboBox.Button.Base"/>
            </Trigger>

            <Trigger Property="IsDropDownOpen" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource Anim.Expand}"/>
                </Trigger.EnterActions>

                <Setter Property="BorderBrush" Value="{DynamicResource Color.Border.Control.Active}" TargetName="ComboBox.Button.Base"/>
                <Setter Property="BorderThickness" Value="2,2,2,0" TargetName="ComboBox.Button.Base"/>
                <Setter Property="CornerRadius" Value="4,4,0,0" TargetName="ComboBox.Button.Base"/>
            </Trigger>

            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Foreground" Value="{DynamicResource Color.TextDisable}"/>
                <Setter Property="BorderBrush" Value="{DynamicResource Color.Border.Control.Disable}" TargetName="ComboBox.Button.Base"/>
                <Setter Property="Background" Value="{DynamicResource Color.Background.Control.Disable}" TargetName="ComboBox.Button.Base"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <!-- COMBO BOX STYLE -->
    <!--////////////////////////////////////////////////////////////////////-->
    <Style x:Key="Style.ComboBoxControl" TargetType="ComboBox" BasedOn="{StaticResource {x:Type ItemsControl}}">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Background" Value="{DynamicResource Color.Background.Control}"/>
        <Setter Property="Foreground" Value="{DynamicResource Color.Text}"/>
        <Setter Property="BorderBrush" Value="{DynamicResource Color.Border.Control}"/>
        <Setter Property="Padding" Value="12,0,0,0"/>
        <Setter Property="MaxDropDownHeight" Value="360"/>
        <Setter Property="FontFamily" Value="{DynamicResource Font.CoreSans}"/>
        <Setter Property="FontSize" Value="{DynamicResource Font.Size.Default}"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
        <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template" Value="{StaticResource Template.ComboBoxControl}"/>
        <Setter Property="FocusVisualStyle" Value="{DynamicResource Style.Focus}"/>
    </Style>
</ResourceDictionary>
