<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="eShopOnContainers.Core.Views.CheckoutView"   
             xmlns:templates="clr-namespace:eShopOnContainers.Core.Views.Templates;assembly=eShopOnContainers.Core"  
             Title="Checkout">
    <ContentPage.Resources>
        <ResourceDictionary>
            
            <Style x:Key="OrderTitleStyle" 
                   TargetType="{x:Type Label}">
                <Setter Property="FontFamily"
                        Value="{StaticResource MontserratRegular}" />
                <Setter Property="FontSize"
                        Value="{StaticResource MediumSize}" />
                <Setter Property="TextColor"
                        Value="Gray" />
            </Style>
            
            <Style x:Key="OrderContentStyle"    
                   TargetType="{x:Type Label}"
                   BasedOn="{StaticResource OrderTitleStyle}">
                <Setter Property="TextColor"
                        Value="Black" />
            </Style>
            
            <Style x:Key="ShippingAddressStyle"    
                   TargetType="{x:Type Label}"
                   BasedOn="{StaticResource OrderTitleStyle}">
                <Setter Property="FontSize"
                        Value="{StaticResource LargeSize}" />
                <Setter Property="TextColor"
                        Value="Black" />
            </Style>

            <Style x:Key="AddressStyle"    
                   TargetType="{x:Type Label}"
                   BasedOn="{StaticResource OrderTitleStyle}">
                <Setter Property="FontSize"
                        Value="{StaticResource LittleSize}" />
                <Setter Property="TextColor"
                        Value="Black" />
            </Style>
            
            <Style x:Key="OrderTotalStyle" 
               TargetType="{x:Type Label}">
                <Setter Property="FontFamily"
                        Value="{StaticResource MontserratRegular}" />
                <Setter Property="FontSize" 
                        Value="{StaticResource LargerSize}" />
                <Setter Property="HorizontalOptions" 
                        Value="End" />
            </Style>

            <Style x:Key="CheckoutButtonStyle" 
               TargetType="{x:Type Label}">
                <Setter Property="FontFamily"
                        Value="{StaticResource MontserratRegular}" />
                <Setter Property="TextColor"
                        Value="{StaticResource WhiteColor}" />
                <Setter Property="HorizontalOptions"
                        Value="Center" />
                <Setter Property="VerticalOptions"
                        Value="Center" />
            </Style>

        </ResourceDictionary>
    </ContentPage.Resources>
    <Grid
        BackgroundColor="{StaticResource BackgroundColor}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="60" />
        </Grid.RowDefinitions>
        <!-- ORDER -->
        <ScrollView   
            Grid.Row="0">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <!-- ORDER INFO -->
                <Grid 
                    x:Name="OrderInfo">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <StackLayout
                        Grid.Column="0"
                        Grid.Row="0"
                        Margin="12">
                        <Label 
                        Text="ORDER NUMBER"
                        Style="{StaticResource OrderTitleStyle}"/>
                        <Label 
                        Text="{Binding Order.OrderNumber, Converter={StaticResource ToUpperConverter}}"
                        Style="{StaticResource OrderContentStyle}"/>
                    </StackLayout>
                    <StackLayout
                        Grid.Column="0"
                        Grid.Row="1" 
                        Margin="12">
                        <Label 
                            Text="TOTAL"
                            Style="{StaticResource OrderTitleStyle}"/>
                        <Label 
                            Text="{Binding Order.Total, StringFormat='${0:N}', Converter={StaticResource ToUpperConverter}}" 
                            Style="{StaticResource OrderContentStyle}"/>
                    </StackLayout>
                    <StackLayout
                        Grid.Column="1"
                        Grid.Row="0"
                        Margin="12">
                        <Label 
                            Text="DATE"
                            Style="{StaticResource OrderTitleStyle}"/>
                        <Label 
                            Text="{Binding Order.OrderDate, Converter={StaticResource DatetimeConverter}}"
                            Style="{StaticResource OrderContentStyle}"/>
                    </StackLayout>
                    <StackLayout
                        Grid.Column="1"
                        Grid.Row="1" 
                        Margin="12">
                        <Label 
                            Text="STATUS"
                            Style="{StaticResource OrderTitleStyle}"/>
                        <Label 
                            Text="{Binding Order.State, Converter={StaticResource ToUpperConverter}}"
                            Style="{StaticResource OrderContentStyle}"/>
                    </StackLayout>
                </Grid>
                <!-- SHIPPING ADDRESS -->
                <Grid
                    x:Name="ShippingAddress"
                    Grid.Row="1"
                    Margin="12">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Label
                        Grid.Row="0"
                        Text="SHIPPING ADDRESS"
                        Style="{StaticResource ShippingAddressStyle}"/>
                    <StackLayout
                        Grid.Row="1">
                        <Label
                            Text="{Binding ShippingAddress.Street}"
                            Style="{StaticResource AddressStyle}"/>
                        <Label
                            Text="{Binding ShippingAddress.ZipCode}"   
                            Style="{StaticResource AddressStyle}"/>
                        <Label
                            Text="{Binding ShippingAddress.State}"   
                            Style="{StaticResource AddressStyle}"/>
                        <Label
                            Text="{Binding ShippingAddress.Country}"   
                            Style="{StaticResource AddressStyle}"/>
                    </StackLayout>
                </Grid>
                <!-- ORDER ITEMS -->
                <Grid            
                    x:Name="OrderItems"
                    Grid.Row="2">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <ListView 
                        Grid.Row="0"
                        ItemsSource="{Binding Order.OrderItems}"   
                        HeightRequest="{Binding Order.OrderItems.Count, Converter={StaticResource ItemsToHeightConverter}}"     
                        HasUnevenRows="True"
                        SeparatorVisibility="None"
                        VerticalOptions="FillAndExpand"
                        CachingStrategy="RecycleElement">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <templates:OrderItemTemplate />
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                    <StackLayout
                        Grid.Row="1"
                        Margin="0,0,0,24">
                        <Label 
                            Grid.Row="0"
                            Text="TOTAL"
                            TextColor="{StaticResource BlackColor}"
                            Style="{StaticResource OrderTotalStyle}"/>
                        <Label 
                            Grid.Row="1"                   
                            Text="{Binding Order.Total, StringFormat='${0:N}'}"
                            TextColor="{StaticResource GreenColor}"
                            Style="{StaticResource OrderTotalStyle}"/>
                    </StackLayout>
                </Grid>
            </Grid>
        </ScrollView>
        <!-- CHECKOUT -->
        <Grid
            Grid.Row="1"           
            BackgroundColor="{StaticResource LightGreenColor}"
            Padding="0" 
            ColumnSpacing="0" 
            RowSpacing="0">
            <Label       
                Text="[ CHECKOUT ]" 
                Style="{StaticResource CheckoutButtonStyle}"/>
            <Grid.GestureRecognizers>
                <TapGestureRecognizer            
                    Command="{Binding CheckoutCommand}"  
                    NumberOfTapsRequired="1" />
            </Grid.GestureRecognizers>
        </Grid>
        <!-- INDICATOR -->
        <ActivityIndicator
            Grid.Row="0"
            Grid.RowSpan="2"
            Color="{StaticResource LightGreenColor}"
            IsRunning="{Binding IsBusy}"  
            IsVisible="{Binding IsBusy}"
            VerticalOptions="Center"
            HorizontalOptions="Center">
            <ActivityIndicator.WidthRequest>
                <OnPlatform 
                    x:TypeArguments="x:Double" 
                    iOS="100" 
                    Android="100"
                    WinPhone="400" />
            </ActivityIndicator.WidthRequest>
        </ActivityIndicator>
    </Grid>
</ContentPage>