<controls:ConstrainedBox
    x:Class="Pixeval.Controls.IllustratorItem"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:fluent="using:FluentIcons.WinUI"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:local="using:Pixeval.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    AspectRatio="15:8"
    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
    mc:Ignorable="d">
    <!--  图片长宽均为5，故为(3*5):(3+5)  -->
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <controls:ConstrainedBox Grid.Row="0" AspectRatio="3:1">
            <Grid CornerRadius="{StaticResource ControlTopCornerRadius}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image
                    Grid.Column="0"
                    Source="{x:Bind ViewModel.BannerSource0, Mode=OneWay}"
                    Stretch="UniformToFill" />
                <Image
                    Grid.Column="1"
                    Source="{x:Bind ViewModel.BannerSource1, Mode=OneWay}"
                    Stretch="UniformToFill" />
                <Image
                    Grid.Column="2"
                    Source="{x:Bind ViewModel.BannerSource2, Mode=OneWay}"
                    Stretch="UniformToFill" />
            </Grid>
        </controls:ConstrainedBox>
        <StackPanel
            Grid.Row="1"
            Margin="105,0,15,0"
            Spacing="5">
            <TextBlock
                Margin="0,5,0,0"
                Style="{StaticResource SubtitleTextBlockStyle}"
                Text="{x:Bind ViewModel.Username, Mode=OneWay}"
                TextTrimming="CharacterEllipsis"
                TextWrapping="NoWrap" />
            <StackPanel Orientation="Horizontal" Spacing="5">
                <ContentControl
                    VerticalAlignment="Center"
                    Content="{fluent:SymbolIcon Symbol=Guest,
                                                FontSize=12}"
                    Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                <TextBlock
                    VerticalAlignment="Center"
                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                    Style="{StaticResource CaptionStrongTextBlockStyle}"
                    Text="{x:Bind ViewModel.UserId, Mode=OneWay}" />
                <local:PixevalBadge
                    Mode="Following"
                    UseSmall="True"
                    Visibility="{x:Bind local:C.ToVisibility(ViewModel.IsFollowed), Mode=OneWay}" />
            </StackPanel>
        </StackPanel>
        <Button
            x:Name="AvatarButton"
            Grid.Row="0"
            Grid.RowSpan="2"
            Width="84"
            Height="84"
            Margin="10,0,0,15"
            Padding="0"
            HorizontalAlignment="Left"
            VerticalAlignment="Bottom"
            Background="Transparent"
            CenterPoint="42,42,0"
            CornerRadius="42"
            PointerExited="RestoreAvatarButton"
            Translation="0,0,30">
            <Button.TranslationTransition>
                <Vector3Transition />
            </Button.TranslationTransition>
            <Button.RotationTransition>
                <ScalarTransition />
            </Button.RotationTransition>
            <Button.ScaleTransition>
                <Vector3Transition />
            </Button.ScaleTransition>
            <Button.Shadow>
                <ThemeShadow />
            </Button.Shadow>
            <Border
                Width="82"
                Height="82"
                CornerRadius="40"
                Tapped="AvatarButton_OnTapped">
                <PersonPicture
                    Width="80"
                    Height="80"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    BorderBrush="{x:Bind ViewModel.AvatarBorderBrush, Mode=OneWay}"
                    BorderThickness="2"
                    ProfilePicture="{x:Bind ViewModel.AvatarSource, Mode=OneWay}" />
            </Border>
            <interactivity:Interaction.Behaviors>
                <interactivity:EventTriggerBehavior EventName="PointerEntered">
                    <interactivity:ChangePropertyAction
                        PropertyName="Scale"
                        TargetObject="{x:Bind AvatarButton}"
                        Value="{x:Bind local:IllustratorItem._ZoomedScale}" />
                    <interactivity:ChangePropertyAction
                        PropertyName="Translation"
                        TargetObject="{x:Bind AvatarButton}"
                        Value="{x:Bind local:IllustratorItem._ElevatedTranslation}" />
                    <interactivity:ChangePropertyAction
                        PropertyName="Rotation"
                        TargetObject="{x:Bind AvatarButton}"
                        Value="{x:Bind local:IllustratorItem.RotatedRotation}" />
                </interactivity:EventTriggerBehavior>
            </interactivity:Interaction.Behaviors>
            <Button.Flyout>
                <MenuFlyout Closed="RestoreAvatarButton">
                    <MenuFlyoutItem Command="{x:Bind ViewModel.FollowCommand, Mode=OneWay}" />
                    <MenuFlyoutSeparator />
                    <MenuFlyoutItem Command="{x:Bind ViewModel.OpenInWebBrowserCommand, Mode=OneWay}" />
                    <MenuFlyoutItem Command="{x:Bind ViewModel.GenerateWebLinkCommand, Mode=OneWay}" CommandParameter="{x:Bind}" />
                    <MenuFlyoutItem Command="{x:Bind ViewModel.GenerateLinkCommand, Mode=OneWay}" CommandParameter="{x:Bind}" />
                    <MenuFlyoutSeparator />
                    <MenuFlyoutItem Command="{x:Bind ViewModel.ShowQrCodeCommand, Mode=OneWay}" CommandParameter="{x:Bind QrCodeTeachingTip}" />
                    <MenuFlyoutItem Command="{x:Bind ViewModel.ShowPixEzQrCodeCommand, Mode=OneWay}" CommandParameter="{x:Bind QrCodeTeachingTip}" />
                </MenuFlyout>
            </Button.Flyout>
        </Button>
    </Grid>
</controls:ConstrainedBox>
