<?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:views="clr-namespace:Dollet.Views"
             xmlns:viewModels="clr-namespace:Dollet.ViewModels.Transactions.Incomes"
             xmlns:models="clr-namespace:Dollet.Core.Entities;assembly=Dollet.Core"
             x:Class="Dollet.Pages.Transactions.Incomes.EditIncomePage"
             x:DataType="viewModels:EditIncomePageViewModel"
             Title="Edit Income">

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

    <Grid>
        <views:RoundedTopElement/>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>

            <ScrollView Margin="0, 30, 0, 0">
                <VerticalStackLayout Padding="20, 10" Spacing="15">
                    <Label Text="Amount"/>
                    <Entry  
                        Text="{Binding Amount, Mode=TwoWay}"
                        Placeholder="0.00"
                        Keyboard="Numeric"
                        ReturnType="Done">
                    </Entry>

                    <Grid ColumnDefinitions="*, *" RowDefinitions="*, *">
                        <Label Text="Account"/>
                        <Picker 
                            Grid.Row="1"
                            Title="Select account"
                            ItemsSource="{Binding Accounts}"
                            ItemDisplayBinding="{Binding Name}"
                            SelectedItem="{Binding SelectedAccount}"/>

                        <Label Grid.Column="1" Text="Date"/>
                        <DatePicker 
                            Grid.Column="1"
                            Grid.Row="1"
                            WidthRequest="70"
                            HorizontalOptions="Start"
                            Date="{Binding Date, Mode=TwoWay}" 
                            MaximumDate="{Binding MaximumDate}"/>
                    </Grid>

                    <Label Text="Category"/>
                    <CollectionView 
                        SelectionMode="Single" 
                        SelectedItem="{Binding SelectedCategory}"
                        ItemsSource="{Binding Categories}">

                        <CollectionView.ItemsLayout>
                            <GridItemsLayout 
                                Orientation="Horizontal" 
                                Span="2" 
                                HorizontalItemSpacing="10" 
                                VerticalItemSpacing="10"/>
                        </CollectionView.ItemsLayout>

                        <CollectionView.ItemTemplate>
                            <DataTemplate x:DataType="models:Category">
                                <views:TransactionCategoriesView 
                                    Name="{Binding Name}"
                                    Icon="{Binding Icon}"
                                    Color="{Binding Color}"/>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>

                    <Label Text="Comment"/>
                    <Entry 
                        Text="{Binding Comment, Mode=TwoWay}"
                        Placeholder="Enter income comment..."/>
                </VerticalStackLayout>
            </ScrollView>

            <Button
                Grid.Row="1"
                Text="Edit"
                Margin="20"
                Command="{Binding EditIncomeCommand}"/>
        </Grid>
    </Grid>
</ContentPage>