<UserControl
    x:Class="Bili.App.Controls.Player.InteractionChoicePanel"
    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: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"
    xmlns:player="using:Bili.Models.Data.Player"
    d:DesignHeight="300"
    d:DesignWidth="400"
    mc:Ignorable="d">

    <Grid Visibility="{x:Bind ViewModel.IsShowInteractionChoices, Mode=OneWay}">
        <muxc:ItemsRepeater
            x:Name="ChoiceRepeater"
            ItemsSource="{x:Bind ViewModel.InteractionViewModel.Choices}"
            Visibility="{x:Bind ViewModel.IsInteractionEnd, Mode=OneWay, Converter={StaticResource BoolToVisibilityReverseConverter}}">
            <muxc:ItemsRepeater.Layout>
                <muxc:UniformGridLayout
                    ItemsJustification="Center"
                    MinColumnSpacing="12"
                    MinItemHeight="48"
                    MinItemWidth="280"
                    MinRowSpacing="12" />
            </muxc:ItemsRepeater.Layout>
            <muxc:ItemsRepeater.ItemTemplate>
                <DataTemplate x:DataType="player:InteractionInformation">
                    <local:CardPanel
                        Background="Transparent"
                        Click="OnChoiceClick"
                        DataContext="{x:Bind}">
                        <Grid
                            Padding="12,0"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Background="{ThemeResource MediaTransportControlsPanelBackground}"
                            CornerRadius="{StaticResource ControlCornerRadius}">
                            <TextBlock
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                FontSize="20"
                                FontWeight="Bold"
                                Text="{x:Bind Text}"
                                TextTrimming="CharacterEllipsis"
                                ToolTipService.ToolTip="{x:Bind Text}" />
                        </Grid>
                    </local:CardPanel>
                </DataTemplate>
            </muxc:ItemsRepeater.ItemTemplate>
        </muxc:ItemsRepeater>
        <Grid
            x:Name="EndContainer"
            Padding="20,12"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Background="{ThemeResource MediaTransportControlsPanelBackground}"
            CornerRadius="{StaticResource OverlayCornerRadius}"
            Visibility="{x:Bind ViewModel.IsInteractionEnd, Mode=OneWay}">
            <TextBlock
                MaxWidth="300"
                HorizontalAlignment="Center"
                FontSize="16"
                Text="{loc:Locale Name=InteractionEnd}"
                TextAlignment="Center"
                TextWrapping="Wrap" />
        </Grid>
    </Grid>
</UserControl>
