<?xml version="1.0" encoding="utf-8" ?>
<local:PinnerBase
    x:Class="BiliCopilot.UI.Controls.Pinner"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:base="using:Richasy.WinUIKernel.Share.Base"
    xmlns:components="using:BiliCopilot.UI.Controls.Components"
    xmlns:converters="using:BiliCopilot.UI.Converters"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:ext="using:BiliCopilot.UI.Extensions"
    xmlns:ic="using:FluentIcons.WinUI"
    xmlns:local="using:BiliCopilot.UI.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:models="using:BiliCopilot.UI.Models"
    Visibility="{x:Bind ViewModel.IsEmpty, Mode=OneWay, Converter={StaticResource BoolToVisibilityReverseConverter}}"
    mc:Ignorable="d">

    <UserControl.Resources>
        <converters:PinIconConverter x:Key="IconConverter" />
        <DataTemplate x:Key="PinTemplate" x:DataType="models:PinItem">
            <Button
                Padding="16,12"
                HorizontalAlignment="Stretch"
                HorizontalContentAlignment="Stretch"
                Click="OnItemClick"
                DataContext="{x:Bind}">
                <Grid MaxWidth="340" ColumnSpacing="8">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <PersonPicture
                        Width="42"
                        Height="42"
                        VerticalAlignment="Center"
                        ProfilePicture="{x:Bind Cover, Converter={StaticResource BitmapConverter}}" />
                    <base:TrimTextBlock
                        x:Name="TitleBlock"
                        Grid.Column="1"
                        VerticalAlignment="Center"
                        MaxLines="2"
                        Text="{x:Bind Title}" />
                    <ic:SymbolIcon
                        Grid.Column="2"
                        Margin="12,0,0,0"
                        VerticalAlignment="Center"
                        FontSize="16"
                        Foreground="{ThemeResource TextFillColorTertiaryBrush}"
                        Symbol="{x:Bind Type, Converter={StaticResource IconConverter}}" />
                </Grid>
                <Button.ContextFlyout>
                    <MenuFlyout>
                        <MenuFlyoutItem
                            MinWidth="180"
                            Click="OnRemoveItemClick"
                            Text="{ext:Locale Name=UnfixContent}">
                            <MenuFlyoutItem.Icon>
                                <ic:SymbolIcon Foreground="{ThemeResource SystemFillColorCriticalBrush}" Symbol="Delete" />
                            </MenuFlyoutItem.Icon>
                        </MenuFlyoutItem>
                    </MenuFlyout>
                </Button.ContextFlyout>
            </Button>
        </DataTemplate>
    </UserControl.Resources>

    <Button
        Width="32"
        Height="32"
        CornerRadius="14"
        Style="{StaticResource IconButtonStyle}"
        ToolTipService.ToolTip="{ext:Locale Name=FixContent}">
        <ic:SymbolIcon
            FontSize="14"
            IconVariant="Filled"
            Symbol="Pin" />
        <Button.Flyout>
            <Flyout
                x:Name="ItemsFlyout"
                Placement="Bottom"
                ShouldConstrainToRootBounds="False">
                <Flyout.FlyoutPresenterStyle>
                    <Style BasedOn="{StaticResource DefaultFlyoutPresenterStyle}" TargetType="FlyoutPresenter">
                        <Setter Property="Padding" Value="8" />
                    </Style>
                </Flyout.FlyoutPresenterStyle>
                <ItemsRepeater
                    x:Name="Repeater"
                    MinWidth="320"
                    ItemTemplate="{StaticResource PinTemplate}"
                    ItemsSource="{x:Bind ViewModel.Items}">
                    <ItemsRepeater.Layout>
                        <StackLayout Spacing="8" />
                    </ItemsRepeater.Layout>
                </ItemsRepeater>
            </Flyout>
        </Button.Flyout>
    </Button>
</local:PinnerBase>
