﻿<common:LayoutAwarePage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ParseTodo"
    xmlns:common="using:ParseTodo.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Name="pageRoot"
    x:Class="ParseTodo.MainPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Mode=Self}}"
    mc:Ignorable="d">

    <common:LayoutAwarePage.Resources>

        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">Parse Todo List</x:String>

        <local:NullBoolConverter x:Key="NullBoolConverter" />
        <local:NumberBoolConverter x:Key="NumberBoolConverter" />
        <common:BooleanToVisibilityConverter x:Key="BoolVisibilityConverter" />
        <common:BooleanNegationConverter x:Key="BoolNegationConverter" />
    </common:LayoutAwarePage.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}" Background="#FF017FFF">
        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape" />
                <VisualState x:Name="Filled" />

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Image Source="Assets/Logo.png" Margin="0,0,-15,-15" />
            <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}" />
        </Grid>
        <Grid Margin="10" Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="2*" />
            </Grid.ColumnDefinitions>
            <ProgressRing HorizontalAlignment="Center" VerticalAlignment="Center" IsActive="{Binding [IsLoading]}" Width="50" Height="50" Margin="200,279,199,176" />
            <ListView x:Name="todoListView" ItemsSource="{Binding [TodoItems]}" SelectionMode="Single" SelectedItem="{Binding [SelectedTodo], Mode=TwoWay}" IsEnabled="{Binding [IsEditing], Converter={StaticResource BoolNegationConverter}}" SelectionChanged="TodoSelectionChanged" Grid.RowSpan="2">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="0,0,50,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <CheckBox IsChecked="{Binding IsComplete, Mode=TwoWay}" Margin="10" VerticalAlignment="Center" Click="MarkCompleted" />
                            <TextBlock Text="*" Grid.Column="1" Style="{StaticResource ItemTextStyle}" VerticalAlignment="Center" Visibility="{Binding IsDirty, Converter={StaticResource BoolVisibilityConverter}}" />
                            <TextBlock Text="{Binding Title}" Grid.Column="2" Style="{StaticResource ItemTextStyle}" VerticalAlignment="Center" Margin="0,0,0,5" />
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalAlignment" Value="Stretch" />
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    </Style>
                </ListView.ItemContainerStyle>
            </ListView>

            <ContentControl Grid.Column="1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" DataContext="{Binding [SelectedTodo]}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <TextBlock TextWrapping="Wrap" Text="Title" Margin="10" VerticalAlignment="Top" HorizontalAlignment="Right" Style="{StaticResource ItemTextStyle}" />
                    <TextBlock Grid.Row="1" TextWrapping="Wrap" Text="Description" Margin="10" VerticalAlignment="Top" HorizontalAlignment="Right" Style="{StaticResource ItemTextStyle}" />
                    <TextBox Grid.Column="1" TextWrapping="Wrap" Margin="10" Text="{Binding Title, Mode=TwoWay}" IsEnabled="{Binding DefaultViewModel[IsEditing], ElementName=pageRoot}" />
                    <TextBox Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" Margin="10" Text="{Binding Description, Mode=TwoWay}" AcceptsReturn="True"  IsEnabled="{Binding DefaultViewModel[IsEditing], ElementName=pageRoot}" />
                </Grid>
            </ContentControl>
            <StackPanel Grid.Row="2" Orientation="Horizontal" Margin="10">
                <Button Style="{StaticResource AddAppBarButtonStyle}" Click="AddTodoItem" />
                <Button Grid.Column="3" Style="{StaticResource RefreshAppBarButtonStyle}" Click="RefreshTodoItems" />
            </StackPanel>
            <StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right" Margin="10">
                <ProgressRing IsActive="{Binding [IsSaving]}" Width="50" Height="50" />
                <Button Grid.Row="1" IsEnabled="{Binding [CanEdit]}" HorizontalAlignment="Right" Style="{StaticResource EditAppBarButtonStyle}" Click="ToggleEditing" />
                <Button Style="{StaticResource DeleteAppBarButtonStyle}" Click="DeleteCurrentItem" IsEnabled="{Binding [CanEdit]}" />
                <Button Style="{StaticResource UndoAppBarButtonStyle}" AutomationProperties.Name="Revert" Click="RevertCurrentItem" IsEnabled="{Binding [IsEditing]}" />
                <Button Style="{StaticResource SaveAppBarButtonStyle}" Click="SaveCurrentItem" IsEnabled="{Binding [IsEditing]}" />
            </StackPanel>
        </Grid>

    </Grid>
</common:LayoutAwarePage>