<UserControl x:Class="HandyControlDemo.UserControl.ChatBox"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:hc="https://handyorg.github.io/handycontrol"
             xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs"
             xmlns:ex="clr-namespace:HandyControlDemo.Tools.Extension"
             mc:Ignorable="d" 
             Height="486"
             Effect="{StaticResource EffectShadow5}"
             Background="{DynamicResource RegionBrush}"
             DataContext="{Binding ChatBox,Source={StaticResource Locator}}"
             Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <ListBox Name="ListBoxChat" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.CanContentScroll="False" Background="Transparent" BorderThickness="0" Style="{StaticResource StackPanelVerticalListBox}" ItemsSource="{Binding ChatInfos}">
            <hc:Interaction.Triggers>
                <hc:RoutedEventTrigger RoutedEvent="hc:ChatBubble.Selected">
                    <hc:EventToCommand Command="{Binding ReadMessageCmd}" PassEventArgsToCommand="True" />
                </hc:RoutedEventTrigger>
            </hc:Interaction.Triggers>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <hc:ChatBubble MaxWidth="300" Role="{Binding Role}" Type="{Binding Type}" Content="{Binding Message}" Tag="{Binding}"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Border Background="{DynamicResource DarkDefaultBrush}" Grid.Row="1">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <ToggleButton Name="ToggleButtonAudio" hc:BorderElement.CornerRadius="15" Width="30" Height="30" Padding="7" Margin="6" hc:IconSwitchElement.Geometry="{StaticResource AudioGeometry}" hc:IconSwitchElement.GeometrySelected="{StaticResource KeyboardGeometry}" Style="{StaticResource ToggleButtonIcon}"/>
                <Button Command="{Binding OpenImageCmd}" Grid.Column="2" Margin="6,0,6,0" hc:BorderElement.CornerRadius="15" Width="30" Height="30" Padding="7" hc:IconElement.Geometry="{StaticResource ImageGeometry}"/>
                <TextBox VerticalAlignment="Center" Grid.Column="1" Text="{Binding ChatString,UpdateSourceTrigger=PropertyChanged}" Visibility="{Binding IsChecked,ElementName=ToggleButtonAudio,Converter={StaticResource Boolean2VisibilityReConverter}}">
                    <hc:Interaction.Triggers>
                        <hc:EventTrigger EventName="KeyDown">
                            <hc:EventToCommand Command="{Binding SendStringCmd}" PassEventArgsToCommand="True" />
                        </hc:EventTrigger>
                    </hc:Interaction.Triggers>
                </TextBox>
                <Button Grid.Column="1" Visibility="{Binding IsChecked,ElementName=ToggleButtonAudio,Converter={StaticResource Boolean2VisibilityConverter}}" Content="{ex:Lang Key={x:Static langs:LangKeys.PushToTalk}}" HorizontalAlignment="Stretch">
                    <hc:Interaction.Triggers>
                        <hc:EventTrigger EventName="PreviewMouseLeftButtonDown">
                            <hc:EventToCommand Command="{Binding StartRecordCmd}"/>
                        </hc:EventTrigger>
                        <hc:EventTrigger EventName="PreviewMouseLeftButtonUp">
                            <hc:EventToCommand Command="{Binding StopRecordCmd}"/>
                        </hc:EventTrigger>
                    </hc:Interaction.Triggers>
                </Button>
            </Grid>
        </Border>
    </Grid>
</UserControl>
