<Page
    x:Class="PCUT.Pages.CategoriesViewPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PCUT.Pages"
    xmlns:viewmodels="using:PCUT.ViewModels"
    xmlns:models="using:PCUT.Models.Categories"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Loaded="Page_Loaded">
    <Page.Resources>
        <DataTemplate x:Key="CategoryTemplate" x:DataType="models:CategoryModel">
            <TreeViewItem ItemsSource="{Binding CategoryMetadata}" Tapped="TreeViewItem_Tapped">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.05*"/>
                        <ColumnDefinition Width="0.05*"/>
                        <ColumnDefinition Width="0.05*"/>
                        <ColumnDefinition Width="0.3*"/>
                        <ColumnDefinition Width="0.4*"/>
                        <ColumnDefinition Width="0.15*"/>
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="0" BorderBrush="Black" BorderThickness="1,0,0,1">
                        <TextBlock Text="{Binding DisplayId, Mode=OneTime}" Margin="10" Foreground="Black" HorizontalAlignment="Center"/>
                    </Border>
                    <Border Grid.Column="1" Grid.ColumnSpan="3" BorderBrush="Black" BorderThickness="1,0,0,1">
                        <TextBlock Text="{Binding Name , Mode=OneWay}" Margin="10" Foreground="Black"/>
                    </Border>
                    <Border Grid.Column="4" BorderBrush="Black" BorderThickness="1,0,0,1">
                        <TextBlock Text="{Binding Description , Mode=OneWay}" Margin="10" Foreground="Black"/>
                    </Border>
                    <Border Grid.Column="5" BorderBrush="Black" BorderThickness="1,0,1,1" >
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                            <Button Margin="5" Click="EditCategory_Click" CommandParameter="{Binding Id}" HorizontalAlignment="Center">
                                <FontIcon Glyph="&#xE70F;"/>
                            </Button>
                            <Button Margin="5" Click="DeleteButton_Click" CommandParameter="{Binding Id}">
                                <FontIcon Glyph="&#xE74D;"/>
                            </Button>
                        </StackPanel>
                    </Border>
                </Grid>
            </TreeViewItem>
        </DataTemplate>

        <DataTemplate x:Key="MetadataTypeTemplate" x:DataType="models:MetadataTypeModel">
            <TreeViewItem ItemsSource="{Binding Metadata}" Tapped="TreeViewItem_Tapped" Tag="Load" IsExpanded="{Binding IsExpanded, Mode=OneWay}">
                <TreeViewItem.Style>
                    <Style TargetType="TreeViewItem">
                        <Setter Property="HorizontalAlignment" Value="Stretch" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="TreeViewItem">
                                    <ListViewItemPresenter ContentMargin="0" Padding="0" />
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </TreeViewItem.Style>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.05*"/>
                        <ColumnDefinition Width="0.05*"/>
                        <ColumnDefinition Width="0.05*"/>
                        <ColumnDefinition Width="0.3*"/>
                        <ColumnDefinition Width="0.4*"/>
                        <ColumnDefinition Width="0.15*"/>
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="1" BorderBrush="Black" BorderThickness="1,0,0,1">
                        <TextBlock Text="{Binding DisplayId, Mode=OneTime}" Margin="10" Foreground="Black" HorizontalAlignment="Center"/>
                    </Border>
                    <Border Grid.Column="2" Grid.ColumnSpan="2" BorderBrush="Black" BorderThickness="1,0,0,1">
                        <TextBlock Text="{Binding Name, Mode=OneTime}" Margin="10" Foreground="Black" HorizontalAlignment="Left"/>
                    </Border>
                    <Border Grid.Column="4" BorderBrush="Black" BorderThickness="1,0,0,1" />
                    <Border Grid.Column="5" BorderBrush="Black" BorderThickness="1,0,1,1" >
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                            <Button Margin="5" Click="AddMetadataButton_Click" CommandParameter="{Binding}">
                                <FontIcon Glyph="&#xECC8;"/>
                            </Button>
                        </StackPanel>
                    </Border>
                </Grid>
            </TreeViewItem>
        </DataTemplate>

        <DataTemplate x:Key="MetadataTemplate" x:DataType="models:CategoryMetadataModel">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.05*"/>
                    <ColumnDefinition Width="0.05*"/>
                    <ColumnDefinition Width="0.05*"/>
                    <ColumnDefinition Width="0.3*"/>
                    <ColumnDefinition Width="0.4*"/>
                    <ColumnDefinition Width="0.15*"/>
                </Grid.ColumnDefinitions>
                <Border Grid.Column="2" BorderBrush="Black" BorderThickness="1,0,0,1">
                    <TextBlock Text="{Binding DisplayId, Mode=OneTime}" Margin="10" Foreground="Black" HorizontalAlignment="Center"/>
                </Border>
                <Border Grid.Column="3" BorderBrush="Black" BorderThickness="1,0,0,1">
                    <TextBlock Text="{Binding Value, Mode=OneTime}" Margin="10" Foreground="Black" HorizontalAlignment="Left"/>
                </Border>
                <Border Grid.Column="4" BorderBrush="Black" BorderThickness="1,0,0,1" />
                <Border Grid.Column="5" BorderBrush="Black" BorderThickness="1,0,1,1" >
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                        <Button Margin="5" Click="EditMetadataButton_Click" CommandParameter="{Binding}" HorizontalAlignment="Center">
                            <FontIcon Glyph="&#xE70F;"/>
                        </Button>
                        <Button Margin="5" Click="DeleteMetadataButton_Click" CommandParameter="{Binding Id}" HorizontalAlignment="Center">
                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE74D;"/>
                        </Button>
                    </StackPanel>
                </Border>
            </Grid>
        </DataTemplate>

        <models:CategoryTemplateSelector
            x:Key="CategoryTemplateSelector"
            CategoryTemplate="{StaticResource CategoryTemplate}"
            MetadataTypeTemplate="{StaticResource MetadataTypeTemplate}"
            MetadataTemplate="{StaticResource MetadataTemplate}" />
    </Page.Resources>
    
    <Page.DataContext>
        <viewmodels:CategoriesViewModel/>
    </Page.DataContext>
    
    <Page.Background>
        <SolidColorBrush Color="White" />
    </Page.Background>

    <Page.Transitions>
        <TransitionCollection>
            <EntranceThemeTransition />
        </TransitionCollection>
    </Page.Transitions>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.2*"/>
            <RowDefinition Height="0.7*"/>
            <RowDefinition Height="0.1*"/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="2">
            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
                <Button x:Name="btnFirst" Content="First" Click="btnFirst_Click"/>
                <Button x:Name="btnPrevious" Content="Previous" Click="btnPrevious_Click"/>
                <TextBlock x:Name="txtPageNumber" VerticalAlignment="Center" Margin="10">
                            <Run Text="{Binding Pagination.Page, Mode=OneWay}" />
                            <Run Text="/" />
                            <Run Text="{Binding Pagination.TotalPage, Mode=OneWay}" />
                </TextBlock>
                <Button x:Name="btnNext" Content="Next" Click="btnNext_Click"/>
                <Button x:Name="btnLast" Content="Last" Click="btnLast_Click"/>
                <ComboBox
                    VerticalAlignment="Center"
                    ItemsSource="{Binding Pagination.AvailablePageSizes}"
                    SelectedItem="{Binding Pagination.PageSize, Mode=TwoWay}" />
                <TextBlock VerticalAlignment="Center" Text="records/page"/>
                <TextBlock  VerticalAlignment="Center">
                    <Run Text=" (total" />
                    <Run Text="{Binding Pagination.TotalRecords, Mode=TwoWay}" />
                    <Run Text="records)" />
                </TextBlock>
            </StackPanel>
        </Grid>
        <Grid Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid Grid.Row="0">
                <Button Content="Add" Width="140" Background="{ThemeResource SystemAccentColor}" CornerRadius="20" Click="AddCategory_Button" HorizontalAlignment="Right" VerticalAlignment="Center"/>
            </Grid>
            <Grid Grid.Row="1">
                <TextBox x:Name="SearchTextBox" Text="{Binding Pagination.SearchText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Top" HorizontalAlignment="Right" PlaceholderText="Search" CornerRadius="20" Width="300"/>
            </Grid>
        </Grid>

        <!--Table View-->
        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="46"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.05*"/>
                    <ColumnDefinition Width="0.4*"/>
                    <ColumnDefinition Width="0.4*"/>
                    <ColumnDefinition Width="0.15*"/>
                </Grid.ColumnDefinitions>
                <Border Grid.Column="0" BorderBrush="Black" BorderThickness="1,1,0,1" Background="Gray">
                    <TextBlock Text="No." Margin="10" Foreground="Black" FontFamily="/Fonts/#Rubik Medium" FontSize="20"
               HorizontalAlignment="Center"/>
                </Border>

                <Border Grid.Column="1" BorderBrush="Black" BorderThickness="1,1,0,1" Background="Gray">
                    <TextBlock Text="Name" Margin="10" Foreground="Black" FontFamily="/Fonts/#Rubik Medium" FontSize="20"
               HorizontalAlignment="Center"/>
                </Border>
                <Border Grid.Column="2" BorderBrush="Black" BorderThickness="1,1,0,1" Background="Gray">
                    <TextBlock Text="Description" Margin="10" Foreground="Black" FontFamily="/Fonts/#Rubik Medium" FontSize="20"
               HorizontalAlignment="Center"/>
                </Border>

                <Border Grid.Column="3" BorderBrush="Black" BorderThickness="1,1,0,1" Background="Gray">
                    <TextBlock Text="Action" Margin="10" Foreground="Black" FontFamily="/Fonts/#Rubik Medium" FontSize="20"
               HorizontalAlignment="Center"/>
                </Border>
            </Grid>
            <TreeView
                Grid.Row="1"
                x:Name="CategoriesListView"
                ItemsSource="{Binding FilteredCategories.Items}"
                ItemTemplateSelector="{StaticResource CategoryTemplateSelector}"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Top">
                <TreeView.ItemContainerStyle>
                    <Style TargetType="TreeViewItem">
                        <Setter Property="HorizontalAlignment" Value="Stretch" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="TreeViewItem">
                                    <ListViewItemPresenter ContentMargin="0" Padding="0" />
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </TreeView.ItemContainerStyle>
            </TreeView>
        </Grid>
    </Grid>
</Page>
