<?xml version="1.0" encoding="utf-8"?>
<Page
    x:Class="was.droidtransfer.features.ImagePreviewPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:was.droidtransfer.features"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:was.droidtransfer.features.controls"
    xmlns:converters="using:was.droidtransfer.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" />
                <StackPanel x:Name="stackPanelLoading" VerticalAlignment="Center" HorizontalAlignment="Center" Spacing="10">
                    <ProgressRing IsIndeterminate="True" x:Name="progressRingLoading" HorizontalAlignment="Center"/>
                    <TextBlock x:Name="textBlockProgress" Visibility="Collapsed" TextAlignment="Center" />
                </StackPanel>
                
            </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>

