<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:PatrickChatCtrlTemplate.Portable"
             xmlns:telerikConversationalUI="clr-namespace:Telerik.XamarinForms.ConversationalUI;assembly=Telerik.XamarinForms.ConversationalUI"
             xmlns:converters="clr-namespace:PatrickChatCtrlTemplate.Portable.Converters;assembly=PatrickChatCtrlTemplate.Portable"
             xmlns:viewModels="clr-namespace:PatrickChatCtrlTemplate.Portable.ViewModels;assembly=PatrickChatCtrlTemplate.Portable"
             xmlns:primitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
             x:Class="PatrickChatCtrlTemplate.Portable.MainPage">

    <ContentPage.BindingContext>
        <viewModels:MainPageViewModel/>
    </ContentPage.BindingContext>

    <ContentPage.Resources>
        <converters:SimpleChatItemConverter x:Key="SimpleChatItemConverter" />

        <!-- Image is on the left side and it's source is bound to the ExtendedAuthor's ImageSource property-->
        <DataTemplate x:Key="NormalIncomingMessageTemplate">
            <Grid Margin="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <Image Source="{Binding Author.ProfileImageSource}" 
                       WidthRequest="30"
                       HeightRequest="30"
                       Grid.Column="0"/>

                <primitives:RadBorder CornerRadius="7"
                                      Margin="20,0,0,0"
                                      Padding="5"
                                      Grid.Column="1">
                    <Label Text="{Binding Text}" 
                           HorizontalTextAlignment="Start"/>
                </primitives:RadBorder>
            </Grid>
        </DataTemplate>

        <!-- In this template, the image is on the right side, and the margins adjusted appropriately -->
        <DataTemplate x:Key="NormalOutgoingMessageTemplate">
            <Grid Margin="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <primitives:RadBorder CornerRadius="7"
                                      Margin="0,0,20,0"
                                      Padding="5"
                                      Grid.Column="0">
                    <Label Text="{Binding Text}" 
                           HorizontalTextAlignment="End"/>
                </primitives:RadBorder>

                <Image Source="{Binding Author.ProfileImageSource}"
                       WidthRequest="30"
                       HeightRequest="30"
                       Grid.Column="1" />
            </Grid>
        </DataTemplate>

        <!-- 
        Here is the logic we use to decide which template is going to be applied:
        
        If there's just one message from that author, we use the "Single" template
        If there are two messages from that author, we use the "First" and "Last" template
        If there are three or more, we use the "First", "Middle" and "Last" templates
        
        To keep this demo simple, I use the same template for all incoming messages, and the same template for all outgoing messages. 
        You could use clever styling to add rounded corners for different messages 
        
        -->
        <telerikConversationalUI:ChatItemTemplateSelector x:Key="SimpleChatItemTemplateSelector"
                                                          IncomingSingleTextMessageTemplate="{StaticResource NormalIncomingMessageTemplate}"
                                                          IncomingFirstTextMessageTemplate="{StaticResource NormalIncomingMessageTemplate}"
                                                          IncomingMiddleTextMessageTemplate="{StaticResource NormalIncomingMessageTemplate}"
                                                          IncomingLastTextMessageTemplate="{StaticResource NormalIncomingMessageTemplate}"
                                                          OutgoingSingleTextMessageTemplate="{StaticResource NormalOutgoingMessageTemplate}"
                                                          OutgoingFirstTextMessageTemplate="{StaticResource NormalOutgoingMessageTemplate}"
                                                          OutgoingMiddleTextMessageTemplate="{StaticResource NormalOutgoingMessageTemplate}"
                                                          OutgoingLastTextMessageTemplate="{StaticResource NormalOutgoingMessageTemplate}"/>
    </ContentPage.Resources>

    <Grid>
        <telerikConversationalUI:RadChat x:Name="chat"
                                         Author="{Binding Me}"
                                         ItemsSource="{Binding Items}"
                                         ItemConverter="{StaticResource SimpleChatItemConverter}"
                                         ItemTemplateSelector="{StaticResource SimpleChatItemTemplateSelector}"/>
    </Grid>
</ContentPage>
