<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Dollet.Pages.Transactions.Expenses.ExpensesPage"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:viewModels="clr-namespace:Dollet.ViewModels.Transactions.Expenses"
             xmlns:views="clr-namespace:Dollet.Views"
             xmlns:dtos="clr-namespace:Dollet.Core.DTOs;assembly=Dollet.Core"
             xmlns:models="clr-namespace:Dollet.Core.Entities;assembly=Dollet.Core"
             xmlns:fonts="clr-namespace:Dollet.Core.Constants;assembly=Dollet.Core"
             xmlns:micro="clr-namespace:Microcharts.Maui;assembly=Microcharts.Maui"
             xmlns:controls="clr-namespace:Dollet.Controls"
             x:DataType="viewModels:ExpensesPageViewModel">

    <ContentPage.Behaviors>
        <toolkit:EventToCommandBehavior
            EventName="Appearing"
            Command="{Binding AppearingCommand}"/>
    </ContentPage.Behaviors>

    <Grid>
        <views:RoundedTopElement Data="M 0,0 L 100,0 C 50,45 0,0 0,0 Z"/>

        <Grid RowDefinitions="auto, auto, *">
            <HorizontalStackLayout HorizontalOptions="Center" Spacing="5" Margin="0, 15, 0, 10">
                <CollectionView 
                    SelectionMode="Single"
                    ItemsSource="{Binding Periods}" 
                    SelectedItem="{Binding SelectedPeriod}"
                    SelectionChangedCommand="{Binding PeriodChangedCommand}">

                    <CollectionView.ItemsLayout>
                        <LinearItemsLayout Orientation="Horizontal" ItemSpacing="10"/>
                    </CollectionView.ItemsLayout>

                    <CollectionView.ItemTemplate>
                        <DataTemplate x:DataType="x:String">
                            <Grid Style="{StaticResource HorizontalPeriodsStyle}">
                                <Label
                                    Text="{Binding}"
                                    FontSize="20"
                                    FontAttributes="Bold"
                                    BackgroundColor="Transparent"/>
                            </Grid>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
                
                <Button 
                    Style="{StaticResource DateRangePickerButton}"
                    Command="{Binding SelectCustomDateRangeCommand}"/>
            </HorizontalStackLayout>

            <Border 
                Grid.Row="1"
                MaximumHeightRequest="250"
                Stroke="{DynamicResource PrimaryDark}"
                StrokeThickness="1"
                Margin="10, 0" 
                Padding="10"
                BackgroundColor="{AppThemeBinding Light={DynamicResource White}, Dark={DynamicResource Gray900}}">

                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="10" BackgroundColor="Black"/>
                </Border.StrokeShape>

                <VerticalStackLayout>
                    <Label 
                        Text="{Binding Period}"
                        HorizontalOptions="Center"
                        Padding="5"
                        FontSize="20"
                        FontAttributes="Italic"/>

                    <micro:ChartView 
                        MinimumHeightRequest="200"
                        Chart="{Binding DonutChart}"
                        BackgroundColor="{AppThemeBinding Light={DynamicResource White}, Dark={DynamicResource Gray900}}"/>
                </VerticalStackLayout>
            </Border>

            <CollectionView 
                Grid.Row="2" 
                Margin="0, 5, 0, 20"
                ItemsSource="{Binding Expenses}">

                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="dtos:ExpensesGroupDto">
                        <views:TransactionGroupItemView
                                BindingContext="{Binding}">

                            <views:TransactionGroupItemView.GestureRecognizers>
                                <TapGestureRecognizer 
                                    Command="{Binding Source={RelativeSource AncestorType={x:Type viewModels:ExpensesPageViewModel}}, 
                                        Path=NavigateToExpensesDetailsPageCommand}" 
                                    CommandParameter="{Binding}"/>
                            </views:TransactionGroupItemView.GestureRecognizers>
                        </views:TransactionGroupItemView>
                    </DataTemplate>
                </CollectionView.ItemTemplate>

                <CollectionView.EmptyView>
                    <views:CollectionEmptyView
                        Title="No results matched your filter"
                        Caption="Add your first transaction below 🔽"/>
                </CollectionView.EmptyView>
            </CollectionView>

            <Button 
                Grid.Row="2"
                Text="{x:Static fonts:MaterialDesignIcons.Add}"
                FontFamily="MaterialIconsRegular"
                FontSize="32"
                Margin="0, 0, 0, 30"
                WidthRequest="60"
                HeightRequest="60"
                CornerRadius="50"
                ZIndex="1"
                VerticalOptions="End"
                BackgroundColor="{DynamicResource PrimaryLight}"
                Command="{Binding NavigateToAddExpensePageCommand}"/>
        </Grid>
    </Grid>
</ContentPage>