<Page
    x:Class="was.touchcopy.features.ContactsContentPage"
    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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" 
    xmlns:converters="using:was.touchcopy.features.converters" 
    xmlns:contactdb="using:was.mobiledevice.contactsdatabase"
    DataContext="{Binding RelativeSource={RelativeSource Self}}">
    <Page.Resources>
        <ResourceDictionary>
            <converters:ByteArrayToBitmapImageConverter x:Key="BitmapImageConverter"/>
            <converters:ValueToVisibilityConverter x:Key="ValueVisibilityConverter"/>
            <converters:StringArrayToStringConverter x:Key="StringArrayStringConverter"/>
            <converters:LocationToImageConverter x:Key="LocationToImageConverter"/>
            <converters:BoolToBorderThemeConverter x:Key="BoolToBorderThemeConverter"/>

            <Storyboard x:Key="StoryboardContactImageOutlineFadeOut" x:Name="StoryboardContactImageOutlineFadeIn">
                <DoubleAnimation Storyboard.TargetName="ellipseContactImageOutline" 
                                 Storyboard.TargetProperty="Opacity" To="1.0" Duration="0:0:0.2"/>
            </Storyboard>
            <Storyboard x:Key="StoryboardContactImageOutlineFadeIn" x:Name="StoryboardContactImageOutlineFadeOut">
                <DoubleAnimation Storyboard.TargetName="ellipseContactImageOutline" 
                                     Storyboard.TargetProperty="Opacity" To="0.0" Duration="0:0:0.2"/>
            </Storyboard>

        </ResourceDictionary>
    </Page.Resources>
    <Border Style="{ThemeResource FeatureContentPageBorder}" Padding="0">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <ScrollViewer Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
                <Grid x:Name="gridContactDetails" Padding="30" Visibility="Collapsed"  Background="{ThemeResource CardBackgroundFillColorDefaultBrush}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>

                    <Grid>
                        <Button x:Name="buttonClose" Grid.Column="1" Click="ButtonClose_Click" HorizontalAlignment="Right" VerticalAlignment="Top"
                            Visibility="{Binding IsCloseButtonVisible, Converter={StaticResource ValueVisibilityConverter}}"
                            Height="32" BorderThickness="0" Margin="0,-10,-10,0">
                            <Button.Content>
                                <FontIcon Glyph="&#xE8BB;"/>
                            </Button.Content>
                        </Button>
                        <StackPanel  Orientation="Horizontal"  Margin="0,0,0,20"  VerticalAlignment="Top">
                            <Grid Margin="0,0,10,0" Width="100" Height="100">
                                <Ellipse x:Name="ellipseContactImageOutline" Width="100" Height="100" Fill="{ThemeResource CheckBoxPointerOverBorderThemeBrush}" Opacity="0"/>
                                <PersonPicture ProfilePicture="{Binding SelectedContact.PictureData, Converter={StaticResource BitmapImageConverter}, Mode=OneWay}" 
                                               DisplayName="{Binding SelectedContact.Name}" VerticalAlignment="Center"  HorizontalAlignment="Center" 
                                               Tapped="_personPictureContact_Tapped" PointerMoved="PersonPicture_PointerMoved" PointerExited="PersonPicture_PointerExited"/>
                            </Grid>
                            <StackPanel VerticalAlignment="Center" Margin="0,0,0,10">
                                <TextBlock Text="{Binding SelectedContact.Name}" Style="{ThemeResource TitleTextBlockStyle}"/>
                                <TextBlock Text="{Binding SelectedContact.Org, Converter={StaticResource StringArrayStringConverter} }" 
                           Visibility="{Binding RelativeSource={RelativeSource Self}, Path=Text, Converter={StaticResource ValueVisibilityConverter} }"
                           Style="{ThemeResource BodyTextBlockStyle}"/>
                            </StackPanel>
                        </StackPanel>
                    </Grid>



                    <Grid Grid.Row="1" x:Name="gridEmails" Margin="0,0,0,20" Visibility="{Binding EmailVisibility}">
                        <StackPanel>
                            <TextBlock Text="Emails" Style="{ThemeResource SubtitleTextBlockStyle}"/>
                            <ListView ItemsSource="{Binding SelectedContact.Email}" SelectionMode="None" VerticalAlignment="Stretch">
                                <ListView.ItemTemplate>
                                    <DataTemplate x:DataType="contactdb:EmailDefinition">
                                        <StackPanel Orientation="Horizontal" >
                                            <Image Source="{Binding LocationType, Converter={StaticResource LocationToImageConverter}}" Width="18" Margin="0,0,10,0" />
                                            <TextBlock Text="{Binding EmailAddress}" Margin="0,0,10,2" VerticalAlignment="Center" />
                                            <Button x:Name="buttonEmail" Background="Transparent" BorderBrush="Transparent" 
                                            Padding="0" ClickMode="Press"
                                            Tag="{Binding EmailAddress}" Tapped="ButtonEmail_Tapped">
                                                <Button.Content>
                                                    <SymbolIcon Symbol="Mail" Foreground="{ThemeResource HyperlinkForegroundThemeBrush}"/>
                                                </Button.Content>
                                            </Button>
                                        </StackPanel>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>
                        </StackPanel>
                    </Grid>

                    <Grid Grid.Row="2" x:Name="gridTelephone" Margin="0,0,0,20" Visibility="{Binding TelephoneVisibility}">
                        <StackPanel>
                            <TextBlock x:Uid="TextBlockTelephone" Text="XX Telephone" Style="{ThemeResource SubtitleTextBlockStyle}"/>
                            <ListView ItemsSource="{Binding SelectedContact.Tel}" SelectionMode="None" VerticalAlignment="Stretch">
                                <ListView.ItemTemplate>
                                    <DataTemplate x:DataType="contactdb:TelDefinition">
                                        <StackPanel Orientation="Horizontal">
                                            <Image Source="{Binding LocationType, Converter={StaticResource LocationToImageConverter}}" Width="18" Margin="0,0,10,0"/>
                                            <TextBlock Text="{Binding TelephoneNumber}" Margin="0,0,0,2" />
                                        </StackPanel>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>
                        </StackPanel>
                    </Grid>

                    <Grid Grid.Row="3" x:Name="gridAddresses" Margin="0,0,0,20" Visibility="{Binding AddressVisibility}">
                        <StackPanel>
                            <TextBlock x:Uid="TextBlockAddress" Text="XX Addresses" Style="{ThemeResource SubtitleTextBlockStyle}"/>
                            <ListView ItemsSource="{Binding SelectedContact.Adr}" SelectionMode="None" VerticalAlignment="Stretch">
                                <ListView.ItemTemplate>
                                    <DataTemplate x:DataType="contactdb:AdrDefinition">
                                        <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
                                            <Image Source="{Binding LocationType, Converter={StaticResource LocationToImageConverter}}" Width="18" VerticalAlignment="Top" Margin="0,5,10,0"/>
                                            <StackPanel>
                                                <TextBlock Text="{Binding StreetAddress }" Margin="0,0,0,2" Visibility="{Binding RelativeSource={RelativeSource Self}, Path=Text, Converter={StaticResource ValueVisibilityConverter} }"/>
                                                <TextBlock Text="{Binding ExtendedAddress }" Margin="0,0,0,2" Visibility="{Binding RelativeSource={RelativeSource Self}, Path=Text, Converter={StaticResource ValueVisibilityConverter} }"/>
                                                <TextBlock Text="{Binding Locality }" Margin="0,0,0,2" Visibility="{Binding RelativeSource={RelativeSource Self}, Path=Text, Converter={StaticResource ValueVisibilityConverter} }"/>
                                                <TextBlock Text="{Binding Region }" Margin="0,0,0,2" Visibility="{Binding RelativeSource={RelativeSource Self}, Path=Text, Converter={StaticResource ValueVisibilityConverter} }"/>
                                                <TextBlock Text="{Binding PoBox }" Margin="0,0,0,2" Visibility="{Binding RelativeSource={RelativeSource Self}, Path=Text, Converter={StaticResource ValueVisibilityConverter} }"/>
                                                <TextBlock Text="{Binding Country }" Margin="0,0,0,2" Visibility="{Binding RelativeSource={RelativeSource Self}, Path=Text, Converter={StaticResource ValueVisibilityConverter} }"/>
                                                <TextBlock Text="{Binding PostCode }" Margin="0,0,0,2" Visibility="{Binding RelativeSource={RelativeSource Self}, Path=Text, Converter={StaticResource ValueVisibilityConverter} }"/>
                                            </StackPanel>
                                        </StackPanel>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>
                        </StackPanel>
                    </Grid>

                    <Grid Grid.Row="4" x:Name="gridNote" Margin="0,0,0,20" Visibility="{Binding Path=NoteVisibility}">
                        <StackPanel>
                            <TextBlock x:Uid="TextBlockNote" Text="XX Note" Style="{ThemeResource SubtitleTextBlockStyle}"/>
                            <TextBlock Text="{Binding SelectedContact.Note}" HorizontalAlignment="Stretch"/>
                        </StackPanel>
                    </Grid>

                    <Grid Grid.Row="5" x:Name="gridWebPages" Margin="0,0,0,20" Visibility="{Binding URLVisibility}">
                        <StackPanel>
                            <TextBlock Text="Webpages" Style="{ThemeResource SubtitleTextBlockStyle}"/>
                            <HyperlinkButton x:Name="webpageButton" NavigateUri="{Binding SelectedContact.Uri}" Content="{Binding SelectedContact.UrlString}"  />
                        </StackPanel>
                    </Grid>

                </Grid>
            </ScrollViewer>
            <Grid Tapped="_gridContactFull_Tapped" x:Name="gridContactFull" Grid.RowSpan="2" Visibility="Collapsed">
                <Grid.Resources>
                    <Style TargetType="Button">
                        <Setter Property="Height" Value="32"/>
                        <Setter Property="BorderThickness" Value="0"/>
                        <Setter Property="Background" Value="Transparent"/>
                        <Setter Property="Foreground" Value="{ThemeResource TextFillColorInverse}" />
                    </Style>
                </Grid.Resources>
                <Border Tapped="_gridContactFull_Tapped" Background="{ThemeResource TextFillColorPrimary}" Opacity="1" />
                <Image x:Name="imageContactFull" Source="{Binding SelectedContact.PictureData, Converter={StaticResource BitmapImageConverter}, Mode=OneWay}" Stretch="None" Margin="40" ImageOpened="_imageContactFull_ImageOpened" />
                <Button Click="_buttonCloseContactFull_Click" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="12">
                    <FontIcon Glyph="&#xE8BB;" Foreground="{ThemeResource TextFillColorInverse}" />
                </Button>
            </Grid>
            
        </Grid>
    </Border>
</Page>
