<UserControl x:Class="ChatController.ChatMainControl"
             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:local="clr-namespace:ChatController"
             mc:Ignorable="d" x:Name="ChatControlling"
             d:DesignHeight="300" d:DesignWidth="600" 
             SnapsToDevicePixels="True" >
  <UserControl.Resources>
      <SolidColorBrush x:Key="DarkBackColor" Color="#FFA9B8C2" />
      <SolidColorBrush x:Key="LightBackColor" Color="#E8EFF4" />
      <SolidColorBrush x:Key="ButtonForeground" Color="#ff5e00" />
      
      
    <Style x:Key="MainNavigationScrollViewer" TargetType="{x:Type ScrollViewer}">
          <Setter Property="OverridesDefaultStyle" Value="True"/>
          <Setter Property="Template">
              <Setter.Value>
                  <ControlTemplate TargetType="{x:Type ScrollViewer}">
                      <Grid>
                          <Grid.ColumnDefinitions>
                              <ColumnDefinition/>
                              <ColumnDefinition Width="Auto"/>
                          </Grid.ColumnDefinitions>
                          <Grid.RowDefinitions>
                              <RowDefinition/>
                              <RowDefinition Height="Auto"/>
                          </Grid.RowDefinitions>

                          <ScrollContentPresenter Grid.Column="0"/>

                          <ScrollBar Name="PART_VerticalScrollBar"
                                     Value="{TemplateBinding VerticalOffset}"
                                     Maximum="{TemplateBinding ScrollableHeight}"
                                     ViewportSize="{TemplateBinding ViewportHeight}"
                                     Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                     Grid.Column="1"/>
                          <ScrollBar Name="PART_HorizontalScrollBar"
                                     Orientation="Horizontal"
                                     Grid.Row="1"
                                     Grid.Column="0"
                                     Value="{TemplateBinding HorizontalOffset}"
                                     Maximum="{TemplateBinding ScrollableWidth}"
                                     ViewportSize="{TemplateBinding ViewportWidth}"
                                     Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>

                      </Grid>
                  </ControlTemplate>
              </Setter.Value>
          </Setter>
      </Style>
      <ControlTemplate x:Key="ContactListBoxTemplate" TargetType="{x:Type ListBox}">
          <Border x:Name="Bd" SnapsToDevicePixels="True" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
              <ScrollViewer Focusable="False" Padding="{TemplateBinding Padding}" Style="{StaticResource MainNavigationScrollViewer}" HorizontalScrollBarVisibility="Disabled">
                  <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
              </ScrollViewer>
          </Border>
      </ControlTemplate>
      <Style x:Key="ContactListStyle" TargetType="{x:Type ListBox}">
          <Setter Property="Template" Value="{StaticResource ContactListBoxTemplate}" />
      </Style>
    
    <Style x:Key="ContactListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
      <Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorLevel=1, AncestorType={x:Type ItemsControl}, Mode=FindAncestor}}" />
      <Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorLevel=1, AncestorType={x:Type ItemsControl}, Mode=FindAncestor}}" />
      <Setter Property="Margin" Value="0,0,0,0" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate>
            <Grid>
              <Border x:Name="ItemBorder" MinHeight="20" Background="White" BorderThickness="0,0,0,1" BorderBrush="{StaticResource LightBackColor}">

              </Border>
              <Border x:Name="ItemContent"  MinHeight="20">
                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5,3,5,3" OpacityMask="{x:Null}" SnapsToDevicePixels="True">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="7"/>
                        <ColumnDefinition Width="35"/>
                        <ColumnDefinition Width="7"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="7"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>


                    <Ellipse Grid.Column="1" Width='32' Height='32' RenderOptions.BitmapScalingMode="HighQuality">
                        <Ellipse.Fill>
                            <ImageBrush ImageSource='{Binding Image}'  Stretch='Fill' RenderOptions.BitmapScalingMode="HighQuality" />
                        </Ellipse.Fill>
                    </Ellipse>


                    <Grid Grid.Column="3"  >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock Text="{Binding Path=Name, FallbackValue=FirstName}" Foreground="{Binding Path=KontaktChatColor}" FontSize="16" Margin="1" />
                        
                        <TextBlock Text="{Binding Path=ReceiveMs}" Grid.Row="1" FontSize="14"  Foreground="{Binding Path=Color}" Margin="1" />
                        
                    </Grid>
                </Grid>

              </Border>
            </Grid>

            <ControlTemplate.Triggers>
              <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" TargetName="ItemBorder" Value="{StaticResource DarkBackColor}" />
                  
              </Trigger>

              <Trigger Property="ListBoxItem.IsSelected" Value="True">
                <Setter Property="Background" TargetName="ItemBorder" Value="{StaticResource DarkBackColor}" />
                  
              </Trigger>
              <MultiTrigger>
                <MultiTrigger.Conditions>
                  <Condition Property="ListBoxItem.IsSelected" Value="True" />
                  <Condition Property="Selector.IsSelectionActive" Value="False" />
                </MultiTrigger.Conditions>
                  <Setter Property="Background" TargetName="ItemBorder" Value="{StaticResource DarkBackColor}" />

              </MultiTrigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>

        </Setter.Value>
      </Setter>
    </Style>
      <ControlTemplate x:Key="SearchTextBoxTemplate" TargetType="{x:Type TextBox}">
          <Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="2,2,2,2">
              <Grid>
                  <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="Auto" />
                      <ColumnDefinition />
                  </Grid.ColumnDefinitions>
                  <ScrollViewer Grid.Column="1" x:Name="PART_ContentHost" Margin="0,2,0,0" />
                  <Canvas Grid.Column="0" Width="14" Margin="3,4,2,2">
                      <Ellipse Stroke="#FFA0A0A0" Height="10" Width="10" StrokeThickness="2" Fill="{x:Null}" />
                      <Line Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FFA0A0A0" Canvas.Left="6" Canvas.Top="7.4" Y1="0" Y2="5" StrokeThickness="3" X2="4" />


                  </Canvas>

              </Grid>

          </Border>
          <ControlTemplate.Triggers>
              <Trigger Property="IsEnabled" Value="False">
                  <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
                  <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
              </Trigger>
          </ControlTemplate.Triggers>
      </ControlTemplate>
  </UserControl.Resources>
    <Grid>
      
      <Border x:Name="rootBorder" Background="{StaticResource DarkBackColor}" Padding="0" Margin="0" BorderThickness="0">
        <!--Style="{DynamicResource MainContentGroupBoxWithoutMaximizeBtnStyle}"-->
        <Grid   >
          <!--Background="{StaticResource ObjectEditBackgroundBrush}"-->
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250" />
            <ColumnDefinition Width="*"/>
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
          </Grid.RowDefinitions>


          <!-- ##########################  Linkes panel ########################### -->
          <Grid Grid.Column="0" Grid.Row="0" >
            <Grid.RowDefinitions>
              <RowDefinition  Height="50"/>
              <RowDefinition  Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Grid Grid.Column="0" Grid.Row="0" >
              <Grid.RowDefinitions>
                <RowDefinition  Height="*"/>
              </Grid.RowDefinitions>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
              </Grid.ColumnDefinitions>


              <StackPanel x:Name="ReloadGruppen" Grid.Row="0" Grid.Column="1" Height="25" Width="25" HorizontalAlignment="Right" Orientation="Horizontal" VerticalAlignment="Center"  Visibility="Visible" Margin="0,0,3,0">
                <Button Background="Transparent" HorizontalAlignment="Right"  BorderThickness="0" VerticalAlignment="Center" VerticalContentAlignment="Center"  Width="25" Height="25" Click="ButtonReloadGruppen_OnClick" >
                  <Image ToolTip="Gruppen Aktualisieren" Margin="0,0,0,0" Width="20" Height="20" Source="pack://application:,,,/ChatController;component/Ressourcen/SymbolRefresh32.png" RenderOptions.BitmapScalingMode="HighQuality" HorizontalAlignment="Center" />
                </Button>
              </StackPanel>

             
              <TextBox x:Name="Suche" Height="22" HorizontalAlignment="Stretch" Margin="5" TabIndex="0" Template="{DynamicResource SearchTextBoxTemplate}" BorderThickness="0,0,0,0" TextChanged="Suche_OnTextChanged" />
              
            </Grid>


            <Grid Grid.Column="0" Grid.Row="1"  >
              <Grid.RowDefinitions>
                <RowDefinition  Height="*"/>
              </Grid.RowDefinitions>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
              </Grid.ColumnDefinitions>
              
              <!--###################################### Liste aller User ###################################################### -->
              <ListView x:Name="Clientlist" HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="0"   VerticalAlignment="Stretch" BorderThickness="0" Background="White"
                        ItemContainerStyle="{StaticResource ContactListBoxItemStyle}" SelectionChanged="Clientlist_OnSelectionChanged" Style="{StaticResource ContactListStyle}">
                
              </ListView>
            </Grid>
          </Grid>



          <!-- #######################  Rechtes Panel ################################-->
          <Grid Grid.Column="1" Grid.Row="0" x:Name="GridRechts">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
              <RowDefinition Height="50"/>
              <RowDefinition Height="*" />
              <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>         
            
            
            <ListBox x:Name="AktChatUserList"  HorizontalAlignment="Left" Margin="0,0,0,0" Grid.Row="0" Background="Transparent"  BorderBrush="Transparent" VerticalAlignment="Bottom"  ItemTemplate="{DynamicResource DataTemplate2}" MouseDoubleClick="AktChatUser_OnMouseDoubleClick" >           
              <ListBox.Resources>
                <DataTemplate x:Key="DataTemplate2">
                  <Grid>
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="50"/>
                      <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                      <RowDefinition Height="10*" />
                    </Grid.RowDefinitions>
                   
                    <Ellipse Width='40' Height='40' VerticalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality">
                      <Ellipse.Fill >
                        <ImageBrush ImageSource='{Binding Image}'  Stretch='Fill'/>
                      </Ellipse.Fill>
                    </Ellipse>
                   
                    <TextBlock Grid.Column="1" Margin="8" Text="{Binding Path=Name, FallbackValue=FirstName}" FontSize="16" />
                  </Grid>
                </DataTemplate>
              </ListBox.Resources>
            </ListBox>


            <!--#####  Chat Bereich ####-->
            <ListBox x:Name="ChatListBox" HorizontalAlignment="Stretch"  ScrollViewer.CanContentScroll="False" VerticalAlignment="Stretch" Grid.Row="1" VirtualizingStackPanel.IsVirtualizing="True" BorderThickness="0"
                     VirtualizingStackPanel.VirtualizationMode="Recycling" SelectionMode="Extended" MouseDoubleClick="Chat_OnMouseDoubleClick" ScrollViewer.ScrollChanged="Chat_OnScrollChanged" Background="{StaticResource LightBackColor}"
                      ContextMenuOpening="Chat_OnContextMenuOpening" Padding="20">
              <!--MouseRightButtonDown="OnRightClickEvent"-->
              <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                  <Setter Property="HorizontalAlignment" Value="{Binding Posi}" />
                </Style>
              </ListBox.ItemContainerStyle>
              <ListBox.ItemTemplate>
                <DataTemplate>
                  <StackPanel>

                    <Border BorderBrush="{Binding ChatColor}" BorderThickness="1,1,1,1" CornerRadius="8,8,8,8" Background="{Binding ChatColor}" >
                      <DockPanel MinHeight="15" Margin="5" LastChildFill="True" Background="{Binding ChatColor}"  >

                        <!-- Message Bereich  -->
                        <StackPanel DockPanel.Dock="Bottom" Visibility="{Binding ChatVisibility}" >
                          <TextBlock  VerticalAlignment="Center"  Text="{Binding UserMessage}" MinWidth="0" MaxWidth="500" TextWrapping="Wrap" FontSize="14"/>
                         <!--  <RichTextBox VerticalAlignment="Center" IsReadOnly="True"   BorderBrush="Transparent"  Background="Transparent" local:RichTextBoxHelper.DocumentXaml="{Binding UserMessage}" MinWidth="0" MaxWidth="500" />-->
                        </StackPanel>
                        
                        <!-- MEssageBereich mit Url verwaltung -->
                        <StackPanel DockPanel.Dock="Bottom"  Visibility="{Binding HyperlinkVisibility}" >
                          <TextBlock>
                            <Hyperlink  NavigateUri="{Binding UserMessage}" RequestNavigate="Hyperlink_OnRequestNavigate" >
                              <TextBlock  VerticalAlignment="Center" Text="{Binding UserMessage}" MinWidth="0" MaxWidth="500" TextWrapping="Wrap" FontSize="14"/> 
                            </Hyperlink>
                          </TextBlock>
                          <!--  <RichTextBox VerticalAlignment="Center" IsReadOnly="True"   BorderBrush="Transparent"  Background="Transparent" local:RichTextBoxHelper.DocumentXaml="{Binding UserMessage}" MinWidth="0" MaxWidth="500" />-->
                        </StackPanel>

                        
                        <!-- Bild bereich MaxHeight="200" MaxWidth="300" Stretch uniform-->
                        <DockPanel DockPanel.Dock="Bottom" Visibility="{Binding PictureVisibility}" >
                          <StackPanel Orientation="Vertical">
                            <Image  MaxHeight="200" MaxWidth="300" Source="{Binding ImageSources}" x:Name="imgChatMessage" Stretch="None"/>

                            <TextBlock  Text="{Binding UserMessage}" VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="14"/>
                              
                          </StackPanel>
                        </DockPanel>


                        <!-- Image Placeholder -->
                        <DockPanel DockPanel.Dock="Bottom" Visibility="{Binding PicturePlaceHolderVisibility}" >
                          <StackPanel Orientation="Vertical">
                            <Image   Source="pack://application:,,,/ChatController;component/Ressourcen/ClipboardDisabled.png" Stretch="None" />

                            <TextBlock  Text="{Binding UserMessage}" VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="14" />
                          </StackPanel>
                        </DockPanel>


                        <!-- Gif BEreich ??    <MediaElement Source="" ></MediaElement>  villeicht gif erstmal runterladen und dann den pfad ausgeben ?  200
                      <DockPanel DockPanel.Dock="Bottom" Visibility="{Binding GifPictureVisibility}"  >
                        <StackPanel Orientation="Vertical">
                          <MediaElement LoadedBehavior="Play" UnloadedBehavior="Manual" MediaFailed="MediaElement_OnMediaFailed" MediaEnded="MediaElement_OnMediaEnded" Source="{Binding ImageSources}" Stretch="Uniform" MaxHeight="200" MaxWidth="300"   >
                            <MediaElement.OpacityMask>
                              <ImageBrush ImageSource="{Binding ImageSources}"/>
                            </MediaElement.OpacityMask>
                          </MediaElement>
                          
                          <TextBlock  Text="{Binding UserMessage}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </StackPanel>
                      </DockPanel>-->



                        <!--Dokument bereich -->
                        <DockPanel DockPanel.Dock="Bottom" Visibility="{Binding DokumentVisibility}" >
                          <StackPanel Orientation="Vertical">
                              <Image ToolTip="Dokument öffnen" Height="100" Width="150" Source="pack://application:,,,/ChatController;component/Ressourcen/ClipboardDisabled.png" Stretch="Uniform" VerticalAlignment="Center" HorizontalAlignment="Center" />
                              <TextBlock Margin="2,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding UserMessage}" FontSize="14"/>
                            <!-- <Button HorizontalAlignment="Center" VerticalAlignment="Center" Content="Dokument Anzeigen"  Height="25"  Tag="{Binding Dokpfad}" Click="OpenDokument_OnClick " >
                                <Button.Resources>
                                  <Style TargetType="{x:Type Border}">
                                    <Setter Property="CornerRadius" Value="3"/>
                                    <Setter Property="Padding" Value="1,1,1,1" />
                                  </Style>
                                </Button.Resources>
                              </Button>-->
                          </StackPanel>                         
                        </DockPanel>

                        
                        
                        <!--<StackPanel DockPanel.Dock="Left"  Margin="0,0,0,5" >
                          <TextBlock Text="{Binding Username}" FontSize="11" MaxWidth="150" HorizontalAlignment="Left"  TextAlignment="Left" VerticalAlignment="Center" Foreground="{Binding FarbeLinksColor}" />
                        </StackPanel>-->
                          <StackPanel DockPanel.Dock="Left" Margin="0,0,0,0" >
                              <TextBlock Text="{Binding UserTimeStringLeft}"  MaxWidth="350" FontSize="11"  HorizontalAlignment="Left" TextAlignment="Left" VerticalAlignment="Center" Foreground="{Binding FarbeRechtsColor}" />
                          </StackPanel>
                        
                        <StackPanel DockPanel.Dock="Right" Margin="5,0,0,5" >
                          <TextBlock Text="{Binding UserTimeStringRight}"  MaxWidth="350" FontSize="11"  HorizontalAlignment="Right" TextAlignment="Right" VerticalAlignment="Center" Foreground="{Binding FarbeRechtsColor}" />
                        </StackPanel>

                      </DockPanel>
                    </Border>
                  </StackPanel>
                </DataTemplate>
              </ListBox.ItemTemplate>
            </ListBox>


            <Grid Grid.Row="2" Margin="10" >
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
              </Grid.ColumnDefinitions>
              <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
              </Grid.RowDefinitions>

              <Grid Grid.Column="0" MinHeight="25" Margin="0,0,3,0">
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="*"/>
                  <ColumnDefinition Width="30"/>              
                  <ColumnDefinition Width="30"/>
                </Grid.ColumnDefinitions>

                <TextBox  x:Name="Chatbox" HorizontalAlignment="Stretch" Grid.Column="0" Grid.ColumnSpan="3" TextWrapping="Wrap" Text="Nachricht schreiben"  VerticalScrollBarVisibility="Hidden" MaxHeight="200" Visibility="Visible" BorderThickness="0,0,0,0"
                   VerticalContentAlignment="Center" MinHeight="25" Padding="10,0,60,0" ToolTip="Schreiben Sie hier eine Nachricht hinein"  Foreground="DarkGray" VerticalAlignment="Center" GotFocus="Chatbox_OnGotFocus" KeyDown="Chatbox_OnKeyDownHandler">
                  <TextBox.Resources>
                    <Style TargetType="{x:Type Border}">
                      <Setter Property="CornerRadius" Value="2"/>
                      <!-- <Setter Property="Padding" Value="10,0,60,0" />-->
                    </Style>
                  </TextBox.Resources>
                </TextBox>

                <!-- StackPanel Zur test zwecken  Style="{x:Null}"-->
                <StackPanel Grid.Column="1" Grid.ColumnSpan="2" Margin="1" Orientation="Horizontal"> 
                <Button Grid.Column="1" Margin="1,0,0,0" x:Name="MediaButton"  Background="Transparent" Height="25"  Width="28" BorderThickness="0" Padding="0" VerticalAlignment="Bottom" ToolTip="Datei einfügen" Click="MediaButton_OnClick" >
                  <Image Height="22" Width="22" Source='pack://application:,,,/ChatController;component/Ressourcen/paperclip2.png' RenderOptions.BitmapScalingMode="HighQuality" HorizontalAlignment="Center"/>  
                </Button>
                
                <Button Grid.Column="2" Width="28" Height="25"  BorderThickness="0"  Background="Transparent" x:Name="EmojiButton" Margin="2,0,0,0" Padding="0" VerticalAlignment="Bottom" ToolTip="Emoji einfügen" Click="EmojiButton_OnClick">
                  <Image Height="24" Width="24" Source='pack://application:,,,/ChatController;component/Ressourcen/glucklicher.png'  RenderOptions.BitmapScalingMode="HighQuality" HorizontalAlignment="Center" />              
                </Button>
                </StackPanel>

                <!-- Stackpanel zu 12 testZwecken -->
                
              </Grid>

              <Button x:Name="SendButton" Content=" Senden " HorizontalAlignment="Stretch" Margin="2,0,0,0" Grid.Column="2" VerticalAlignment="Bottom" Click="SendButton_OnClick" Background="{StaticResource ButtonForeground}" Height="25" >
                <Button.Resources>
                  <Style TargetType="{x:Type Border}">
                    <Setter Property="CornerRadius" Value="3"/>
                    <Setter Property="Padding" Value="1,1,1,1" />
                  </Style>
                </Button.Resources>
              </Button>

            </Grid>
          </Grid>
        </Grid>
      </Border>
    </Grid>
</UserControl>
