<UserControl x:Class="PixiEditor.Views.UserControls.Layers.ReferenceLayer"
             x:ClassModifier="internal"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:PixiEditor.Views.UserControls.Layers" 
             xmlns:behaviors="clr-namespace:PixiEditor.Helpers.Behaviours" 
             xmlns:i="http://schemas.microsoft.com/xaml/behaviors" 
             xmlns:local1="clr-namespace:PixiEditor.Views.UserControls" 
             xmlns:cmds="clr-namespace:PixiEditor.Models.Commands.XAML"
             xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters"
             xmlns:views="clr-namespace:PixiEditor.Views"
             xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
             mc:Ignorable="d" 
             d:DesignHeight="60" d:DesignWidth="350" VerticalAlignment="Center" Name="uc">
    <Border BorderBrush="{StaticResource DarkerAccentColor}" BorderThickness="0 2 0 0" MinWidth="60"
            Focusable="True" AllowDrop="True" DragEnter="ReferenceLayer_DragEnter" DragLeave="ReferenceLayer_DragLeave" Drop="ReferenceLayer_Drop">
        <i:Interaction.Behaviors>
            <behaviors:ClearFocusOnClickBehavior/>
        </i:Interaction.Behaviors>
        <DockPanel Background="Transparent">
            <CheckBox Focusable="False" Panel.ZIndex="10" Name="visibilityCheckbox" Margin="0,0,5,0" Height="16" HorizontalAlignment="Right" DockPanel.Dock="Right">
                <CheckBox.Triggers>
                    <EventTrigger RoutedEvent="CheckBox.Checked">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="mainDockPanel" Storyboard.TargetProperty="Height" From="40" To="0" Duration="0:0:0.15"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="CheckBox.Unchecked">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="mainDockPanel" Storyboard.TargetProperty="Height" From="0" To="40" Duration="0:0:0.15"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>

                </CheckBox.Triggers>
                <CheckBox.Template>
                    <ControlTemplate TargetType="{x:Type CheckBox}">
                        <StackPanel Orientation="Horizontal" Focusable="False">
                            <Image Focusable="False" Width="14" Cursor="Hand" x:Name="checkboxImage" Source="/Images/ChevronDown.png">
                                <Image.RenderTransform>
                                    <RotateTransform Angle="0"/>
                                </Image.RenderTransform>
                            </Image>
                            <ContentPresenter Focusable="False"/>
                        </StackPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="checkboxImage" Property="RenderTransform">
                                    <Setter.Value>
                                        <RotateTransform Angle="180" CenterX="7" CenterY="4"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </CheckBox.Template>
            </CheckBox>

            <Grid Height="40" x:Name="mainDockPanel">
                <Grid 
                    Visibility="{Binding Document.ReferenceLayerViewModel.ReferenceBitmap, ElementName=uc, Converter={converters:NullToVisibilityConverter}}" 
                    Panel.ZIndex="5">
                    <Grid Cursor="Hand" Visibility="{Binding ElementName=visibilityCheckbox, Path=IsChecked, Converter={InverseBoolToVisibilityConverter}}" Background="Transparent">
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" DockPanel.Dock="Left">
                            <Image Margin="5 0 5 0" Width="20" Source="/Images/Add-reference.png"
                               Visibility="{Binding Document.ReferenceLayerViewModel.ReferenceBitmap, ElementName=uc, Converter={converters:NullToVisibilityConverter}}"/>

                            <TextBlock IsEnabled="{Binding ElementName=uc, Path=IsEnabled}" 
                                        Margin="0 0 5 0" Foreground="White" 
                                        FontSize="15" VerticalAlignment="Center" ui:Translator.Key="ADD_REFERENCE_LAYER"/>
                        </StackPanel>
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="MouseUp">
                                <i:InvokeCommandAction Command="{cmds:Command PixiEditor.Layer.ImportReferenceLayer}"
                                        PassEventArgsToCommand="True"/>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Grid>
                </Grid>

                <DockPanel Grid.Row="0" VerticalAlignment="Center" Height="40"
                           Visibility="{Binding Document.ReferenceLayerViewModel.ReferenceBitmap, ElementName=uc, Converter={converters:NotNullToVisibilityConverter}}" >
                    <Grid Height="16" Name="layerVisibilityCheckboxGrid" DockPanel.Dock="Left" Margin="10,0,5,0">
                        <CheckBox 
                            Style="{StaticResource ImageCheckBox}" VerticalAlignment="Center"
                            IsThreeState="False" HorizontalAlignment="Center" 
                            IsChecked="{Binding Path=Document.ReferenceLayerViewModel.IsVisibleBindable, Mode=TwoWay, ElementName=uc}"/>
                    </Grid>
                    <Button Cursor="Hand" DockPanel.Dock="Left"
                            Command="{cmds:Command PixiEditor.Layer.ToggleReferenceLayerTopMost}"
                            Style="{StaticResource ImageButtonStyle}" 
                            ToolTip="{Binding Document.ReferenceLayerViewModel.IsTopMost, ElementName=uc, Converter={converters:BoolToValueConverter FalseValue='localized:PUT_REFERENCE_LAYER_ABOVE', TrueValue='localized:PUT_REFERENCE_LAYER_BELOW'}}"
                            RenderOptions.BitmapScalingMode="HighQuality"
                            Width="20" Height="20" HorizontalAlignment="Right">
                        <Button.Background>
                            <ImageBrush ImageSource="{Binding Document.ReferenceLayerViewModel.IsTopMost, ElementName=uc, Converter={converters:BoolToValueConverter FalseValue='Images/ReferenceLayerBelow.png', TrueValue='Images/ReferenceLayerAbove.png'}}"/>
                        </Button.Background>
                    </Button>
                    <Border 
                        HorizontalAlignment="Left" DockPanel.Dock="Left"
                        Width="30" Height="30"
                        BorderThickness="1" 
                        BorderBrush="Black"
                        Background="{StaticResource MainColor}"
                        Margin="5, 0, 10, 0">
                        <Image Source="{Binding Document.ReferenceLayerViewModel.ReferenceBitmap,ElementName=uc}" Stretch="Uniform" Width="26" Height="26"
                               RenderOptions.BitmapScalingMode="HighQuality" IsHitTestVisible="False"/>
                    </Border>
                    <Button Cursor="Hand" Grid.Column="1" DockPanel.Dock="Right"
                                Command="{cmds:Command PixiEditor.Layer.DeleteReferenceLayer}"
                                Style="{StaticResource ImageButtonStyle}" 
                                RenderOptions.BitmapScalingMode="HighQuality"
                                Margin="3,0,5,0"
                                Width="20" Height="20" HorizontalAlignment="Right">
                        <Button.Background>
                            <ImageBrush ImageSource="/Images/Trash.png"/>
                        </Button.Background>
                    </Button>
                    <Button Cursor="Hand" DockPanel.Dock="Right"
                            Command="{cmds:Command PixiEditor.Layer.ResetReferenceLayerPosition}"
                            Style="{StaticResource ImageButtonStyle}" 
                            ui:Translator.TooltipKey="RESET_REFERENCE_LAYER_POS"
                            RenderOptions.BitmapScalingMode="HighQuality"
                            Width="20" Height="20" HorizontalAlignment="Right">
                        <Button.Background>
                            <ImageBrush ImageSource="/Images/Layout.png"/>
                        </Button.Background>
                    </Button>
                    <Button Cursor="Hand" DockPanel.Dock="Right"
                            Command="{cmds:Command PixiEditor.Layer.TransformReferenceLayer}"
                            Style="{StaticResource ImageButtonStyle}" 
                            ui:Translator.TooltipKey="TRANSFORM_REFERENCE_LAYER"
                            RenderOptions.BitmapScalingMode="HighQuality"
                            Width="20" Height="20" HorizontalAlignment="Right">
                        <Button.Background>
                            <ImageBrush ImageSource="/Images/Crop.png"/>
                        </Button.Background>
                    </Button>
                    <TextBlock IsEnabled="{Binding ElementName=uc, Path=IsEnabled}" HorizontalAlignment="Center"
                               Margin="0 0 5 0" Foreground="White" 
                               FontSize="15" VerticalAlignment="Center" ui:Translator.Key="REFERENCE"/>
                </DockPanel>
            </Grid>
        </DockPanel>
    </Border>
</UserControl>
