<local:AccountAvatarBase
    x:Class="Bili.App.Controls.AccountAvatar"
    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:ext="using:Bili.App.Resources.Extension"
    xmlns:icons="using:Richasy.FluentIcon.Uwp"
    xmlns:loc="using:Bili.App.Resources.Extension"
    xmlns:local="using:Bili.App.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    d:DesignHeight="300"
    d:DesignWidth="400"
    IsTabStop="False"
    mc:Ignorable="d">

    <UserControl.Resources>
        <Flyout
            x:Key="AvatarFlyout"
            FlyoutPresenterStyle="{StaticResource ThinPaddingFlyoutPresenterStyle}"
            Opened="OnFlyoutOpened"
            Placement="Bottom">
            <Grid TabFocusNavigation="Local">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <local:AccountPanel
                    MinWidth="280"
                    IsTabStop="False"
                    RequestCloseFlyout="OnRequestCloseFlyout" />
                <StackPanel
                    Grid.Row="1"
                    Padding="0,4,0,0"
                    BorderBrush="{ThemeResource ControlStrokeColorDefaultBrush}"
                    BorderThickness="0,1,0,0"
                    Spacing="4"
                    TabFocusNavigation="Local"
                    XYFocusKeyboardNavigation="Enabled">
                    <StackPanel.Resources>
                        <Style BasedOn="{StaticResource DefaultButtonStyle}" TargetType="Button">
                            <Setter Property="HorizontalAlignment" Value="Stretch" />
                            <Setter Property="HorizontalContentAlignment" Value="Left" />
                            <Setter Property="Background" Value="Transparent" />
                            <Setter Property="BorderThickness" Value="0" />
                            <Setter Property="Padding" Value="12,8" />
                        </Style>
                        <Style TargetType="local:IconTextBlock">
                            <Setter Property="Spacing" Value="12" />
                            <Setter Property="IconFontSize" Value="16" />
                        </Style>
                    </StackPanel.Resources>
                    <Button Click="OnNavigateToMyHomePageButtonClickAsync">
                        <local:IconTextBlock Symbol="Globe16" Text="{loc:Locale Name=MyWebPage}" />
                    </Button>
                    <Button
                        HorizontalContentAlignment="Stretch"
                        ext:NavigationExtension.PageId="Message"
                        Click="OnNavigateButtonClick">
                        <Grid ColumnSpacing="12">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <local:IconTextBlock
                                VerticalAlignment="Center"
                                Symbol="Chat16"
                                Text="{loc:Locale Name=Message}" />
                            <Border
                                Grid.Column="1"
                                Padding="4"
                                VerticalAlignment="Center"
                                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                CornerRadius="2"
                                Visibility="{x:Bind ViewModel.IsShowUnreadMessage, Mode=OneWay}">
                                <TextBlock
                                    FontSize="10"
                                    Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
                                    Text="{x:Bind ViewModel.UnreadInformation.Total, Mode=OneWay}" />
                            </Border>
                        </Grid>
                    </Button>
                    <Button ext:NavigationExtension.PageId="Favorite" Click="OnNavigateButtonClick">
                        <local:IconTextBlock Symbol="StarLineHorizontal320" Text="{loc:Locale Name=MyFavorite}" />
                    </Button>
                    <Button ext:NavigationExtension.PageId="ViewLater" Click="OnNavigateButtonClick">
                        <local:IconTextBlock Symbol="CalendarClock16" Text="{loc:Locale Name=ViewLater}" />
                    </Button>
                    <Button ext:NavigationExtension.PageId="ViewHistory" Click="OnNavigateButtonClick">
                        <local:IconTextBlock Symbol="History20" Text="{loc:Locale Name=ViewHistory}" />
                    </Button>
                    <StackPanel
                        Height="1"
                        HorizontalAlignment="Stretch"
                        Background="{ThemeResource ControlStrokeColorDefaultBrush}" />
                    <Button Click="OnSignOutButtonClick" Command="{x:Bind ViewModel.SignOutCommand}">
                        <local:IconTextBlock
                            Foreground="{ThemeResource SystemFillColorCriticalBrush}"
                            Symbol="SignOut20"
                            Text="{loc:Locale Name=SignOut}" />
                    </Button>
                </StackPanel>
            </Grid>
        </Flyout>
    </UserControl.Resources>

    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="Common">
                <VisualState x:Name="NormalState" />
                <VisualState x:Name="LoadingState">
                    <VisualState.Setters>
                        <Setter Target="UserAvatar.Visibility" Value="Collapsed" />
                        <Setter Target="LoadingContainer.Visibility" Value="Visible" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <ToolTipService.ToolTip>
            <ToolTip Content="{x:Bind ViewModel.TipText, Mode=OneWay}" IsEnabled="{x:Bind ViewModel.TipText, Mode=OneWay, Converter={StaticResource ObjectToBoolConverter}}" />
        </ToolTipService.ToolTip>
        <local:UserAvatar
            x:Name="UserAvatar"
            AutomationProperties.Name="{x:Bind ViewModel.TipText, Mode=OneWay}"
            Width="{x:Bind Width, Mode=OneWay}"
            Height="{x:Bind Height, Mode=OneWay}"
            Avatar="{x:Bind ViewModel.Avatar, Mode=OneWay}"
            Click="OnUserAvatarClick"
            FlyoutBase.AttachedFlyout="{StaticResource AvatarFlyout}"
            IsTabStop="True"
            IsTapEnabled="True"
            UserName="{x:Bind ViewModel.DisplayName, Mode=OneWay}" />
        <Ellipse
            Width="8"
            Height="8"
            HorizontalAlignment="Right"
            VerticalAlignment="Top"
            Fill="{ThemeResource SystemFillColorCritical}"
            Visibility="{x:Bind ViewModel.IsShowUnreadMessage, Mode=OneWay}" />
        <Viewbox x:Name="LoadingContainer" Visibility="Collapsed">
            <muxc:ProgressRing x:Name="LoadingRing" Style="{StaticResource PageProgressRingStyle}" />
        </Viewbox>
    </Grid>
</local:AccountAvatarBase>
