<local:AppTitleBarBase
    x:Class="Bili.App.Controls.AppTitleBar"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:animatedVisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
    xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:loc="using:Bili.App.Resources.Extension"
    xmlns:local="using:Bili.App.Controls"
    xmlns:local1="using:Bili.Models.Data.Local"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:uwp="using:Richasy.FluentIcon.Uwp"
    Height="48"
    d:DesignHeight="300"
    d:DesignWidth="400"
    mc:Ignorable="d">

    <Grid x:Name="RootGrid" Visibility="{x:Bind ViewModel.IsShowTitleBar, Mode=OneWay}">
        <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="BackgroundHost.Background" Value="{ThemeResource NavigationViewDefaultPaneBackground}" />
                            <Setter Target="UserAvatar.Margin" Value="24,0,12,0" />
                            <Setter Target="AppNameBlock.Visibility" Value="Collapsed" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup.States>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid x:Name="BackgroundHost" Background="{ThemeResource NavigationViewExpandedPaneBackground}" />
        <Rectangle
            x:Name="TitleBarHost"
            MinHeight="48"
            Fill="Transparent" />
        <Grid x:Name="ContentGrid">

            <Grid.ColumnDefinitions>
                <!-- Back button -->
                <ColumnDefinition Width="Auto" />
                <!-- Menu button -->
                <ColumnDefinition Width="Auto" />
                <!-- Play records button -->
                <ColumnDefinition Width="Auto" />
                <!-- Logo -->
                <ColumnDefinition Width="Auto" />
                <!-- Search -->
                <ColumnDefinition Width="*" />
                <!-- User -->
                <ColumnDefinition Width="Auto" />
                <!-- Flex column -->
                <ColumnDefinition x:Name="RightPaddingColumn" Width="172" />
            </Grid.ColumnDefinitions>

            <Button
                x:Name="BackButton"
                AutomationProperties.Name="{loc:Locale Name=BackToPrevious}"
                Style="{StaticResource TitleBarButtonStyle}"
                Padding="6,0,0,0"
                Command="{x:Bind _navigationViewModel.BackCommand}"
                IsEnabled="{x:Bind _navigationViewModel.IsBackButtonEnabled, Mode=OneWay}"
                TabIndex="1"
                ToolTipService.ToolTip="{loc:Locale Name=BackToPrevious}"
                Visibility="{x:Bind _navigationViewModel.CanBack, Mode=OneWay}">
                <Button.KeyboardAccelerators>
                    <KeyboardAccelerator Key="Back" />
                </Button.KeyboardAccelerators>
                <animations:Implicit.ShowAnimations>
                    <animations:OpacityAnimation
                        From="0"
                        To="1"
                        Duration="0:0:0.3" />
                    <animations:ScaleAnimation
                        From="0.5"
                        To="1"
                        Duration="0:0:0.3" />
                </animations:Implicit.ShowAnimations>
                <animations:Implicit.HideAnimations>
                    <animations:OpacityAnimation
                        From="1"
                        To="0"
                        Duration="0:0:0.2" />
                    <animations:ScaleAnimation
                        From="1"
                        To="0.5"
                        Duration="0:0:0.2" />
                </animations:Implicit.HideAnimations>
                <Viewbox
                    Width="16"
                    Height="16"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch">
                    <muxc:AnimatedIcon>
                        <animatedVisuals:AnimatedBackVisualSource />
                        <muxc:AnimatedIcon.FallbackIconSource>
                            <muxc:SymbolIconSource Symbol="Back" />
                        </muxc:AnimatedIcon.FallbackIconSource>
                    </muxc:AnimatedIcon>
                </Viewbox>
            </Button>

            <Button
                x:Name="MenuButton"
                Style="{StaticResource TitleBarButtonStyle}"
                Grid.Column="1"
                Padding="6,0,0,0"
                Click="OnMenuButtonClick"
                TabIndex="3"
                ToolTipService.ToolTip="{loc:Locale Name=Menu}"
                Visibility="{x:Bind ViewModel.IsShowMenuButton, Mode=OneWay}">
                <animations:Implicit.ShowAnimations>
                    <animations:OpacityAnimation
                        From="0"
                        To="1"
                        Duration="0:0:0.3" />
                    <animations:ScaleAnimation
                        From="0.5"
                        To="1"
                        Duration="0:0:0.3" />
                </animations:Implicit.ShowAnimations>
                <animations:Implicit.HideAnimations>
                    <animations:OpacityAnimation
                        From="1"
                        To="0"
                        Duration="0:0:0.2" />
                    <animations:ScaleAnimation
                        From="1"
                        To="0.5"
                        Duration="0:0:0.2" />
                </animations:Implicit.HideAnimations>
                <Viewbox
                    Width="16"
                    Height="16"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch">
                    <muxc:AnimatedIcon>
                        <animatedVisuals:AnimatedGlobalNavigationButtonVisualSource />
                        <muxc:AnimatedIcon.FallbackIconSource>
                            <muxc:SymbolIconSource Symbol="GlobalNavigationButton" />
                        </muxc:AnimatedIcon.FallbackIconSource>
                    </muxc:AnimatedIcon>
                </Viewbox>
            </Button>

            <Button
                x:Name="RecordsButton"
                Style="{StaticResource TitleBarButtonStyle}"
                Grid.Column="2"
                Padding="6,0,0,0"
                TabIndex="3"
                ToolTipService.ToolTip="{loc:Locale Name=ViewHistory}"
                Visibility="{x:Bind _recordViewModel.IsShowPlayRecordButton, Mode=OneWay}">
                <animations:Implicit.ShowAnimations>
                    <animations:OpacityAnimation
                        From="0"
                        To="1"
                        Duration="0:0:0.3" />
                    <animations:ScaleAnimation
                        From="0.5"
                        To="1"
                        Duration="0:0:0.3" />
                </animations:Implicit.ShowAnimations>
                <animations:Implicit.HideAnimations>
                    <animations:OpacityAnimation
                        From="1"
                        To="0"
                        Duration="0:0:0.2" />
                    <animations:ScaleAnimation
                        From="1"
                        To="0.5"
                        Duration="0:0:0.2" />
                </animations:Implicit.HideAnimations>
                <Viewbox
                    Width="16"
                    Height="16"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch">
                    <uwp:RegularFluentIcon Symbol="History16" />
                </Viewbox>
                <Button.Flyout>
                    <Flyout x:Name="RecordsFlyout" ShouldConstrainToRootBounds="False">
                        <Flyout.FlyoutPresenterStyle>
                            <Style BasedOn="{StaticResource DefaultFlyoutPresenterStyle}" TargetType="FlyoutPresenter">
                                <Setter Property="Padding" Value="12,8" />
                            </Style>
                        </Flyout.FlyoutPresenterStyle>
                        <StackPanel Spacing="8">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <TextBlock
                                    Style="{StaticResource CaptionTextBlockStyle}"
                                    VerticalAlignment="Center"
                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                    Text="{loc:Locale Name=ViewHistory}" />
                                <HyperlinkButton
                                    Grid.Column="1"
                                    Padding="4"
                                    VerticalAlignment="Center"
                                    Click="OnClearRecordsButtonClick"
                                    Command="{x:Bind _recordViewModel.ClearPlayRecordCommand}"
                                    Content="{loc:Locale Name=Clear}"
                                    FontSize="12" />
                            </Grid>
                            <ListView
                                MaxHeight="200"
                                Padding="-4,0"
                                HorizontalAlignment="Stretch"
                                IsItemClickEnabled="True"
                                ItemClick="OnPlayRecordItemClick"
                                ItemsSource="{x:Bind _recordViewModel.PlayRecords}"
                                SelectionMode="None">
                                <ListView.ItemContainerStyle>
                                    <Style BasedOn="{StaticResource DefaultListViewItemStyle}" TargetType="ListViewItem">
                                        <Setter Property="Padding" Value="12,8" />
                                    </Style>
                                </ListView.ItemContainerStyle>
                                <ListView.ItemTemplate>
                                    <DataTemplate x:DataType="local1:PlayRecord">
                                        <Grid ColumnSpacing="8">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition />
                                                <ColumnDefinition Width="Auto" />
                                            </Grid.ColumnDefinitions>
                                            <local:CommonImageEx
                                                Width="60"
                                                Height="40"
                                                VerticalAlignment="Center"
                                                CornerRadius="{StaticResource ControlCornerRadius}"
                                                DecodePixelWidth="120"
                                                ImageUrl="{x:Bind Identifier.Cover.Uri}"
                                                PlaceholderSource="ms-appx:///Assets/img_holder_rect.png" />
                                            <TextBlock
                                                Style="{StaticResource CaptionTextBlockStyle}"
                                                Grid.Column="1"
                                                MaxWidth="200"
                                                VerticalAlignment="Center"
                                                MaxLines="2"
                                                Text="{x:Bind Identifier.Title}"
                                                TextTrimming="CharacterEllipsis"
                                                TextWrapping="Wrap"
                                                ToolTipService.ToolTip="{x:Bind Identifier.Title}" />
                                            <Button
                                                Grid.Column="2"
                                                Padding="4"
                                                VerticalAlignment="Center"
                                                Click="OnRemoveRecordButtonClick">
                                                <uwp:RegularFluentIcon FontSize="10" Symbol="Dismiss16" />
                                            </Button>
                                        </Grid>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>
                        </StackPanel>
                    </Flyout>
                </Button.Flyout>
            </Button>

            <StackPanel
                Grid.Column="3"
                Margin="16,0,12,0"
                VerticalAlignment="Center"
                IsHitTestVisible="False"
                Orientation="Horizontal"
                Spacing="16">
                <Image
                    Width="16"
                    Height="16"
                    Source="ms-appx:///Assets/Bili_rgba_25.png" />
                <TextBlock
                    x:Name="AppNameBlock"
                    Style="{StaticResource CaptionTextBlockStyle}"
                    VerticalAlignment="Center"
                    Text="{loc:Locale Name=AppName}" />
            </StackPanel>

            <Grid
                Grid.Column="4"
                MaxWidth="520"
                VerticalAlignment="Center">
                <local:SearchSuggestBox x:Name="SearchBox" TabIndex="3" />
            </Grid>

            <local:AccountAvatar
                x:Name="UserAvatar"
                Grid.Column="5"
                Width="28"
                Height="28"
                Margin="12,0"
                VerticalAlignment="Center"
                TabIndex="4" />
        </Grid>
    </Grid>

</local:AppTitleBarBase>
