<?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.Accounts.EditAccountPage"
             xmlns:viewModels="clr-namespace:Dollet.ViewModels.Accounts"
             xmlns:views="clr-namespace:Dollet.Views"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:fonts="clr-namespace:Dollet.Core.Constants;assembly=Dollet.Core"
             Title="Edit account"
             x:DataType="viewModels:EditAccountPageViewModel">

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

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

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

        <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  
                        Placeholder="0.00"
                        Keyboard="Numeric"
                        Text="{Binding Account.Amount, Mode=TwoWay, StringFormat='{0:F2}'}">
                    </Entry>

                    <Label Text="Name"/>
                    <Entry 
                        Placeholder="Enter account name"
                        Text="{Binding Account.Name}">

                        <Entry.Keyboard>
                            <Keyboard x:FactoryMethod="Create">
                                <x:Arguments>
                                    <KeyboardFlags>CapitalizeSentence</KeyboardFlags>
                                </x:Arguments>
                            </Keyboard>
                        </Entry.Keyboard>
                    </Entry>

                    <Label Text="Description"/>
                    <Entry 
                        Placeholder="Enter account description"
                        Text="{Binding Account.Description}">

                        <Entry.Keyboard>
                            <Keyboard x:FactoryMethod="Create">
                                <x:Arguments>
                                    <KeyboardFlags>CapitalizeSentence</KeyboardFlags>
                                </x:Arguments>
                            </Keyboard>
                        </Entry.Keyboard>
                    </Entry>

                    <Label Text="Icon"/>

                    <CollectionView 
                        SelectionMode="Single"
                        ItemsSource="{Binding Icons}"
                        SelectedItem="{Binding Account.Icon}">

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

                        <CollectionView.ItemTemplate>
                            <DataTemplate x:DataType="x:String">
                                <HorizontalStackLayout Margin="0, 0, 5, 0" Spacing="5">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroupList>
                                            <VisualStateGroup Name="CommonStates">
                                                <VisualState Name="Normal">
                                                    <VisualState.Setters>
                                                        <Setter TargetName="AvatarView" Property="toolkit:AvatarView.BackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Gray900}}"/>
                                                    </VisualState.Setters>
                                                </VisualState>
                                                <VisualState Name="Selected">
                                                    <VisualState.Setters>
                                                        <Setter TargetName="AvatarView" Property="toolkit:AvatarView.BackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource Primary}}"/>
                                                    </VisualState.Setters>
                                                </VisualState>
                                            </VisualStateGroup>
                                        </VisualStateGroupList>
                                    </VisualStateManager.VisualStateGroups>

                                    <toolkit:AvatarView
                                        x:Name="AvatarView"
                                        FontFamily="MaterialIconsRegular"
                                        FontSize="36"
                                        Padding="10"
                                        BorderColor="{DynamicResource Primary}"
                                        MinimumHeightRequest="65"
                                        MinimumWidthRequest="65"
                                        Text="{Binding}"
                                        VerticalOptions="Center"/>
                                </HorizontalStackLayout>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>

                    <Label Text="Color"/>
                    <CollectionView 
                        SelectionMode="Single"
                        ItemsSource="{Binding Colors}"
                        SelectedItem="{Binding Account.Color}">

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

                        <CollectionView.ItemTemplate>
                            <DataTemplate x:DataType="x:String">
                                <HorizontalStackLayout Margin="0, 0, 5, 0" Spacing="5">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroupList>
                                            <VisualStateGroup Name="CommonStates">
                                                <VisualState Name="Normal">
                                                    <VisualState.Setters>
                                                        <Setter Property="BackgroundColor" Value="Transparent"/>
                                                        <Setter TargetName="ColorCheck" Property="IsVisible" Value="False"/>
                                                    </VisualState.Setters>
                                                </VisualState>
                                                <VisualState Name="Selected">
                                                    <VisualState.Setters>
                                                        <Setter Property="BackgroundColor" Value="Transparent"/>
                                                        <Setter TargetName="ColorCheck" Property="IsVisible" Value="True"/>
                                                    </VisualState.Setters>
                                                </VisualState>
                                            </VisualStateGroup>
                                        </VisualStateGroupList>
                                    </VisualStateManager.VisualStateGroups>

                                    <Grid>
                                        <Ellipse 
                                            BackgroundColor="{Binding}"
                                            WidthRequest="65"
                                            HeightRequest="65"
                                            HorizontalOptions="Start" />

                                        <Label 
                                            x:Name="ColorCheck"
                                            ZIndex="1"
                                            FontSize="40"
                                            FontFamily="MaterialIconsRegular" 
                                            Text="{x:Static fonts:MaterialDesignIcons.Check}"
                                            VerticalOptions="Center" 
                                            HorizontalOptions="Center" 
                                            TextColor="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" 
                                            IsVisible="False"/>
                                    </Grid>
                                </HorizontalStackLayout>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>

                    <Label Text="Currency"/>
                    <Picker 
                        Title="Select currency"
                        ItemsSource="{Binding Currencies}"
                        SelectedItem="{Binding SelectedCurrency}"/>

                    <Grid 
                        ColumnDefinitions="auto, auto" 
                        RowDefinitions="auto, auto" 
                        ColumnSpacing="15">

                        <Label Text="Hidden"/>
                        <CheckBox 
                            Grid.Row="1" 
                            IsChecked="{Binding Account.IsHidden}" 
                            Margin="-5, 0"/>

                        <Label 
                            Grid.Column="1" 
                            Text="Default"/>
                        <CheckBox 
                            Grid.Column="1" 
                            Grid.Row="1" 
                            IsChecked="{Binding IsDefault}"       
                            Margin="-5, 0"/>
                    </Grid>
                </VerticalStackLayout>
            </ScrollView>

            <Button
                Grid.Row="1"
                Text="Save"
                Margin="20"
                TextColor="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}"
                Command="{Binding EditAccountCommand}"/>
        </Grid>
    </Grid>
</ContentPage>