<?xml version="1.0" encoding="utf-8" ?>
<ui:BillingPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:r="clr-namespace:Billing.Languages"
                xmlns:ui="clr-namespace:Billing.UI"
                xmlns:v="clr-namespace:Billing.Views"
                xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="Billing.Views.BillPage"
                x:DataType="v:BillPage"
                x:Name="billPage"
                BindingContext="{x:Reference billPage}"
                Title="{r:Text Bills}"
                Shell.TabBarIsVisible="True">

    <ContentPage.Resources>
        <ui:TitleDateConverter x:Key="titleDateConverter"/>
        <ui:NegativeConverter x:Key="negativeConverter"/>
        <ui:MoneyConverter x:Key="moneyConverter" Absolute="True"/>
        <ui:MoneyConverter x:Key="moneyRawConverter"/>
        <ui:BalanceColorConverter x:Key="colorConverter"/>
        <ui:TimeConverter x:Key="timeConverter"/>
        <ui:IconConverter x:Key="iconConverter"/>
        <ui:TintColorConverter x:Key="tintColorConverter"/>
    </ContentPage.Resources>

    <Shell.TitleView>
        <Grid>
            <DatePicker x:Name="titleDatePicker" IsVisible="False" Date="{Binding SelectedDate, Mode=TwoWay}"
                        ios:DatePicker.UpdateMode="WhenFinished"
                        DateSelected="TitlePicker_DateSelected"/>
            <ui:LongPressGrid HorizontalOptions="{OnPlatform iOS=Center, Android=Start}" Padding="30, 0, 0, 0"
                              VerticalOptions="Center" LongCommand="{Binding TitleLongPressed}">
                <Label Text="{Binding SelectedDate, Converter={StaticResource titleDateConverter}}"
                       TextColor="{DynamicResource PrimaryColor}"
                       FontSize="{OnPlatform Android=20, iOS=18}">
                    <Label.FontFamily>
                        <OnPlatform x:TypeArguments="x:String"
                                    Android="OpenSans-SemiBold.ttf#OpenSans-SemiBold"
                                    iOS="OpenSans-Bold"/>
                    </Label.FontFamily>
                </Label>
            </ui:LongPressGrid>
            <ui:TintImageButton Source="calendar.png" WidthRequest="20" HeightRequest="20"
                                VerticalOptions="Center" HorizontalOptions="Start"
                                Command="{Binding TitleDateTap}"/>
        </Grid>
    </Shell.TitleView>

    <ContentPage.ToolbarItems>
        <ToolbarItem Order="Primary" IconImageSource="plus.png" Command="{Binding EditBilling}"/>
    </ContentPage.ToolbarItems>

    <Grid RowDefinitions="Auto, Auto, *">
        <ui:BillingDate x:Name="billingDate" DateSelected="OnDateSelected"/>
        <Grid Grid.Row="1" Padding="8" ColumnSpacing="8" ColumnDefinitions="*, Auto"
              BackgroundColor="{DynamicResource PromptBackgroundColor}"
              IsVisible="{Binding NoBills}">
            <Label Text="{r:Text NoRecords}" TextColor="{DynamicResource TextColor}"
                   VerticalOptions="Center" FontSize="12"/>
            <StackLayout Grid.Column="1" Orientation="Horizontal" Spacing="6">
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding EditBilling}"/>
                </StackLayout.GestureRecognizers>
                <Label Text="{r:Text TapToMemo}" TextColor="{DynamicResource PrimaryColor}"
                       VerticalOptions="Center" FontSize="12"/>
                <ui:TintImage Source="right.png" WidthRequest="24" HeightRequest="24"/>
            </StackLayout>
        </Grid>
        <Grid Grid.Row="1" Padding="8" ColumnSpacing="8" ColumnDefinitions="*, Auto" HeightRequest="24"
              BackgroundColor="{DynamicResource PromptBackgroundColor}"
              IsVisible="{Binding NoBills, Converter={StaticResource negativeConverter}}">
            <StackLayout Grid.Column="1" Orientation="Horizontal" Spacing="6">
                <Label Text="{r:Text Income}" TextColor="{DynamicResource GreenColor}"
                       VerticalOptions="Center" FontSize="12"/>
                <Label Text="{Binding Income, Converter={StaticResource moneyConverter}}"
                       TextColor="{DynamicResource TextColor}"
                       VerticalOptions="Center" FontSize="12"/>
                <Label Text="{r:Text Spending}" TextColor="{DynamicResource RedColor}"
                       VerticalOptions="Center" FontSize="12" Margin="10, 0, 0, 0"/>
                <Label Text="{Binding Spending, Converter={StaticResource moneyConverter}}"
                       TextColor="{DynamicResource TextColor}"
                       VerticalOptions="Center" FontSize="12"/>
                <Label Text="{r:Text Balance}"
                       VerticalOptions="Center" FontSize="12" Margin="10, 0, 0, 0"/>
                <Label Text="{Binding Balance, Converter={StaticResource moneyRawConverter}}"
                       TextColor="{DynamicResource TextColor}"
                       VerticalOptions="Center" FontSize="12"/>
            </StackLayout>
        </Grid>
        <!-- bill list -->
        <ScrollView x:Name="scrollView" Grid.Row="2">
            <ui:GroupStackLayout x:Name="billsLayout" ItemsSource="{Binding Bills}"
                                 Padding="0, 10, 0, 0" RowHeight="50">
                <ui:GroupStackLayout.ItemTemplate>
                    <DataTemplate x:DataType="v:UIBill">
                        <ui:LongPressGrid Padding="20, 0" ColumnSpacing="10"
                                          ColumnDefinitions="Auto, *, Auto" RowDefinitions="Auto, Auto"
                                          LongCommand="{Binding DeleteBilling, Source={x:Reference billPage}}"
                                          LongCommandParameter="{Binding .}">
                            <Grid.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding EditBilling, Source={x:Reference billPage}}"
                                                      CommandParameter="{Binding .}"/>
                            </Grid.GestureRecognizers>
                            <ui:TintImage Source="{Binding Icon, Converter={StaticResource iconConverter}}"
                                          ui:TintHelper.TintColor="{Binding TintColor, Converter={StaticResource tintColorConverter}}"
                                          WidthRequest="26" HeightRequest="20" VerticalOptions="Center"/>
                            <Label Grid.Column="1" Text="{Binding Name}" TextColor="{DynamicResource TextColor}"
                                   VerticalOptions="Center"
                                   FontSize="Default" FontAttributes="Bold"/>
                            <Label Grid.Column="2" Text="{Binding Amount, Converter={StaticResource moneyConverter}}"
                                   TextColor="{Binding Amount, Converter={StaticResource colorConverter}}"
                                   VerticalOptions="Center"/>
                            <StackLayout Grid.Row="1" Grid.Column="1" Spacing="6" Orientation="Horizontal">
                                <Label Text="{Binding DateCreation, Converter={StaticResource timeConverter}}"
                                       FontSize="10" TextColor="{DynamicResource SecondaryTextColor}"/>
                                <Label Text="{Binding Wallet}"
                                       FontSize="10" TextColor="{DynamicResource SecondaryTextColor}"/>
                            </StackLayout>
                        </ui:LongPressGrid>
                    </DataTemplate>
                </ui:GroupStackLayout.ItemTemplate>
            </ui:GroupStackLayout>
        </ScrollView>
        <!--<ui:CircleButton Grid.Row="1" VerticalOptions="End" HorizontalOptions="End"
                         Margin="20" Padding="0"
                         BackgroundColor="{DynamicResource PrimaryColor}"
                         ImageSource="plus.png" HeightRequest="24" WidthRequest="24"/>-->
    </Grid>
</ui:BillingPage>