<UserControl x:Class="PixiEditor.Views.UserControls.Palettes.ColorReplacer"
             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.Palettes"
             xmlns:userControls="clr-namespace:PixiEditor.Views.UserControls"
             xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters"
             xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
             xmlns:behaviours="clr-namespace:PixiEditor.Helpers.Behaviours"
             xmlns:colorPicker="clr-namespace:ColorPicker;assembly=ColorPicker"
             xmlns:views="clr-namespace:PixiEditor.Views"
             xmlns:helpers="clr-namespace:PixiEditor.Helpers"
             xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
             mc:Ignorable="d" Name="uc"
             d:DesignHeight="50" d:DesignWidth="300">
    <Border BorderBrush="{StaticResource DarkerAccentColor}" 
            Background="{StaticResource MainColor}"
            BorderThickness="0 2 0 0" MinWidth="60" Focusable="True">
        <i:Interaction.Behaviors>
            <behaviours:ClearFocusOnClickBehavior/>
        </i:Interaction.Behaviors>
        <Grid>
            <Grid Grid.Row="0"  VerticalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid Grid.ColumnSpan="2" Grid.RowSpan="2">
                    <Grid Visibility="{Binding ElementName=VisibilityCheckbox, Path=IsChecked, Converter={InverseBoolToVisibilityConverter}}"  Background="Transparent"/>
                </Grid>
                <StackPanel Name="MiddleStackPanel" Height="40" Orientation="Horizontal" HorizontalAlignment="Center">
                    <local:PaletteColorControl Color="{Binding ElementName=uc, Path=ColorToReplace}"
                            Height="35" 
                            Width="35" 
                            ui:Translator.TooltipKey="REPLACER_TOOLTIP"
                            AllowDrop="True" Drop="UIElement_OnDrop"/>
                    <Image Source="/Images/Arrow-right.png" Height="20" Width="20" Margin="10 0" FlowDirection="{helpers:Localization FlowDirection}"/>
                    <colorPicker:PortableColorPicker 
                        UseHintColor="True"
                        SelectedColor="{Binding ElementName=uc, Path=NewColor, Mode=TwoWay}"
                        HintColor="{Binding ElementName=uc, Path=HintColor}"
                        Height="37"
                        Style="{StaticResource DefaultColorPickerStyle}"
                        Width="37" Focusable="False" Margin="0 0 10 0"
                        ui:Translator.TooltipKey="CLICK_TO_CHOOSE_COLOR"
                        ShowAlpha="False"/>
                    <Button Click="ReplaceButton_OnClick" ui:Translator.TooltipKey="REPLACE_COLOR"
                            Style="{StaticResource ToolButtonStyle}" Cursor="Hand" Height="20" Width="20">
                        <Button.Background>
                            <ImageBrush ImageSource="/Images/Replace.png"/>
                        </Button.Background>
                    </Button>
                </StackPanel>
                <CheckBox Focusable="False" IsChecked="{Binding ElementName=uc, Path=IsCollapsed}" Panel.ZIndex="10" Name="VisibilityCheckbox" Margin="0,0,5,0" Height="16" HorizontalAlignment="Right">
                    <CheckBox.Triggers>
                        <EventTrigger RoutedEvent="CheckBox.Checked">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="MiddleStackPanel" Storyboard.TargetProperty="Height" From="40" To="0" Duration="0:0:0.15"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="CheckBox.Unchecked">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="MiddleStackPanel" 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>
        </Grid>
    </Border>
</UserControl>
