<UserControl x:Class="PixiEditor.Views.UserControls.SizePicker"
             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:i="http://schemas.microsoft.com/xaml/behaviors"
             xmlns:local="clr-namespace:PixiEditor.Views"
             xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters"
             xmlns:enums="clr-namespace:PixiEditor.Models.Enums"
             xmlns:userControls="clr-namespace:PixiEditor.Views.UserControls"
             xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
             mc:Ignorable="d" Background="Transparent"
             d:DesignHeight="200" d:DesignWidth="240" Name="uc">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Loaded">
            <i:InvokeCommandAction Command="{Binding ElementName=uc, Path=LoadedCommand}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <UserControl.Resources>
        <Style TargetType="userControls:SizeInput">
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="MaxSize" Value="9999"/>
            <Setter Property="BehaveLikeSmallEmbeddedField" Value="False"/>
            <Setter Property="FontSize" Value="12"/>
            <Setter Property="Margin" Value="10,0,0,0"/>
            <Setter Property="Height" Value="25"/>
        </Style>
    </UserControl.Resources>
    <Border Background="{StaticResource MainColor}" VerticalAlignment="Stretch" CornerRadius="10" Padding="15,0">
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <Grid Height="60" HorizontalAlignment="Stretch" DockPanel.Dock="Top"
                  Visibility="{Binding SizeUnitSelectionVisibility, ElementName=uc}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="30"/>
                </Grid.RowDefinitions>

                <Grid HorizontalAlignment="Stretch">
                <RadioButton Grid.Row="0"
                             x:Name="PercentageRb" 
                             Foreground="White" 
                             FontSize="12"
                             GroupName="Unit"
                             Margin="0,0,5,0"
                             Checked="PercentageRb_Checked"
                             HorizontalAlignment="Left"
                             VerticalAlignment="Center"
                             IsChecked="{Binding Path=SelectedUnit,  
                                              ElementName=uc, 
                                              Converter={converters:EnumBooleanConverter}, 
                                              ConverterParameter=Percentage,
                                              Mode=TwoWay
                                              }" ui:Translator.Key="PERCENTAGE"/>
                <userControls:SizeInput Grid.Row="0" 
                                     VerticalAlignment="Center"
                                     HorizontalAlignment="Right"
                                     x:Name="PercentageSizePicker"
                                     IsEnabled="{Binding EditingEnabled, ElementName=uc}"
                                     Size="{Binding Path=ChosenPercentageSize, ElementName=uc, Mode=TwoWay}"
                                     Unit="Percentage"
                                     Margin="-10,0,0,0"
                                     MaxSize="999900"
                                     Width="{Binding ActualWidth, ElementName=WidthPicker}">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="LostFocus">
                            <i:InvokeCommandAction Command="{Binding ElementName=uc, Path=PercentageLostFocusCommand}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </userControls:SizeInput>
                </Grid>

                <RadioButton Grid.Row="1" Grid.Column="0"  
                             x:Name="AbsoluteRb" 
                             Foreground="White" 
                             FontSize="12"
                             GroupName="Unit"
                             Checked="AbsoluteRb_Checked"
                             VerticalAlignment="Center"
                             IsChecked="{Binding Path=SelectedUnit,  
                                              ElementName=uc, 
                                              Converter={converters:EnumBooleanConverter},
                                              Mode=TwoWay,
                                              ConverterParameter=Pixel}" ui:Translator.Key="ABSOLUTE"/>

            </Grid>

            <Grid Height="90" HorizontalAlignment="Center" DockPanel.Dock="Top">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>

                <TextBlock Grid.Column="0" Grid.Row="0" Foreground="Snow" ui:Translator.Key="WIDTH" VerticalAlignment="Center" HorizontalAlignment="Left" />
                <userControls:SizeInput Grid.Column="1" Grid.Row="0"
                             x:Name="WidthPicker"
                             IsEnabled="{Binding EditingEnabled, ElementName=uc}"
                             Size="{Binding Path=ChosenWidth, ElementName=uc, Mode=TwoWay}"
                             Margin="50,0,0,0">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="LostFocus">
                            <i:InvokeCommandAction Command="{Binding ElementName=uc, Path=WidthLostFocusCommand}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </userControls:SizeInput>

                <TextBlock Grid.Column="0" Grid.Row="1" Foreground="Snow" ui:Translator.Key="HEIGHT" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                <userControls:SizeInput Grid.Column="1" Grid.Row="1"
                             x:Name="HeightPicker" 
                             IsEnabled="{Binding EditingEnabled, ElementName=uc}"
                             Margin="50,0,0,0"
                             Size="{Binding ChosenHeight, ElementName=uc, Mode=TwoWay}">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="LostFocus">
                            <i:InvokeCommandAction Command="{Binding ElementName=uc, Path=HeightLostFocusCommand}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </userControls:SizeInput>

                <CheckBox
                  Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2"
                  Name="aspectRatio" 
                  IsChecked="{Binding ElementName=uc, Path=PreserveAspectRatio}"
                  ui:Translator.Key="PRESERVE_ASPECT_RATIO"
                  Foreground="White" 
                  HorizontalAlignment="Left" 
                  VerticalAlignment="Center" />
            </Grid>
        </StackPanel>
    </Border>
</UserControl>
