<?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:pageModels="clr-namespace:MauiBrokenBindings.PageModels"
             xmlns:models="clr-namespace:MauiBrokenBindings.Models"
             xmlns:pages="clr-namespace:MauiBrokenBindings.Pages"
             xmlns:sf="clr-namespace:Syncfusion.Maui.Toolkit.TextInputLayout;assembly=Syncfusion.Maui.Toolkit"
             xmlns:controls="clr-namespace:MauiBrokenBindings.Pages.Controls"
             xmlns:fonts="clr-namespace:Fonts"
             x:Class="MauiBrokenBindings.Pages.ProjectDetailPage"
             x:DataType="pageModels:ProjectDetailPageModel"
             Title="Project">

    <ContentPage.ToolbarItems>
        <ToolbarItem
            Text="Delete"
            Command="{Binding DeleteCommand}"
            Order="Primary"
            Priority="0"
            IconImageSource="{StaticResource IconDelete}"
            SemanticProperties.Description="Delete Project" />
    </ContentPage.ToolbarItems>

    <Grid>
        <ScrollView>
            <VerticalStackLayout Padding="{StaticResource LayoutPadding}" Spacing="{StaticResource LayoutSpacing}">
                <sf:SfTextInputLayout 
                    Hint="Name" >
                    <Entry
                        Text="{Binding Name}" SemanticProperties.Description="Name" />
                </sf:SfTextInputLayout>

                <sf:SfTextInputLayout 
                    Hint="Description">
                    <Entry
                        Text="{Binding Description}" SemanticProperties.Description="Description" />
                </sf:SfTextInputLayout>

               <sf:SfTextInputLayout
                    Hint="Category"
                    SemanticProperties.Description="ComboBox to Select Category"
                    SemanticProperties.Hint="State Collapsed">
                    <Picker SemanticProperties.Hint="Select the category for the project"
                            ItemsSource="{Binding Categories}"
                            SelectedItem="{Binding Category}"
                            SelectedIndex="{Binding CategoryIndex}"
                            SemanticProperties.Description="Category State Expanded"/>
                </sf:SfTextInputLayout>

                <Label 
                    Text="Icon" 
                    Style="{StaticResource Title2}"/>
                <CollectionView 
                    HeightRequest="44" Margin="0,0,0,15"
                    SelectionMode="Single" 
                    SelectedItem="{Binding Icon}"
                    SelectionChangedCommand="{Binding IconSelectedCommand}"
                    SelectionChangedCommandParameter="{Binding Icon}"
                    ItemsSource="{Binding Icons}">
                    <CollectionView.ItemTemplate>
                        <DataTemplate x:DataType="models:IconData">
                            <Grid RowDefinitions="Auto,4" RowSpacing="{StaticResource size60}"
                                 SemanticProperties.Description="{Binding Description}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal">
                                            <VisualState.Setters>
                                                <Setter Property="BackgroundColor" Value="Transparent"/>
                                                <Setter TargetName="SelectedIndicator" Property="BoxView.IsVisible" Value="False"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="Selected">
                                            <VisualState.Setters>
                                                <Setter Property="BackgroundColor" Value="Transparent"/>
                                                <Setter Property="Background" Value="Transparent"/>
                                                <Setter TargetName="SelectedIndicator" Property="BoxView.IsVisible" Value="True"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                
                                <Label 
                                    Text="{Binding Icon}"
                                    x:Name="IconImage"
                                    FontFamily="{x:Static fonts:FluentUI.FontFamily}" 
                                    FontSize="24" 
                                    VerticalOptions="Center"
                                    HorizontalOptions="Center"
                                    TextColor="{AppThemeBinding Light={StaticResource DarkOnLightBackground},Dark={StaticResource LightOnDarkBackground}}"/>
                                <BoxView x:Name="SelectedIndicator" Color="{StaticResource Primary}" HeightRequest="4" HorizontalOptions="Fill" Grid.Row="1"/>
                            </Grid>                            
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                    <CollectionView.ItemsLayout>
                        <LinearItemsLayout Orientation="Horizontal" ItemSpacing="{StaticResource LayoutSpacing}"/>
                    </CollectionView.ItemsLayout>
                </CollectionView>
                

                <Label 
                    Text="Tags" 
                    Style="{StaticResource Title2}"/>

                <CollectionView
                    ItemsSource="{Binding AllTags}"
                    SelectionMode="Multiple"
                    HeightRequest="44"
                    Margin="0,0,0,15"
                    SelectedItems="{Binding SelectedTags, Mode=TwoWay}"
                    SelectionChangedCommand="{Binding SelectionChangedCommand}"
                    SelectionChangedCommandParameter="{Binding SelectedTags}"
                    SemanticProperties.Description="Tags Collection">
                    <CollectionView.ItemsLayout>
                        <LinearItemsLayout Orientation="Horizontal" ItemSpacing="{StaticResource LayoutSpacing}" />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate x:DataType="models:Tag">
                            <Border StrokeShape="RoundRectangle 22" 
                                HeightRequest="44" 
                                VerticalOptions="Center"
                                BackgroundColor="Transparent"
                                Padding="{OnPlatform '18,0,18,8',Android='18,0,18,0'}"
                                SemanticProperties.Description="{Binding Title}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal">
                                            <VisualState.Setters>
                                                <Setter Property="Background" Value="{AppThemeBinding Light={StaticResource LightSecondaryBackground},Dark={StaticResource DarkSecondaryBackground}}"/>
                                                <Setter TargetName="TagLabel" Property="Label.TextColor" Value="{AppThemeBinding Light={StaticResource DarkOnLightBackground},Dark={StaticResource LightOnDarkBackground}}"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="Selected">
                                            <VisualState.Setters>
                                                <Setter Property="Background" Value="{Binding DisplayColor}"/>
                                                <Setter TargetName="TagLabel" Property="Label.TextColor" Value="{AppThemeBinding Light={StaticResource LightBackground},Dark={StaticResource DarkBackground}}"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Label x:Name="TagLabel"
                                    Text="{Binding Title}"
                                    TextColor="{AppThemeBinding Light={StaticResource LightBackground},Dark={StaticResource DarkBackground}}" 
                                    FontSize="{OnIdiom 16,Desktop=18}" 
                                    VerticalOptions="Center"
                                    VerticalTextAlignment="Center">
                                </Label>
                            </Border>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
                

                <Button Text="Save" 
                    MinimumHeightRequest="{OnIdiom 44, Desktop=60}"
                    Command="{Binding SaveCommand}" />

                <Grid HeightRequest="44">
                    <Label 
                        Text="Tasks" 
                        Style="{StaticResource Title2}" 
                        VerticalOptions="Center"/>
                    <ImageButton 
                        Source="{StaticResource IconClean}"
                        HorizontalOptions="End"
                        VerticalOptions="Center"
                        Aspect="Center"
                        HeightRequest="44"
                        WidthRequest="44"
                        IsVisible="{Binding HasCompletedTasks}"
                        Command="{Binding CleanTasksCommand}"
                        SemanticProperties.Description="Clean up"
                        />
                </Grid>
                <VerticalStackLayout 
                    Spacing="{StaticResource LayoutSpacing}"
                    BindableLayout.ItemsSource="{Binding Tasks}">
                    <BindableLayout.ItemTemplate>
                        <DataTemplate>
                            <controls:TaskView TaskCompletedCommand="{Binding TaskCompletedCommand, Source={RelativeSource AncestorType={x:Type pageModels:ProjectDetailPageModel}}, x:DataType=pageModels:ProjectDetailPageModel}" />
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </VerticalStackLayout>
            </VerticalStackLayout>
        </ScrollView>

        <controls:AddButton Command="{Binding AddTaskCommand}" 
                            SemanticProperties.Description="Add task" />
    </Grid>
    
</ContentPage>