<Page
    x:Class="PCUT.Pages.EditPage"
    Tag="Edit"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PCUT"
    xmlns:localVM="using:PCUT.ViewModels"
    xmlns:localCV="using:PCUT.Converters"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.Resources>
        <localCV:BooleanInverter x:Key="inverter"/>
        <localCV:OpacityConverter x:Key="opacityConverter"/>
        <localVM:ComponentStyle x:Key="previewStyle"/>
        <localVM:ComponentStyle x:Key="componentStyle"/>
    </Page.Resources>

    <Grid>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition x:Name="PreviewRowDefinition" Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="PreviewColumnDefinition" Width="0.65*"/>
                <ColumnDefinition x:Name="ComponentColumnDefinition" Width="0.25*" MinWidth="64"/>
            </Grid.ColumnDefinitions>
            <ScrollViewer
                Grid.Column="0"
                x:Name="MainScroll"
                ZoomMode="Enabled"
                HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Hidden"
                VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Hidden"
                ManipulationMode="TranslateX,TranslateY" ManipulationDelta="MainScroll_ManipulationDelta"
                Loading="MainScroll_Loading">
                <Viewbox Width="{Binding Width, Source={StaticResource previewStyle}, Mode=OneWay}" Height="{Binding Height, Source={StaticResource previewStyle}, Mode=OneWay}">
                    <Image x:Name="MainPreview" Source="{x:Bind PreviewModel.Source, Mode=OneWay}">
                        <Image.ContextFlyout>
                            <MenuFlyout>
                                <MenuFlyoutItem x:Name="MainPreviewRefresh" Text="Refresh" Click="MainPreviewRefresh_Click" />
                                <MenuFlyoutSeparator />
                                <MenuFlyoutItem x:Name="MainPreviewSelectAll" Text="Select All" Click="MainPreviewSelectAll_Click"/>
                                <MenuFlyoutItem x:Name="MainPreviewDeleteAll" Text="Delete All" Click="MainPreviewDeleteAll_Click"/>
                            </MenuFlyout>
                        </Image.ContextFlyout>
                    </Image>
                </Viewbox>
            </ScrollViewer>

            <GridView
                Grid.Column="1"
                x:Name="ComponentPreview"
                ScrollViewer.HorizontalScrollMode="Disabled"
                ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                ScrollViewer.VerticalScrollMode="Enabled"
                ScrollViewer.VerticalScrollBarVisibility="Visible"
                IsSwipeEnabled="True"
                IsItemClickEnabled="True"
                SelectionMode="Single"
                Loading="ComponentPreview_Loading"
                ItemsSource="{x:Bind ComponentModel.ComponentList, Mode=OneWay}">
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <!--<StackPanel Orientation="Vertical"/>-->
                        <ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                <GridView.ItemTemplate>
                    <DataTemplate x:DataType="localVM:ComponentImageSource">
                        <RelativePanel BorderBrush="{ThemeResource SystemAccentColor}" BorderThickness="1">
                            <Viewbox
                                Width="{Binding Width, Source={StaticResource componentStyle}, Mode=OneWay}"
                                Height="{Binding Height, Source={StaticResource componentStyle}, Mode=OneWay}">
                                <Image
                                    Source="{x:Bind Source, Mode=OneWay}"
                                    Opacity="{x:Bind Deleted, Mode=OneWay, Converter={StaticResource opacityConverter}}"
                                    Tapped="Image_Tapped"
                                    Tag="{x:Bind Id}">
                                    <Image.ContextFlyout>
                                        <MenuFlyout>
                                            <MenuFlyoutItem
                                                x:Name="ComponentDelete"
                                                Tag="{x:Bind Id}"
                                                Text="Delete"
                                                IsEnabled="{x:Bind Deleted, Mode=OneWay, Converter={StaticResource inverter}}"
                                                Click="ComponentDelete"/>
                                            <MenuFlyoutItem
                                                x:Name="ComponentRestore"
                                                Tag="{x:Bind Id}"
                                                Text="Restore"
                                                IsEnabled="{x:Bind Deleted, Mode=OneWay}"
                                                Click="ComponentRestore"/>
                                        </MenuFlyout>
                                    </Image.ContextFlyout>
                                </Image>
                            </Viewbox>
                            <CheckBox
                                x:Name="ComponentCheckbox"
                                Tag="{x:Bind Id}" 
                                IsChecked="{x:Bind Deleted, Mode=OneWay, Converter={StaticResource inverter}}"
                                Checked="ComponentRestore"
                                Unchecked="ComponentDelete"/>
                        </RelativePanel>
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>
        </Grid>
        <ProgressRing x:Name="LoadingRing" IsActive="True" Visibility="Visible" Height="96" Width="96"/>
    </Grid>
</Page>
