<Page
    x:Class="was.touchcopy.features.ImagePreviewPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="using:was.touchcopy.features"
    xmlns:controls="using:was.touchcopy.features.controls"
    xmlns:converters="using:was.touchcopy.features.converters"
    mc:Ignorable="d"  d:DataContext="{d:DesignInstance Type=local:ImagePreviewPage}"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.Resources>
        <ResourceDictionary>
            <converters:ByteCountToFileSizeStringConverter x:Key="ByteCountToFileSizeStringConverter"/>
            <converters:DateTimeToShortDateStringConverter x:Key="DateTimeToShortDateStringConverter"/>
            <converters:DateTimeToShortTimeStringConverter x:Key="DateTimeToShortTimeStringConverter"/>
        </ResourceDictionary>
    </Page.Resources>

    <Grid x:Name="imagePreviewGrid" Background="Black" CornerRadius="{ThemeResource HyperlinkFocusRectCornerRadius}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <CheckBox x:Name="checkBoxFitToSize" IsChecked="true" x:Uid="checkBoxFitToSize" Content="XX Scale to fit" 
                      BorderBrush="White" Margin="10,10,0,0" Checked="CheckBoxFitToSize_Checked" Unchecked="CheckBoxFitToSize_Unchecked">
                <CheckBox.Resources>
                    <ResourceDictionary>
                        <ResourceDictionary.ThemeDictionaries>
                            <ResourceDictionary x:Key="Light">
                                <SolidColorBrush x:Key="CheckBoxForegroundChecked"
                        Color="{Binding ThemeTextColor}"/>
                                <SolidColorBrush x:Key="CheckBoxForegroundUnchecked"
                        Color="{Binding ThemeTextColor}"/>
                                <SolidColorBrush x:Key="CheckBoxForegroundCheckedPointerOver"
                        Color="{Binding ThemeTextColor}"/>
                                <SolidColorBrush x:Key="CheckBoxForegroundUncheckedPointerOver"
                        Color="{Binding ThemeTextColor}"/>
                                <SolidColorBrush x:Key="CheckBoxCheckBackgroundFillCheckedPointerOver"
                        Color="White"/>
                                <SolidColorBrush x:Key="CheckBoxCheckBackgroundFillUncheckedPointerOver"
                        Color="White"/>
                                <SolidColorBrush x:Key="CheckBoxCheckGlyphForegroundChecked"
                        Color="Black"/>
                                <SolidColorBrush x:Key="CheckBoxCheckGlyphForegroundCheckedPointerOver"
                        Color="Black"/>
                                <SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeChecked"  
                        Color="Black"/>
                                <SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeCheckedPointerOver"  
                        Color="Black"/>
                                <SolidColorBrush x:Key="CheckBoxCheckBackgroundFillChecked"
                        Color="White"/>
                                <SolidColorBrush x:Key="CheckBoxCheckBackgroundFillUnchecked"
                        Color="Gray"/>
                            </ResourceDictionary>
                        </ResourceDictionary.ThemeDictionaries>
                    </ResourceDictionary>
                </CheckBox.Resources>
            </CheckBox>

            <StackPanel Grid.Column="1" Orientation="Horizontal"  HorizontalAlignment="Right" Margin="0,0,10,0">
                <StackPanel.Resources>
                    <Style TargetType="Button">
                        <Setter Property="Height" Value="32"/>
                        <Setter Property="BorderThickness" Value="0"/>
                        <Setter Property="Background" Value="Transparent"/>
                    </Style>
                </StackPanel.Resources>
                <Button x:Name="buttonInfo">
                    <Button.Content>
                        <FontIcon  Glyph="&#xE946;"/>
                    </Button.Content>
                    <Button.Flyout>
                        <Flyout  Placement="TopEdgeAlignedRight"   >
                            <Flyout.FlyoutPresenterStyle>
                                <Style TargetType="FlyoutPresenter">
                                    <Setter Property="CornerRadius" Value="6"/>
                                    <Setter Property="Background" Value="{ThemeResource AcrylicInAppFillColorDefaultBrush}"/>
                                </Style>
                            </Flyout.FlyoutPresenterStyle>
                            <Grid Margin="0,10,0,0" >
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition Height="auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Grid.Resources>
                                    <Style TargetType="TextBlock">
                                        <Setter Property="HorizontalAlignment" Value="Right"/>
                                        <Setter Property="Margin" Value="2,2,10,2"/>
                                    </Style>
                                </Grid.Resources>
                                <TextBlock x:Uid="TextBlockImgDetails" FontWeight="Bold" Text="Image Details..." Grid.ColumnSpan="2" Margin="0,0,0,10" HorizontalAlignment="Left"/>
                                <TextBlock x:Uid="TextBlockImgDetailsSize" Grid.Row="1"  Text="Size :" />
                                <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding DisplayedPreviewImage.FileSize, Converter={StaticResource ByteCountToFileSizeStringConverter}, ConverterParameter=-}" HorizontalAlignment="Left"/>
                                <TextBlock x:Uid="TextBlockImgDetailsDate" Grid.Row="2" x:Name="textBlockImgDetailsDate" Text="XX Date"/>
                                <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding DisplayedPreviewImage.FileDate, Converter={StaticResource DateTimeToShortDateStringConverter}, ConverterParameter=-}" HorizontalAlignment="Left"/>
                                <TextBlock x:Uid="TextBlockImgDetailsTime" Grid.Row="3" Text="XX Time :" />
                                <TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding DisplayedPreviewImage.FileDate, Converter={StaticResource DateTimeToShortTimeStringConverter}, ConverterParameter=-}" HorizontalAlignment="Left"/>
                                <TextBlock x:Uid="TextBlockImgDetailsWidth" Grid.Row="4" Text="XX Width :"/>
                                <TextBlock Grid.Row="4" Grid.Column="1" Text="{Binding ImageWidth}" HorizontalAlignment="Left"/>
                                <TextBlock x:Uid="TextBlockImgDetailsHeight" Grid.Row="5" Text="XX Height :"/>
                                <TextBlock Grid.Row="5" Grid.Column="1" Text="{Binding ImageHeight}" HorizontalAlignment="Left"/>
                            </Grid>
                        </Flyout>
                    </Button.Flyout>
                </Button>
                <Button x:Name="buttonClose" Click="ButtonClose_Click" >
                    <Button.Content>
                        <FontIcon Glyph="&#xE8BB;"/>
                    </Button.Content>
                </Button>
            </StackPanel>
        </Grid>

        <Grid Grid.Row="1" Margin="0,10,0,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="54"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="54"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="buttonPrevious" Background="Transparent" VerticalAlignment="Center" BorderThickness="0" Margin="5,0" Click="ButtonPrevious_Click">
                <Button.Content>
                    <SymbolIcon Symbol="Back" />
                </Button.Content>
            </Button>

            <Grid Grid.Column="1">
                <ScrollViewer  x:Name="scrollViewerImage" HorizontalScrollMode="Auto" VerticalScrollMode="Auto" 
                          VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
                    <Image x:Name="imagePreview" HorizontalAlignment="Center" />
                </ScrollViewer>
                <controls:VideoFileViewerControl x:Name="videoFileViewer" Visibility="Collapsed" AutoPlay="True" />
                <TextBlock x:Name="textBlockError" VerticalAlignment="Center" TextAlignment="Center" />
                <ProgressRing IsIndeterminate="True" x:Name="progressRingLoading" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>

            <Button Grid.Column="2" x:Name="buttonNext" Background="Transparent" BorderThickness="0" VerticalAlignment="Center" Margin="5,0" Click="ButtonNext_Click">
                <Button.Content>
                    <SymbolIcon Symbol="Forward" />
                </Button.Content>
            </Button>
        </Grid>

        <Grid Grid.Row="2">
            <StackPanel x:Name="stackPanelImageDetails">
                <TextBlock x:Name="textBlockName" Text="{Binding DisplayedPreviewImage.FileName}" />
            </StackPanel>
        </Grid>
        
        <Grid.ContextFlyout>
            <MenuFlyout x:Name="menuFlyoutOptions" Opening="menuFlyoutOptions_Opening">
                <RadioMenuFlyoutItem Tag="scale_fit" x:Name="radioMenuScaleToFit" x:Uid="RadioMenuScaleToFit" Text="View to fit" GroupName="view" IsChecked="True" Click="RadioMenuFlyout_Click">
                    <RadioMenuFlyoutItem.Icon>
                        <FontIcon Glyph="&#xE740;"/>
                    </RadioMenuFlyoutItem.Icon>
                </RadioMenuFlyoutItem>
                <RadioMenuFlyoutItem Tag="scale_none" x:Name="radioMenuNotScaleToFit" x:Uid="RadioMenuNotScaleToFit" Text="View 1:1"  GroupName="view"  Click="RadioMenuFlyout_Click">
                    <RadioMenuFlyoutItem.Icon>
                        <FontIcon Glyph="&#xE73F;"/>
                    </RadioMenuFlyoutItem.Icon>
                </RadioMenuFlyoutItem>
                <MenuFlyoutSeparator/>
                <MenuFlyoutSubItem x:Name="radioMenuBackground" Text="Background">
                    <RadioMenuFlyoutItem x:Name="radioMenuBackgroundBlack" Tag="background_black" Text="Black" GroupName="background" IsChecked="True" Click="RadioMenuFlyout_Click"/>
                    <RadioMenuFlyoutItem x:Name="radioMenuBackgroundGray" Tag="background_gray" Text="Gray" GroupName="background"  Click="RadioMenuFlyout_Click"/>
                    <RadioMenuFlyoutItem x:Name="radioMenuBackgroundWhite" Tag="background_white" Text="White" GroupName="background"  Click="RadioMenuFlyout_Click"/>
                </MenuFlyoutSubItem>
            </MenuFlyout>
        </Grid.ContextFlyout>
    </Grid>
</Page>
