<?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"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:models="clr-namespace:Dollet.Core.Entities;assembly=Dollet.Core"
             xmlns:vmdtos="clr-namespace:Dollet.ViewModels.Dtos"
             xmlns:viewModels="clr-namespace:Dollet.ViewModels.Accounts"
             xmlns:views="clr-namespace:Dollet.Views"
             xmlns:converters="clr-namespace:Dollet.Conventers"
             x:Class="Dollet.Pages.AccountsPage"
             x:DataType="viewModels:AccountsPageViewModel"
             xmlns:fonts="clr-namespace:Dollet.Core.Constants;assembly=Dollet.Core">

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

    <ContentPage.Resources>
        <converters:FirstCharacterConverter x:Key="FirstCharacterConverter" />
        <toolkit:IsStringNullOrEmptyConverter x:Key="IsStringNullOrEmptyConverter" />
    </ContentPage.Resources>

    <Grid RowDefinitions="auto, *">
        <views:RoundedTopElement Data="M 0,0 L 100,0 C 50,60 0,0 0,0 Z"/>

        <Border
            Margin="15" 
            Padding="30" 
            StrokeShape="RoundRectangle, 15"
            BackgroundColor="{AppThemeBinding Light={DynamicResource White}, Dark={DynamicResource Gray900}}">

            <Border.Shadow>
                <Shadow 
                    Brush="Black"
                    Offset="0, 15"
                    Opacity="0.40" />
            </Border.Shadow>

            <HorizontalStackLayout HorizontalOptions="Center" Spacing="5">
                <Label 
                    Text="Balance:" 
                    FontSize="Title" 
                    VerticalOptions="Center"/>
                <Label 
                    Text="{Binding AccountsBalance, StringFormat='{0:F2}'}"
                    FontSize="Title" 
                    VerticalOptions="Center"/>
                <Label 
                    FontSize="Title"
                    VerticalOptions="Center"
                    Text="{Binding SelectedCurrency}" 
                    TextColor="{AppThemeBinding Light={DynamicResource Primary}, Dark={DynamicResource Primary}}"/>
            </HorizontalStackLayout>
        </Border>

        <!--Marker grid for the rounded bottom element-->
        <Grid Grid.Row="1">
            <ScrollView>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <Grid Grid.Row="1" RowDefinitions="auto, auto, auto">
                        <CollectionView ItemsSource="{Binding Accounts}" SelectionMode="None">
                            <CollectionView.ItemTemplate>
                                <DataTemplate x:DataType="vmdtos:AccountDto">
                                    <Grid Padding="5" ColumnDefinitions="0.4*, *, 0.5*" RowDefinitions="auto, auto">
                                        <Grid.GestureRecognizers>
                                            <TapGestureRecognizer 
                                                Command="{Binding Source={RelativeSource AncestorType={x:Type viewModels:AccountsPageViewModel}}, Path=NavigateToEditAccountPageCommand}" 
                                                CommandParameter="{Binding .}"/>
                                        </Grid.GestureRecognizers>

                                        <Grid Grid.RowSpan="2">
                                            <toolkit:AvatarView 
                                                FontSize="30"
                                                Text="{Binding Icon}"
                                                FontFamily="MaterialIconsRegular"
                                                BorderColor="{AppThemeBinding Light={DynamicResource White}, Dark={DynamicResource Gray900}}"
                                                BackgroundColor="{Binding Color}"/>

                                            <Label 
                                                Grid.Column="1" 
                                                Text="{x:Static fonts:MaterialDesignIcons.Check_circle}"
                                                FontFamily="MaterialIconsRegular"
                                                TextColor="{DynamicResource Primary}"
                                                IsVisible="{Binding IsDefault}"
                                                VerticalOptions="End"
                                                HorizontalOptions="End"
                                                Margin="0, 0, 14, 1"/>
                                        </Grid>

                                        <Label 
                                            Grid.Column="1"
                                            Text="{Binding Name}"
                                            FontSize="20">
                                            
                                            <Label.Triggers>
                                                <DataTrigger 
                                                    TargetType="Label"
                                                    Binding="{Binding Description, Converter={StaticResource IsStringNullOrEmptyConverter}}"
                                                    Value="true">
                                                    
                                                    <Setter Property="Grid.RowSpan" Value="2"/>
                                                    <Setter Property="VerticalOptions" Value="Center"/>
                                                </DataTrigger>
                                                <DataTrigger 
                                                    TargetType="Label"
                                                    Binding="{Binding Description, Converter={StaticResource IsStringNullOrEmptyConverter}}"
                                                    Value="false">

                                                    <Setter Property="Grid.Row" Value="0"/>
                                                    <Setter Property="VerticalOptions" Value="End"/>
                                                </DataTrigger>
                                            </Label.Triggers>
                                        </Label>

                                        <Label
                                            Grid.Column="1" Grid.Row="2"
                                            Text="{Binding Description}"
                                            FontAttributes="Italic"
                                            FontSize="14"
                                            VerticalOptions="Center"/>

                                        <Label
                                            Grid.Column="2" Grid.Row="0"
                                            Text="{Binding Amount, StringFormat='{0:F2}'}"
                                            FontSize="20"
                                            Margin="0, 0, 15, 0"
                                            VerticalOptions="End"
                                            HorizontalOptions="End"/>

                                        <Label
                                            Grid.Row="1"
                                            Grid.Column="2" 
                                            FontSize="14"
                                            Margin="0, 0, 15, 0"
                                            VerticalOptions="Center"
                                            HorizontalOptions="End">

                                            <Label.FormattedText>
                                                <FormattedString>
                                                    <Span Text="{Binding Currency}" FontAttributes="Italic" />
                                                </FormattedString>
                                            </Label.FormattedText>
                                        </Label>
                                    </Grid>
                                </DataTemplate>
                            </CollectionView.ItemTemplate>

                            <CollectionView.EmptyView>
                                <views:CollectionEmptyView 
                                    Title="You haven't added any account yet"
                                    Caption="Add your first account below 🔽"
                                    TitleSize="16"
                                    CaptionSize="14"
                                    HeightRequest="80"/>
                            </CollectionView.EmptyView>
                        </CollectionView>

                        <Border Grid.Row="1" StrokeThickness="1" Margin="15, 20, 15, 10"/>

                        <VerticalStackLayout 
                                Grid.Row="2"
                                Margin="0, 0, 0, 80">

                            <HorizontalStackLayout Spacing="5" HorizontalOptions="Center">
                                <HorizontalStackLayout.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding ToogleHiddenAccountsCommand}"/>
                                </HorizontalStackLayout.GestureRecognizers>

                                <Label 
                                    Text="Hidden accounts"
                                    FontSize="20"/>

                                <Label 
                                    Text="{Binding HiddenAccountsIcon}"
                                    FontFamily="MaterialIconsRegular"
                                    FontSize="20"/>
                            </HorizontalStackLayout>

                            <CollectionView ItemsSource="{Binding HiddenAccounts}" IsVisible="{Binding HiddenAccountsExpanded}">
                                <CollectionView.ItemTemplate>
                                    <DataTemplate x:DataType="vmdtos:AccountDto">
                                        <Grid Padding="5">
                                            <Grid.GestureRecognizers>
                                                <TapGestureRecognizer 
                                                    Command="{Binding Source={RelativeSource AncestorType={x:Type viewModels:AccountsPageViewModel}}, Path=NavigateToEditAccountPageCommand}" 
                                                    CommandParameter="{Binding .}"/>
                                            </Grid.GestureRecognizers>

                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="0.4*"/>
                                                <ColumnDefinition Width="*"/>
                                                <ColumnDefinition Width="0.5*"/>
                                            </Grid.ColumnDefinitions>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="auto"/>
                                                <RowDefinition Height="auto"/>
                                            </Grid.RowDefinitions>

                                            <toolkit:AvatarView 
                                                Grid.RowSpan="2"
                                                FontSize="30"
                                                Text="{Binding Icon}"
                                                FontFamily="MaterialIconsRegular"
                                                BackgroundColor="{Binding Color}" />

                                            <Label 
                                                Grid.Column="1"
                                                Text="{Binding Name}"
                                                FontSize="20"
                                                VerticalOptions="End"/>

                                            <Label
                                                Grid.Column="1" Grid.Row="2"
                                                Text="{Binding Description}"
                                                FontAttributes="Italic"
                                                FontSize="14"
                                                VerticalOptions="Center"/>

                                            <Label
                                                Grid.Column="2" Grid.Row="0"
                                                Text="{Binding Amount, StringFormat='{0:F2}'}"
                                                FontSize="20"
                                                Margin="0, 0, 15, 0"
                                                VerticalOptions="End"
                                                HorizontalOptions="End"/>

                                            <Label
                                                Grid.Row="1"
                                                Grid.Column="2" 
                                                FontSize="14"
                                                Margin="0, 0, 15, 0"
                                                VerticalOptions="Center"
                                                HorizontalOptions="End">

                                                <Label.FormattedText>
                                                    <FormattedString>
                                                        <Span Text="{Binding Currency}" FontAttributes="Italic" />
                                                    </FormattedString>
                                                </Label.FormattedText>
                                            </Label>
                                        </Grid>
                                    </DataTemplate>
                                </CollectionView.ItemTemplate>

                                <CollectionView.EmptyView>
                                    <views:CollectionEmptyView 
                                        Title="You haven't added any hidden account yet"
                                        Caption="Add your first hidden account below 🔽"
                                        TitleSize="16"
                                        CaptionSize="14"
                                        HeightRequest="100"/>
                                </CollectionView.EmptyView>
                            </CollectionView>
                        </VerticalStackLayout>
                    </Grid>
                </Grid>
            </ScrollView>

            <Button 
                Text="{x:Static fonts:MaterialDesignIcons.Add}"
                FontFamily="MaterialIconsRegular"
                FontSize="32"
                Margin="15"
                WidthRequest="60"
                HeightRequest="60"
                CornerRadius="50"
                ZIndex="10"
                VerticalOptions="End"
                BackgroundColor="{DynamicResource PrimaryLight}"
                Command="{Binding NavigateToAddAccountPageCommand}"/>
        </Grid>
    </Grid>
</ContentPage>