<TextBox x:Class="EarTrumpet.UI.Controls.SearchBox"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:Event="clr-namespace:EarTrumpet.Extensions.EventBinding"
         xmlns:Theme="clr-namespace:EarTrumpet.UI.Themes"
         xmlns:bcl="clr-namespace:System;assembly=mscorlib"
         xmlns:ctl="clr-namespace:EarTrumpet.UI.Controls"
         xmlns:resx="clr-namespace:EarTrumpet.Properties"
         xmlns:vm="clr-namespace:EarTrumpet.UI.ViewModels"
         Style="{StaticResource {x:Type TextBox}}">
    <TextBox.Resources>
        <DataTemplate DataType="{x:Type vm:SettingsSearchBoxResultsViewModel}">
            <ctl:ListView HorizontalAlignment="Stretch"
                          ItemContainerStyle="{StaticResource HoverListItemStyle}"
                          ItemInvoked="{Event:Binding Invoked}"
                          ItemsSource="{Binding Results}"
                          Style="{StaticResource {x:Type ListView}}" />
        </DataTemplate>
        <DataTemplate DataType="{x:Type vm:SettingsSearchBoxResultsItemViewModel}">
            <Grid Height="44">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="32" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <TextBlock FontSize="15" Text="{Binding Glyph}">
                    <TextBlock.Style>
                        <Style BasedOn="{StaticResource GlyphTextBlockStyle}" TargetType="TextBlock">
                            <Setter Property="Theme:Brush.Foreground" Value="SystemAccent" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListViewItem}}, Path=IsMouseOver}" Value="True">
                                    <Setter Property="Theme:Brush.Foreground" Value="Theme=SystemAccent, HighContrast=HighlightText" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </TextBlock.Style>
                </TextBlock>
                <TextBlock Grid.Column="1"
                           VerticalAlignment="Center"
                           FontSize="15"
                           Text="{Binding DisplayName}">
                    <TextBlock.Style>
                        <Style TargetType="TextBlock">
                            <Setter Property="Theme:Brush.Foreground" Value="Text" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListViewItem}}, Path=IsMouseOver}" Value="True">
                                    <Setter Property="Theme:Brush.Foreground" Value="Theme=Text, HighContrast=HighlightText" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </TextBlock.Style>
                </TextBlock>
            </Grid>

        </DataTemplate>
    </TextBox.Resources>
    <TextBox.Template>
        <ControlTemplate TargetType="TextBox">
            <Border x:Name="border"
                    Theme:Brush.Background="{TemplateBinding Theme:Brush.Background}"
                    Theme:Brush.BorderBrush="{TemplateBinding Theme:Brush.BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    SnapsToDevicePixels="True">
                <Grid>
                    <TextBlock Name="PromptText"
                               Margin="9,4"
                               Theme:Brush.Foreground="GrayText"
                               FontSize="14"
                               FontWeight="SemiBold"
                               Text="{x:Static resx:Resources.FindASettingText}" />
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <ScrollViewer x:Name="PART_ContentHost"
                                      Margin="4,0"
                                      Focusable="false"
                                      VerticalContentAlignment="Center"
                                      HorizontalScrollBarVisibility="Hidden"
                                      VerticalScrollBarVisibility="Hidden" />
                        <TextBlock Name="SearchGlyph"
                                   Grid.Column="1"
                                   Margin="6,0"
                                   HorizontalAlignment="Right"
                                   Theme:Brush.Foreground="GrayText"
                                   FontSize="12"
                                   FontWeight="SemiBold"
                                   Style="{StaticResource GlyphTextBlockStyle}"
                                   Text="&#xE721;"
                                   Visibility="Collapsed" />

                        <Button x:Name="ClearButton"
                                Grid.Column="1"
                                Style="{StaticResource BaseOverlayButton}">
                            <TextBlock x:Name="ClearButtonTextBlock"
                                       Margin="8"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"
                                       Theme:Brush.Foreground="Theme=SearchClearGlyph, HighContrast=GrayText"
                                       FontSize="10"
                                       Style="{StaticResource GlyphTextBlockStyle}"
                                       Text="&#xE8BB;" />
                            <Button.Triggers>
                                <EventTrigger RoutedEvent="Button.Click">
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ClearButton" Storyboard.TargetProperty="(FrameworkElement.Tag)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Clear" />
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00.1" Value="" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>
                            </Button.Triggers>
                        </Button>
                    </Grid>
                    <Popup x:Name="Popup"
                           AllowsTransparency="False"
                           Placement="Bottom"
                           PopupAnimation="None"
                           StaysOpen="False">
                        <Border x:Name="SubmenuBorder"
                                Theme:Brush.Background="Theme={Theme}ChromeLow, HighContrast=Window"
                                Theme:Brush.BorderBrush="Light=LightChromeHigh, Dark=ControlDarkAppButtonTextDisabled/0.9, HighContrast=ControlText"
                                BorderThickness="1"
                                SnapsToDevicePixels="True">
                            <Grid>
                                <ContentControl Content="{Binding}" />
                            </Grid>
                        </Border>
                    </Popup>
                </Grid>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger SourceName="ClearButton" Property="Tag" Value="Clear">
                    <Setter Property="Text" Value="" />
                </Trigger>
                <Trigger Property="Text" Value="{x:Static bcl:String.Empty}">
                    <Setter TargetName="ClearButton" Property="Visibility" Value="Collapsed" />
                    <Setter TargetName="SearchGlyph" Property="Visibility" Value="Visible" />
                </Trigger>
                <Trigger SourceName="ClearButton" Property="IsMouseOver" Value="True">
                    <Setter TargetName="ClearButtonTextBlock" Property="Theme:Brush.Foreground" Value="Theme=SystemAccent" />
                </Trigger>
                <Trigger SourceName="ClearButton" Property="IsPressed" Value="True">
                    <Setter TargetName="ClearButton" Property="Theme:Brush.Background" Value="Theme=SystemAccent" />
                    <Setter TargetName="ClearButtonTextBlock" Property="Theme:Brush.Foreground" Value="Theme=LightChromeWhite" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="border" Property="Theme:Brush.BorderBrush" Value="Light=LightChromeBlackMedium, Dark=ControlDarkSelectBorderRest, HighContrast=ControlText" />
                </Trigger>
                <Trigger SourceName="ClearButton" Property="IsPressed" Value="True">
                    <Setter TargetName="border" Property="Theme:Brush.Background" Value="Theme=ApplicationBackgroundLightTheme" />
                    <Setter TargetName="border" Property="Theme:Brush.BorderBrush" Value="SystemAccent" />
                    <Setter Property="Theme:Brush.Foreground" Value="Theme=ApplicationTextLightTheme" />
                </Trigger>
                <Trigger Property="IsKeyboardFocused" Value="True">
                    <Setter TargetName="border" Property="Theme:Brush.Background" Value="Theme=ApplicationBackgroundLightTheme" />
                    <Setter TargetName="border" Property="Theme:Brush.BorderBrush" Value="SystemAccent" />
                    <Setter Property="Theme:Brush.Foreground" Value="Theme=ApplicationTextLightTheme" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </TextBox.Template>
</TextBox>
