<?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:chart="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms"
                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.RankPage"
                x:Name="rankPage"
                x:DataType="v:RankPage"
                BindingContext="{x:Reference rankPage}"
                Shell.TabBarIsVisible="True">

    <Shell.TitleView>
        <Grid>
            <StackLayout HorizontalOptions="Center" VerticalOptions="Center"
                         Orientation="Horizontal" Spacing="10">
                <ui:TintImageButton Source="left.png" WidthRequest="20" HeightRequest="20"
                                    VerticalOptions="Center" HorizontalOptions="Start"
                                    Command="{Binding LeftCommand}"/>
                <Label Text="{Binding Title}"
                       TextColor="{DynamicResource PrimaryColor}"
                       FontSize="{OnPlatform Android=20, iOS=18}">
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding FilterCommand}"/>
                    </Label.GestureRecognizers>
                    <Label.FontFamily>
                        <OnPlatform x:TypeArguments="x:String"
                                    Android="OpenSans-SemiBold.ttf#OpenSans-SemiBold"
                                    iOS="OpenSans-Bold"/>
                    </Label.FontFamily>
                </Label>
                <ui:TintImageButton Source="right.png" WidthRequest="20" HeightRequest="20"
                                    VerticalOptions="Center" HorizontalOptions="End"
                                    Command="{Binding RightCommand}"/>
            </StackLayout>
        </Grid>
    </Shell.TitleView>

    <!--<ContentPage.ToolbarItems>
        <ToolbarItem Order="Primary" IconImageSource="filter.png" Command="{Binding FilterCommand}"/>
    </ContentPage.ToolbarItems>-->

    <ContentPage.Resources>
        <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" IncludeDate="True"/>
        <ui:IconConverter x:Key="iconConverter"/>
        <Style x:Key="titleLabel" TargetType="Label">
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Margin" Value="10, 20, 10, 10"/>
            <Setter Property="TextColor" Value="{DynamicResource TextColor}"/>
        </Style>
        <Style x:Key="promptLabel" TargetType="Label">
            <Setter Property="HeightRequest" Value="240"/>
            <Setter Property="FontSize" Value="15"/>
            <Setter Property="VerticalOptions" Value="Start"/>
            <Setter Property="HorizontalTextAlignment" Value="Center"/>
            <Setter Property="VerticalTextAlignment" Value="Center"/>
            <Setter Property="TextColor" Value="{DynamicResource SecondaryTextColor}"/>
        </Style>
        <Style TargetType="Button">
            <Setter Property="TextColor" Value="{DynamicResource TextColor}"/>
            <Setter Property="FontSize" Value="14"/>
        </Style>
    </ContentPage.Resources>

    <Grid>
        <ScrollView x:Name="scroller" Scrolled="Scroller_Scrolled">
            <StackLayout>
                <Grid Padding="8" ColumnSpacing="8" ColumnDefinitions="*, Auto" HeightRequest="24"
                      BackgroundColor="{DynamicResource PromptBackgroundColor}">
                    <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>
                <Label Text="{r:Text TrackingChart}" Style="{StaticResource titleLabel}"/>
                <chart:ChartView HeightRequest="240" Chart="{Binding Chart}"
                                 IsVisible="{Binding NoResultChart, Converter={StaticResource negativeConverter}}"/>
                <Label Text="{r:Text NoResult}" Style="{StaticResource promptLabel}"
                       IsVisible="{Binding NoResultChart}"/>

                <Label Text="{r:Text CategoryRank}" Style="{StaticResource titleLabel}"/>
                <chart:ChartView HeightRequest="240" Chart="{Binding CategoryChart}"
                                 IsVisible="{Binding NoResultCategoryChart, Converter={StaticResource negativeConverter}}"/>
                <Label Text="{r:Text NoResult}" Style="{StaticResource promptLabel}"
                       IsVisible="{Binding NoResultCategoryChart}"/>

                <Label Text="{r:Text Top10}" Style="{StaticResource titleLabel}"/>
                <ui:GroupStackLayout IsVisible="{Binding NoResultTopBills, Converter={StaticResource negativeConverter}}"
                                     ItemsSource="{Binding TopBills}" RowHeight="50">
                
                    <ui:GroupStackLayout.ItemTemplate>
                        <DataTemplate x:DataType="v:UIBill">
                            <Grid Padding="20, 0" ColumnSpacing="10"
                                  ColumnDefinitions="Auto, *, Auto" RowDefinitions="Auto, Auto">
                                <Grid.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding EditBilling, Source={x:Reference rankPage}}"
                                                          CommandParameter="{Binding .}"/>
                                </Grid.GestureRecognizers>
                                <ui:TintImage Source="{Binding Icon, Converter={StaticResource iconConverter}}"
                                              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>
                            </Grid>
                        </DataTemplate>
                    </ui:GroupStackLayout.ItemTemplate>
                </ui:GroupStackLayout>
                <Label Text="{r:Text NoResult}" Style="{StaticResource promptLabel}"
                       IsVisible="{Binding NoResultTopBills}"/>
            </StackLayout>
        </ScrollView>

        <ui:BlurryPanel x:Name="panelFilter" VerticalOptions="Start" Opacity="0"
                        BackgroundColor="{DynamicResource WindowBackgroundColor}"
                        HeightRequest="{Binding Height, Source={x:Reference gridFilter}}"/>
        <Grid x:Name="gridFilter" VerticalOptions="Start" Opacity="0" RowDefinitions="Auto, Auto, Auto, Auto">
            <ui:SegmentedControl VerticalOptions="Center" Margin="10, 10, 10, 3"
                                 SelectedSegmentIndex="{Binding SegmentType, Mode=TwoWay}"
                                 SelectedTextColor="{DynamicResource TextColor}"
                                 TintColor="{DynamicResource PromptBackgroundColor}">
                <ui:SegmentedControl.Children>
                    <ui:SegmentedControlOption Text="{r:Text Spending}"/>
                    <ui:SegmentedControlOption Text="{r:Text Income}"/>
                </ui:SegmentedControl.Children>
            </ui:SegmentedControl>
            <ui:OptionPicker Grid.Row="1" VerticalOptions="Center" Margin="10, 3"
                             HorizontalTextAlignment="Center" FontSize="16"
                             ItemsSource="{Binding DateTypes}"
                             SelectedIndex="{Binding SegmentDate, Mode=TwoWay}"
                             TextColor="{DynamicResource TextColor}"
                             ios:Picker.UpdateMode="WhenFinished"/>
            <Grid Grid.Row="2" ColumnDefinitions="*, Auto, *" Margin="10, 3">
                <ui:OptionDatePicker Date="{Binding StartPickerDate, Mode=TwoWay}"
                                     FontSize="16" TextColor="{DynamicResource TextColor}"
                                     VerticalOptions="Center"
                                     ios:DatePicker.UpdateMode="WhenFinished"/>
                <Label Grid.Column="1" Text="{r:Text To}" TextColor="{DynamicResource SecondaryTextColor}"
                       VerticalOptions="Center"/>
                <ui:OptionDatePicker Grid.Column="2" Date="{Binding EndPickerDate, Mode=TwoWay}"
                                     FontSize="16" TextColor="{DynamicResource TextColor}"
                                     VerticalOptions="Center"
                                     ios:DatePicker.UpdateMode="WhenFinished"/>
            </Grid>
            <Grid Grid.Row="3" HeightRequest="1" BackgroundColor="{DynamicResource PromptBackgroundColor}"
                  IsVisible="{OnPlatform iOS=False}"/>
        </Grid>
    </Grid>
</ui:BillingPage>