﻿<!-- **********************************************************************
* Copyright (C) 2016 by Savoir-faire Linux                                *
* Author: Jäger Nicolas<nicolas.jager@savoirfairelinux.com>               *
* Author: Traczyk Andreas<andreas.traczyk@savoirfairelinux.com>           *
*                                                                         *
* This program is free software; you can redistribute it and/or modify    *
* it under the terms of the GNU General Public License as published by    *
* the Free Software Foundation; either version 3 of the License, or       *
* (at your option) any later version.                                     *
*                                                                         *
* This program is distributed in the hope that it will be useful,         *
* but WITHOUT ANY WARRANTY; without even the implied warranty of          *
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the           *
* GNU General Public License for more details.                            *
*                                                                         *
* You should have received a copy of the GNU General Public License       *
* along with this program.  If not, see <http://www.gnu.org/licenses/> .  *
***********************************************************************-->
<Page x:Class="RingClientUWP.Views.MessageTextPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:core="System.Windows.Interactivity"
      xmlns:ctl="using:RingClientUWP.Controls"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
      xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
      xmlns:local="using:RingClientUWP"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:uc="using:RingClientUWP.UserAndCustomControls"
      xmlns:views="using:RingClientUWP.Views"
      NavigationCacheMode="Enabled"
      mc:Ignorable="d">

    <Page.Resources>
        <Storyboard x:Name="_fadeInMessagesListStoryBoard_">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="_messagesList_"
                                           Storyboard.TargetProperty="Opacity"
                                           Duration="0:0:0.40">
                <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0" />
                <LinearDoubleKeyFrame KeyTime="0:0:0.40" Value="1" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Name="_fadeInMessagesPageInfoStoryBoard_">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="_contactInfoGrid_"
                                           Storyboard.TargetProperty="Opacity"
                                           Duration="0:0:0.40">
                <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0" />
                <LinearDoubleKeyFrame KeyTime="0:0:0.40" Value="1" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Name="_easeUpMessagesListStoryBoard_">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="_messagesListTranslateTransform_"
                                           Storyboard.TargetProperty="Y"
                                           Duration="0:0:0.15">
                <EasingDoubleKeyFrame KeyTime="0" Value="-80" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CubicEase EasingMode="EaseOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <DataTemplate x:Key="ConversationMessageTemplate" x:DataType="local:ConversationMessage">
            <Grid Margin="12,0,20,0" HorizontalAlignment="{x:Bind FromContact, Converter={StaticResource _bubbleHorizontalAlignement_}}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="{x:Bind MessageIndex, Converter={StaticResource _MessageChainBreakToHeight_}, Mode=OneWay}" />
                </Grid.RowDefinitions>
                <!--  avatar, message spikes, and message body  -->
                <Grid Grid.Row="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="40" />
                        <ColumnDefinition Width="10" />
                        <ColumnDefinition Width="2*" />
                        <ColumnDefinition Width="8*" />
                    </Grid.ColumnDefinitions>
                    <!--  avatar  -->
                    <Grid Grid.Column="0"
                          Visibility="{x:Bind MessageIndex, Converter={StaticResource _MessageChainBreakToVisibility_}, ConverterParameter=First}">
                        <Ellipse Width="36"
                                 Height="36"
                                 Canvas.ZIndex="1"
                                 Margin="0,2,0,0"
                                 HorizontalAlignment="Center"
                                 VerticalAlignment="Top"
                                 Visibility="{x:Bind FromContact, Converter={StaticResource _boolToVisibility_}}">
                            <Ellipse.Fill>
                                <ImageBrush x:Name="_contactAvatar_" ImageSource="{x:Bind MessageAvatar, Mode=OneWay}" />
                            </Ellipse.Fill>
                        </Ellipse>
                        <Grid Width="36"
                              Height="36"
                              Canvas.ZIndex="0"
                              Margin="0,2,0,0"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Top"
                              Visibility="{x:Bind MessageIndex, Converter={StaticResource _MessageChainBreakToVisibility_}, ConverterParameter=First}">
                            <Grid Visibility="{x:Bind FromContact, Converter={StaticResource _boolToVisibility_}}">
                                <Ellipse x:Name="_defaultAvatar_" Fill="{x:Bind MessageAvatarColorBrush, Mode=OneWay}" />
                                <TextBlock HorizontalAlignment="Center"
                                           VerticalAlignment="Center"
                                           FontFamily="Arial"
                                           FontSize="21"
                                           Foreground="White"
                                           Text="{x:Bind MessageAvatarInitial, Mode=OneWay}"
                                           TextAlignment="Center" />
                            </Grid>
                        </Grid>
                    </Grid>
                    <!--  left spike  -->
                    <Grid Grid.Column="1" Visibility="{x:Bind MessageIndex, Converter={StaticResource _MessageChainBreakToVisibility_}, ConverterParameter=First}">
                        <Polygon Name="_chatLeftBubbleSpike_"
                                 Fill="{x:Bind FromContact, Converter={StaticResource _bubbleBackground_}}"
                                 Points="10,0,0,5,10,10"
                                 Visibility="{x:Bind FromContact, Converter={StaticResource _boolToVisibility_}}">
                            <Polygon.RenderTransform>
                                <TranslateTransform X="8" Y="15" />
                            </Polygon.RenderTransform>
                        </Polygon>
                    </Grid>
                    <!--  message  -->
                    <Border Grid.Column="3"
                            Width="auto"
                            Height="auto"
                            Margin="5"
                            Padding="10,6,10,6"
                            Background="{x:Bind FromContact, Converter={StaticResource _bubbleBackground_}}"
                            CornerRadius="4">
                        <ContentPresenter>
                            <RichTextBlock x:Name="_msgContent_"
                                           uc:TextBlockExtension.FormattedText="{x:Bind Payload}"
                                           Foreground="#ff303030"
                                           IsTextSelectionEnabled="True"
                                           TextWrapping="Wrap">
                                <Paragraph />
                            </RichTextBlock>
                        </ContentPresenter>
                    </Border>
                    <!--  right spike  -->
                    <Grid Grid.Column="3" Visibility="{x:Bind MessageIndex, Converter={StaticResource _MessageChainBreakToVisibility_}, ConverterParameter=First}">
                        <Polygon Name="_chatRightBubbleSpike_"
                                 HorizontalAlignment="Right"
                                 Fill="{x:Bind FromContact, Converter={StaticResource _bubbleBackground_}}"
                                 Points="0,0,10,5,0,10"
                                 Visibility="{x:Bind FromContact, Converter={StaticResource _boolToVisibility_}, ConverterParameter=Inverted}">
                            <Polygon.RenderTransform>
                                <TranslateTransform X="3" Y="15" />
                            </Polygon.RenderTransform>
                        </Polygon>
                    </Grid>
                </Grid>
                <!--  message info  -->
                <Grid Grid.Row="1">
                    <StackPanel x:Name="_messageInfo_"
                                Margin="10,0,10,0"
                                HorizontalAlignment="{x:Bind FromContact, Converter={StaticResource _bubbleHorizontalAlignement_}}"
                                Orientation="Horizontal">
                        <Grid Grid.Column="2"
                              x:Name="_confirmationCheckGrid_"
                              Margin="0,1,8,0"
                              Visibility="Collapsed">
                            <Rectangle x:Name="_checkHider_"
                                       Width="12"
                                       HorizontalAlignment="Right"
                                       Canvas.ZIndex="999"
                                       Fill="{ThemeResource RingMessagePageBrush}"
                                       Visibility="{x:Bind FromContact, Converter={StaticResource _boolToVisibility_}, ConverterParameter=Inverted}">
                                <Rectangle.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleX="1.0" />
                                        <TranslateTransform X="0" />
                                    </TransformGroup>
                                </Rectangle.RenderTransform>
                                <Rectangle.Triggers>
                                    <EventTrigger>
                                        <BeginStoryboard>
                                            <Storyboard x:Name="_showCheck_">
                                                <DoubleAnimation Storyboard.TargetName="_checkHider_"
                                                                 Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
                                                                 From="1"
                                                                 To="0"
                                                                 Duration="0:0:0.5" />
                                                <DoubleAnimation Storyboard.TargetName="_checkHider_"
                                                                 Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.X)"
                                                                 From="0"
                                                                 To="12"
                                                                 Duration="0:0:0.5" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                </Rectangle.Triggers>
                            </Rectangle>
                            <TextBlock Margin="6,0,0,0"
                                       FontFamily="Segoe MDL2 Assets"
                                       FontSize="12"
                                       Foreground="Green"
                                       Text="&#xE73E;"
                                       Visibility="{x:Bind FromContact, Converter={StaticResource _boolToVisibility_}, ConverterParameter=Inverted}" />
                        </Grid>
                        <TextBlock x:Name="_messageTimeFrom_"
                                   FontSize="10"
                                   Foreground="Gray"
                                   Text="{x:Bind MessageIndex, Converter={StaticResource _MessageDateTimeString_}}"
                                   Visibility="{x:Bind FromContact, Converter={StaticResource _boolToVisibility_}}">
                            <TextBlock.RenderTransform>
                                <TranslateTransform X="50" />
                            </TextBlock.RenderTransform>
                        </TextBlock>
                        <TextBlock x:Name="_messageTimeTo_"
                                   FontSize="10"
                                   Foreground="Gray"
                                   Text="{x:Bind MessageIndex, Converter={StaticResource _MessageDateTimeString_}}"
                                   Visibility="{x:Bind FromContact, Converter={StaticResource _boolToVisibility_}, ConverterParameter=Inverted}" />
                    </StackPanel>
                </Grid>
            </Grid>
        </DataTemplate>

        <Style x:Key="MessageSendBox" TargetType="TextBox">
            <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />
            <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" />
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="Background" Value="White" />
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
            <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
            <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
            <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
            <Setter Property="Padding" Value="4,0,8,4" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TextBox">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Border Grid.Row="1"
                                    x:Name="BackgroundElement"
                                    Grid.RowSpan="1"
                                    Grid.ColumnSpan="2"
                                    Margin="0"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{StaticResource RingBlueMidBrush}"
                                    BorderThickness="0"
                                    Opacity="1" />
                            <ContentPresenter Grid.Row="0"
                                              x:Name="HeaderContentPresenter"
                                              Grid.ColumnSpan="2"
                                              Margin="0,0,0,0"
                                              Padding="2,4,2,2"
                                              x:DeferLoadStrategy="Lazy"
                                              Content="{TemplateBinding Header}"
                                              ContentTemplate="{TemplateBinding HeaderTemplate}"
                                              FontWeight="Normal"
                                              Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                                              Visibility="Collapsed" />
                            <ScrollViewer Grid.Row="1"
                                          x:Name="ContentElement"
                                          Margin="{TemplateBinding BorderThickness}"
                                          Padding="{TemplateBinding Padding}"
                                          VerticalAlignment="Center"
                                          AutomationProperties.AccessibilityView="Raw"
                                          HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                          HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                          IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                          IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                          IsTabStop="False"
                                          IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                          VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                          VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                          ZoomMode="Disabled" />
                            <Button Grid.Row="1"
                                    Grid.Column="1"
                                    x:Name="_sendBtn_"
                                    MinWidth="34"
                                    Margin="8,0,0,0"
                                    VerticalAlignment="Stretch"
                                    Background="Transparent"
                                    BorderThickness="0"
                                    Click="_sendBtn__Click"
                                    Content="&#xE89C;"
                                    FontFamily="Segoe MDL2 Assets"
                                    FontSize="20"
                                    IsEnabled="False"
                                    IsTabStop="False"
                                    Style="{StaticResource FlatRoundSendButton}"
                                    Visibility="Visible">
                                <ToolTipService.ToolTip>
                                    <TextBlock x:Uid="_tt_send_message_" />
                                </ToolTipService.ToolTip>
                            </Button>
                            <ContentControl Grid.Row="1"
                                            x:Name="PlaceholderTextContentPresenter"
                                            Grid.ColumnSpan="2"
                                            Margin="{TemplateBinding BorderThickness}"
                                            Padding="{TemplateBinding Padding}"
                                            VerticalAlignment="Center"
                                            Content="{TemplateBinding PlaceholderText}"
                                            Foreground="Gray"
                                            IsHitTestVisible="False"
                                            IsTabStop="False" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid Background="{ThemeResource RingMessagePageBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid Grid.Row="0"
              x:Name="_contactInfoGrid_"
              Height="auto"
              Background="White">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="62" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="auto" />
            </Grid.RowDefinitions>
            <Grid Grid.Column="0" x:Name="_contactBarAvatarGrid_">
                <Ellipse Width="50"
                         Height="50"
                         Canvas.ZIndex="1">
                    <Ellipse.Fill>
                        <ImageBrush x:Name="_contactBarAvatar_" />
                    </Ellipse.Fill>
                </Ellipse>
            </Grid>
            <Grid Grid.Column="0"
                  x:Name="_defaultContactBarAvatarGrid_"
                  Width="50"
                  Height="50"
                  Canvas.ZIndex="0">
                <Ellipse x:Name="_defaultAvatar_" Fill="#ff808080" />
                <TextBlock x:Name="_defaultAvatarInitial_"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center"
                           FontFamily="Arial"
                           FontSize="30"
                           Foreground="White"
                           Text="?"
                           TextAlignment="Center" />
            </Grid>
            <Grid Grid.Column="1" x:Name="_contactInfoGridData_">
                <Grid.RowDefinitions>
                    <RowDefinition Height="32" />
                    <RowDefinition Height="30" />
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0"
                           x:Name="_contactName_"
                           Margin="8,4,8,0"
                           HorizontalAlignment="Left"
                           VerticalAlignment="Center"
                           FontSize="18"
                           FontWeight="Normal"
                           Text=""
                           TextTrimming="CharacterEllipsis"
                           TextWrapping="NoWrap">
                    <ToolTipService.ToolTip>
                        <TextBlock x:Name="_tt_contactName_" />
                    </ToolTipService.ToolTip>
                </TextBlock>
                <TextBlock Grid.Row="2"
                           x:Name="_contactName2_"
                           Margin="8,-10,8,0"
                           HorizontalAlignment="Left"
                           VerticalAlignment="Center"
                           FontSize="15"
                           FontWeight="SemiLight"
                           Text=""
                           TextTrimming="CharacterEllipsis"
                           TextWrapping="NoWrap">
                    <ToolTipService.ToolTip>
                        <TextBlock x:Name="_tt_contactName2_" />
                    </ToolTipService.ToolTip>
                </TextBlock>
            </Grid>
            <Grid Grid.Row="0"
                  Grid.Column="2"
                  x:Name="_contactButtonsGrid_"
                  Margin="0,0,14,0"
                  HorizontalAlignment="Right">
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="_sendContactRequestBtn_"
                            Click="_sendContactRequestBtn__Click"
                            Content="&#xE8FA;"
                            FontFamily="Segoe MDL2 Assets"
                            FontSize="18"
                            Style="{StaticResource FlatRoundButton}"
                            Visibility="Visible">
                        <ToolTipService.ToolTip>
                            <TextBlock x:Uid="_tt_send_contactrequest_" />
                        </ToolTipService.ToolTip>
                    </Button>
                    <Button x:Name="_videoCallBtn_"
                            Click="_videoCallBtn__Click"
                            Content="&#xE714;"
                            FontFamily="Segoe MDL2 Assets"
                            FontSize="18"
                            Style="{StaticResource FlatRoundButton}">
                        <ToolTipService.ToolTip>
                            <TextBlock x:Uid="_tt_video_call_" />
                        </ToolTipService.ToolTip>
                    </Button>
                    <Button x:Name="_audioCallBtn_"
                            Click="_audioCallBtn__Click"
                            Content="&#xE13A;"
                            FontFamily="Segoe MDL2 Assets"
                            FontSize="18"
                            Style="{StaticResource FlatRoundButton}"
                            Visibility="Collapsed">
                        <ToolTipService.ToolTip>
                            <TextBlock x:Uid="_tt_audio_call_" />
                        </ToolTipService.ToolTip>
                    </Button>
                    <Button x:Name="_clearConversationBtn_"
                            Click="_clearConversationBtn__Click"
                            Content="&#xE74D;"
                            FontFamily="Segoe MDL2 Assets"
                            FontSize="18"
                            Style="{StaticResource FlatRoundButton}">
                        <ToolTipService.ToolTip>
                            <TextBlock x:Uid="_tt_clear_conversation_" />
                        </ToolTipService.ToolTip>
                    </Button>
                </StackPanel>
            </Grid>
        </Grid>
        <Rectangle Grid.Row="1"
                   Height="1"
                   Margin="16,0,16,0"
                   Fill="LightGray" />
        <ScrollViewer Grid.Row="2"
                      x:Name="_scrollView_"
                      VerticalAlignment="Bottom"
                      BorderBrush="{StaticResource RingBlueMidBrush}"
                      BorderThickness="0,0,0,0"
                      ScrollViewer.VerticalScrollBarVisibility="Auto">
            <StackPanel>
                <Rectangle Height="6" Fill="Transparent" />
                <ListBox x:Name="_messagesList_"
                         Margin="0"
                         Padding="0"
                         Background="{StaticResource RingMessagePageBrush}"
                         ItemContainerStyle="{StaticResource messageBubbleStyle}"
                         ItemTemplate="{StaticResource ConversationMessageTemplate}">
                    <ListBox.RenderTransform>
                        <TranslateTransform x:Name="_messagesListTranslateTransform_" X="0" Y="0" />
                    </ListBox.RenderTransform>
                </ListBox>
                <Rectangle Height="6" Fill="Transparent" />
            </StackPanel>
        </ScrollViewer>
        <StackPanel Grid.Row="3" Orientation="Vertical">
            <Rectangle Grid.Row="0"
                       Height="1"
                       Margin="16,0,16,0"
                       Fill="LightGray" />
            <Grid MinHeight="52"
                  MaxHeight="128"
                  Margin="0,0,0,0"
                  Background="{ThemeResource RingMessagePageBrush}">
                <TextBox x:Name="_messageTextBox_"
                         x:Uid="_messageTextBox_"
                         MinHeight="24"
                         Margin="16,0,16,0"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Center"
                         AcceptsReturn="True"
                         Background="{ThemeResource RingMessagePageBrush}"
                         IsSpellCheckEnabled="False"
                         IsTabStop="True"
                         KeyDown="_messageTextBox__KeyDown"
                         ScrollViewer.VerticalScrollBarVisibility="Auto"
                         Style="{StaticResource MessageSendBox}"
                         TextChanged="_messageTextBox__TextChanged"
                         TextWrapping="Wrap" />
            </Grid>
        </StackPanel>
    </Grid>
</Page>