<?xml version="1.0" encoding="utf-8" ?>
<base:LayoutUserControlBase
    x:Class="RodelAgent.UI.Controls.Base.EmojiPanel"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:base="using:Richasy.WinUI.Share.Base"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:RodelAgent.UI.Controls.Base"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:statics="using:RodelAgent.Statics"
    IsTabStop="False"
    mc:Ignorable="d">

    <Grid
        MaxWidth="320"
        MaxHeight="340"
        RowSpacing="12">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <TextBlock
            HorizontalAlignment="Left"
            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
            Style="{StaticResource CaptionTextBlockStyle}"
            Text="Emoji" />
        <ScrollViewer
            Grid.Row="1"
            Margin="-12,0"
            Padding="4,0"
            Style="{StaticResource PageScrollViewerStyle}">
            <Grid>
                <ItemsRepeater x:Name="EmojiRepeater" ItemsSource="{x:Bind _items}">
                    <ItemsRepeater.ItemTemplate>
                        <DataTemplate x:DataType="statics:EmojiItem">
                            <Button
                                x:Name="EmojiButton"
                                Padding="0"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                HorizontalContentAlignment="Center"
                                VerticalContentAlignment="Center"
                                AutomationProperties.Name="{x:Bind Name}"
                                Background="Transparent"
                                BorderThickness="0"
                                Click="OnEmojiButtonClick"
                                DataContext="{x:Bind}"
                                ToolTipService.ToolTip="{x:Bind Name}">
                                <TextBlock
                                    FontFamily="Segoe UI Emoji"
                                    FontSize="22"
                                    Text="{x:Bind ToEmoji()}" />
                            </Button>
                        </DataTemplate>
                    </ItemsRepeater.ItemTemplate>
                    <ItemsRepeater.Layout>
                        <UniformGridLayout
                            ItemsStretch="Fill"
                            MinColumnSpacing="4"
                            MinItemHeight="44"
                            MinItemWidth="44"
                            MinRowSpacing="4" />
                    </ItemsRepeater.Layout>
                </ItemsRepeater>
            </Grid>
        </ScrollViewer>
    </Grid>
</base:LayoutUserControlBase>
