<?xml version="1.0" encoding="utf-8" ?>
<pages:CallbackPage xmlns="http://xamarin.com/schemas/2014/forms"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    xmlns:pages="clr-namespace:PhilExample.UI.Pages"
                    xmlns:intfs="clr-namespace:PhilExampleCrawler.Common.Interfaces;assembly=PhilExampleCrawler.Common"
                    xmlns:ffimg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms"
                    xmlns:vm="clr-namespace:PhilExample.VMs"
                    xmlns:views="clr-namespace:PhilExample.UI.Views"
                    x:Class="PhilExample.UI.Pages.SelectCategoryPage" 
                    x:TypeArguments="intfs:ICategory"
                    x:DataType="vm:SelectCategoryVM"
                    Shell.NavBarIsVisible="False">


    <ContentPage.Resources>
        <!-- Categories View -->
        <DataTemplate x:Key="_mainCategories">
            <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                <StackLayout Margin="0,12,0,0" Padding="0" Spacing="0"
                             HorizontalOptions="FillAndExpand">

                    <Label Margin="0,0,10,6"
                           Text="Alle Kategorien"
                           FontSize="16" TextColor="{StaticResource Color_Primary}" FontFamily="NunitoSemiBold"
                           HorizontalOptions="StartAndExpand" />

                    <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type vm:SelectCategoryVM}}, Path=SelectSubCategoryCommand}">
                            <TapGestureRecognizer.CommandParameter>
                                <x:Int32>-1</x:Int32>
                            </TapGestureRecognizer.CommandParameter>
                        </TapGestureRecognizer>
                    </StackLayout.GestureRecognizers>
                </StackLayout>


                <CollectionView Margin="0,0,0,0"
                                ItemsSource="{Binding Source={RelativeSource AncestorType={x:Type vm:SelectCategoryVM}}, Path=Categories}"
                                HorizontalScrollBarVisibility="Never"
                                VerticalScrollBarVisibility="Never"
                                ItemsLayout="VerticalList">

                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <views:CategoryMiniView />
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </StackLayout>
        </DataTemplate>

        
        <!-- Subcategories View -->
        <DataTemplate x:Key="_subCategories">
            <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                <StackLayout Margin="0,12,0,12" Padding="0" Spacing="0"
                             Orientation="Horizontal"
                             HorizontalOptions="FillAndExpand">

                    <ffimg:SvgCachedImage IsVisible="{Binding ShowArrow}"
                                          HeightRequest="24"
                                          CacheType="All"
                                          Source="resource://PhilExample.Resources.Images.arrow-left.svg"
                                          VerticalOptions="Center" />
                    
                    <Label Margin="0,0,10,0"
                           Text="Alle Kategorien"
                           FontSize="16" TextColor="{StaticResource Color_Primary}" FontFamily="NunitoSemiBold"
                           HorizontalOptions="StartAndExpand" VerticalOptions="Center" />

                    <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type vm:SelectCategoryVM}}, Path=BackToCategoryCommand}" />
                    </StackLayout.GestureRecognizers>
                </StackLayout>


                <CollectionView Margin="0,0,0,0"
                                ItemsSource="{Binding Source={RelativeSource AncestorType={x:Type vm:SelectCategoryVM}}, Path=SubCategories}"
                                HorizontalScrollBarVisibility="Never"
                                VerticalScrollBarVisibility="Never"
                                ItemsLayout="VerticalList">

                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <views:CategoryMiniView />
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </StackLayout>
        </DataTemplate>

        <vm:CategoryPageTemplateSelector x:Key="_categoryViewSelector"
                                         MainCategories="{StaticResource _mainCategories}"
                                         SubCategories="{StaticResource _subCategories}" />
    </ContentPage.Resources>


    
    
    <ContentPage.Content>
        <StackLayout  Margin="24,24,24,0" 
                      HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

            <views:PopupTitleView Title="Kategorien" CloseCommand="{Binding CloseCommand}"/>

            <CarouselView IsSwipeEnabled="False"
                          CurrentItem="{Binding SelectedPage}"
                          ItemsSource="{Binding AvailablePages}"
                          ItemTemplate="{StaticResource _categoryViewSelector}" />
            
        </StackLayout>
    </ContentPage.Content>
</pages:CallbackPage>