<local:SearchSuggestBoxBase
    x:Class="Bili.App.Controls.SearchSuggestBox"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:behaviors="using:Bili.App.Behaviors"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:icons="using:Richasy.FluentIcon.Uwp"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:loc="using:Bili.App.Resources.Extension"
    xmlns:local="using:Bili.App.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:search="using:Bili.Models.Data.Search"
    d:DesignHeight="300"
    d:DesignWidth="400"
    SizeChanged="OnSizeChanged"
    TabFocusNavigation="Local"
    mc:Ignorable="d">

    <interactivity:Interaction.Behaviors>
        <behaviors:InitializeBehavior />
    </interactivity:Interaction.Behaviors>

    <UserControl.Resources>
        <Flyout x:Name="HotSearchFlyout" Placement="BottomEdgeAlignedLeft">
            <Flyout.FlyoutPresenterStyle>
                <Style BasedOn="{StaticResource DefaultFlyoutPresenterStyle}" TargetType="FlyoutPresenter">
                    <Setter Property="MaxWidth" Value="1200" />
                    <Setter Property="Padding" Value="8" />
                </Style>
            </Flyout.FlyoutPresenterStyle>
            <ListView
                x:Name="HotSearchListView"
                Width="{Binding ElementName=AppSearchBox, Path=ActualWidth}"
                HorizontalAlignment="Stretch"
                IsItemClickEnabled="True"
                ItemClick="OnHotItemClick"
                ItemsSource="{x:Bind ViewModel.HotSearchCollection}"
                SelectionMode="None">
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="search:SearchSuggest">
                        <Grid AutomationProperties.Name="{x:Bind DisplayText}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="28" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <TextBlock
                                VerticalAlignment="Center"
                                FontSize="12"
                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                Text="{x:Bind Position}" />
                            <Image
                                Grid.Column="1"
                                Width="16"
                                Margin="0,0,12,0"
                                VerticalAlignment="Center"
                                Source="{Binding Icon}"
                                Stretch="Uniform"
                                Visibility="{x:Bind Icon, Converter={StaticResource ObjectToVisibilityConverter}}" />
                            <TextBlock
                                Style="{StaticResource BodyTextBlockStyle}"
                                Grid.Column="2"
                                VerticalAlignment="Center"
                                MaxLines="1"
                                Text="{x:Bind DisplayText}"
                                TextLineBounds="Tight"
                                TextTrimming="CharacterEllipsis"
                                ToolTipService.ToolTip="{x:Bind Keyword}" />
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Flyout>
    </UserControl.Resources>

    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="LayoutStateGroup">
                <VisualStateGroup.States>
                    <VisualState x:Name="Wide">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="{StaticResource MediumWindowThresholdWidth}" />
                        </VisualState.StateTriggers>
                    </VisualState>
                    <VisualState x:Name="Narrow">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="0" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="AppSearchBox.PlaceholderText" Value="{loc:Locale Name=SearchTipSlim}" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup.States>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <AutoSuggestBox
            x:Name="AppSearchBox"
            HorizontalAlignment="Stretch"
            IsTabStop="True"
            ItemsSource="{x:Bind ViewModel.SearchSuggestion, Mode=OneWay}"
            PlaceholderText="{loc:Locale Name=SearchTip}"
            QueryIcon="Find"
            QuerySubmitted="OnSearchBoxSubmitted"
            TabIndex="2"
            Text="{x:Bind ViewModel.Keyword, Mode=TwoWay}"
            UpdateTextOnSelect="False"
            XYFocusLeftNavigationStrategy="Auto">
            <AutoSuggestBox.TextBoxStyle>
                <Style TargetType="TextBox">
                    <Setter Property="Padding" Value="40,8,0,8" />
                </Style>
            </AutoSuggestBox.TextBoxStyle>
            <AutoSuggestBox.ItemTemplate>
                <DataTemplate x:DataType="search:SearchSuggest">
                    <TextBlock Text="{x:Bind DisplayText}" TextTrimming="CharacterEllipsis" />
                </DataTemplate>
            </AutoSuggestBox.ItemTemplate>
        </AutoSuggestBox>
        <Button
            x:Name="HotSearchButton"
            AutomationProperties.Name="{loc:Locale Name=HotSearch}"
            Width="32"
            Margin="4,0,0,0"
            Padding="0,8"
            HorizontalAlignment="Left"
            VerticalAlignment="Center"
            Background="Transparent"
            BorderThickness="0"
            Click="OnHotSearchButtonClick"
            IsTabStop="True"
            TabIndex="1"
            ToolTipService.ToolTip="{loc:Locale Name=HotSearch}">
            <icons:RegularFluentIcon FontSize="12" Symbol="Reward24" />
        </Button>
    </Grid>
</local:SearchSuggestBoxBase>
