<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="eShopOnContainers.Core.Views.CatalogView"   
             xmlns:templates="clr-namespace:eShopOnContainers.Core.Views.Templates;assembly=eShopOnContainers.Core"
             xmlns:views="clr-namespace:eShopOnContainers.Core.Views;assembly=eShopOnContainers.Core"   
             xmlns:animations="clr-namespace:eShopOnContainers.Core.Animations;assembly=eShopOnContainers.Core"
             xmlns:triggers="clr-namespace:eShopOnContainers.Core.Triggers;assembly=eShopOnContainers.Core"
             xmlns:behaviors="clr-namespace:eShopOnContainers.Core.Behaviors;assembly=eShopOnContainers.Core"      
             Title="Catalog">
    <ContentPage.Resources>
        <ResourceDictionary>

            <Style x:Key="ProductsListStyle" 
               TargetType="{x:Type ListView}">
                <Setter Property="RowHeight"
                        Value="400" />
                <Setter Property="VerticalOptions"
                        Value="Center" />
                <Setter Property="Margin"
                        Value="0" />
            </Style>

            <Style x:Key="FilterLabelStyle" 
               TargetType="{x:Type Label}">
                <Setter Property="TextColor"
                        Value="{StaticResource WhiteColor}" />
                <Setter Property="HorizontalOptions"
                        Value="Center" />
                <Setter Property="VerticalOptions"
                        Value="Center" />
            </Style>
            
            <animations:StoryBoard 
                x:Key="ProductsAnimation"    
                Target="{x:Reference Products}">
                <animations:FadeInAnimation 
                    Direction="Up"
                    Duration="1500"
                    Delay="250"/>
            </animations:StoryBoard>
            
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Triggers>
        <EventTrigger 
            Event="Appearing">
            <triggers:BeginAnimation   
                Animation="{StaticResource ProductsAnimation}" />
        </EventTrigger>
    </ContentPage.Triggers>
    <Grid  
        ColumnSpacing="0"
        RowSpacing="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="60" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <!-- FILTERS -->
        <Grid
            BackgroundColor="{StaticResource LightGreenColor}"                       
            IsEnabled="{Binding Products.Count, Converter={StaticResource CountToBoolConverter}}">
            <Label 
                Text="FILTER"
                Style="{StaticResource FilterLabelStyle}"/>
            <Grid.GestureRecognizers>
                <TapGestureRecognizer 
                        Tapped="OnFilterChanged"
                        NumberOfTapsRequired="1" />
            </Grid.GestureRecognizers>
        </Grid>
        <!-- CATALOG -->
        <Grid  
            Grid.Row="1">
            <Grid 
                IsVisible="{Binding IsBusy, Converter={StaticResource InverseBoolConverter}}">
                <Label 
                    Text="NO PRODUCTS FOUND"      
                    IsVisible="{Binding Products.Count, Converter={StaticResource InverseCountToBoolConverter}}"
                    HorizontalOptions="Center"
                    VerticalOptions="Center"/>
            </Grid>
            <ListView 
                x:Name="Products"       
                IsVisible="{Binding Products.Count, Converter={StaticResource CountToBoolConverter}}"
                ItemsSource="{Binding Products}"
                HasUnevenRows="True"
                SeparatorVisibility="None"
                CachingStrategy="RecycleElement"
                Style="{StaticResource ProductsListStyle}">
                <ListView.Behaviors>
                    <behaviors:EventToCommandBehavior                    
                        EventName="ItemTapped"
                        Command="{Binding AddCatalogItemCommand}"
                        EventArgsConverter="{StaticResource ItemTappedEventArgsConverter}" />
                </ListView.Behaviors>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <templates:ProductTemplate />
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>
        <!-- INDICATOR -->
        <ActivityIndicator
            Grid.Row="0"
            Grid.RowSpan="2"
            Color="{StaticResource LightGreenColor}"
            IsRunning="{Binding IsBusy}"  
            IsVisible="{Binding IsBusy}"
            VerticalOptions="Center"
            HorizontalOptions="Center">
            <ActivityIndicator.WidthRequest>
                <OnPlatform 
                    x:TypeArguments="x:Double" 
                    iOS="100" 
                    Android="100"
                    WinPhone="400" />
            </ActivityIndicator.WidthRequest>
        </ActivityIndicator>
    </Grid>
</ContentPage>