<?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:views="clr-namespace:Dollet.Views"
             xmlns:fonts="clr-namespace:Dollet.Core.Constants;assembly=Dollet.Core"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:models="clr-namespace:Dollet.Core.Entities;assembly=Dollet.Core"
             xmlns:viewModels="clr-namespace:Dollet.ViewModels.Categories"
             x:Class="Dollet.Pages.Categories.IncomeCategoriesPage"
             x:DataType="viewModels:IncomeCategoriesPageViewModel"
             Title="Categories">

    <ContentPage.ToolbarItems>
        <ToolbarItem Command="{Binding SaveCommand}" IsEnabled="{Binding IsEnabled}">
            <ToolbarItem.IconImageSource>
                <FontImageSource
                    FontFamily="MaterialIconsRegular"
                    Glyph="{x:Static fonts:MaterialDesignIcons.Save}" Size="26"
                    Color="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource White}}"/>
            </ToolbarItem.IconImageSource>
        </ToolbarItem>
    </ContentPage.ToolbarItems>

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

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

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

        <CollectionView ItemsSource="{Binding Categories}" Margin="10">
            <CollectionView.ItemsLayout>
                <GridItemsLayout 
                    Orientation="Vertical" 
                    Span="3"
                    VerticalItemSpacing="20"/>
            </CollectionView.ItemsLayout>

            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="models:Category">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>

                        <Grid.GestureRecognizers>
                            <DragGestureRecognizer
                                CanDrag="True"
                                DragStartingCommand="{Binding Source={RelativeSource AncestorType={x:Type viewModels:IncomeCategoriesPageViewModel}}, Path=DragStartingCommand}"
                                DragStartingCommandParameter="{Binding}"/>

                            <DropGestureRecognizer
                                AllowDrop="True"
                                DragOverCommand="{Binding Source={RelativeSource AncestorType={x:Type viewModels:IncomeCategoriesPageViewModel}}, Path=DragOverCommand}"
                                DragOverCommandParameter="{Binding}"
                                DropCommand="{Binding Source={RelativeSource AncestorType={x:Type viewModels:IncomeCategoriesPageViewModel}}, Path=DropCommand}"/>
                        </Grid.GestureRecognizers>

                        <toolkit:AvatarView
                            FontFamily="MaterialIconsRegular"
                            FontSize="40"
                            MinimumHeightRequest="70"
                            MinimumWidthRequest="70"
                            Text="{Binding Icon}"
                            BackgroundColor="{Binding Color}"
                            BorderColor="{AppThemeBinding Light={DynamicResource White}, Dark={DynamicResource Gray900}}"
                            VerticalOptions="Center"/>

                        <Label 
                            Grid.Row="1"
                            Margin="0, 5, 0, 0"
                            Text="{Binding Name}"
                            FontSize="Medium" 
                            FontAttributes="Bold" 
                            HorizontalOptions="Center" />
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>
</ContentPage>