<UserControl x:Class="PixiEditor.Views.UserControls.Layers.LayersManager"
             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:docVm="clr-namespace:PixiEditor.ViewModels.SubViewModels.Document"
             xmlns:ui="clr-namespace:PixiEditor.Helpers.UI"
             xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
             xmlns:beh="clr-namespace:PixiEditor.Helpers.Behaviours"
             xmlns:vws="clr-namespace:PixiEditor.Views" 
             xmlns:sys="clr-namespace:System;assembly=mscorlib" 
             xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters" 
             xmlns:commands="clr-namespace:PixiEditor.Models.Commands.XAML" 
             xmlns:layerUserControls="clr-namespace:PixiEditor.Views.UserControls.Layers"
             xmlns:userControls="clr-namespace:PixiEditor.Views.UserControls"
             xmlns:uiExt="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="250" x:Name="layersManager">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="58"/>
            <RowDefinition Height="15"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" HorizontalAlignment="Stretch" Background="{StaticResource MainColor}">
            <DockPanel HorizontalAlignment="Stretch" Margin="3,5,3,3">
                <Button 
                    Command="{commands:Command PixiEditor.Layer.NewLayer}" 
                    DockPanel.Dock="Left"
                    Height="24" Width="24" Cursor="Hand" uiExt:Translator.TooltipKey="NEW_LAYER"
                    HorizontalAlignment="Stretch" Margin="0,0,5,0"
                    Style="{StaticResource ToolButtonStyle}"
                    FlowDirection="LeftToRight">
                    <Button.Background>
                        <ImageBrush ImageSource="/Images/Layer-add.png"/>
                    </Button.Background>
                </Button>
                <Button 
                    Command="{commands:Command PixiEditor.Layer.NewFolder}" 
                    Height="24" Width="24" uiExt:Translator.TooltipKey="NEW_FOLDER" Cursor="Hand"
                    DockPanel.Dock="Left"
                    HorizontalAlignment="Stretch"  Margin="0,0,5,0"
                    Style="{StaticResource ToolButtonStyle}"
                    FlowDirection="LeftToRight">
                    <Button.Background>
                        <ImageBrush ImageSource="/Images/Folder-add.png"/>
                    </Button.Background>
                </Button>
                <Button 
                    Command="{commands:Command PixiEditor.Layer.DeleteSelected}" Height="24" Width="24" uiExt:Translator.TooltipKey="LAYER_DELETE_ALL_SELECTED"
                    Cursor="Hand"
                    HorizontalAlignment="Stretch" Margin="0,0,5,0"
                    DockPanel.Dock="Left"
                    Style="{StaticResource ToolButtonStyle}"
                    FlowDirection="LeftToRight">
                    <Button.Background>
                        <ImageBrush ImageSource="/Images/Trash.png"/>
                    </Button.Background>
                </Button>
                <Button 
                    Command="{commands:Command PixiEditor.Layer.MergeWithBelow}" Height="24" Width="24" uiExt:Translator.TooltipKey="MERGE_WITH_BELOW" Cursor="Hand"
                    DockPanel.Dock="Right"
                    HorizontalAlignment="Stretch" Margin="5,0,0,0"
                    Style="{StaticResource ToolButtonStyle}"
                    FlowDirection="LeftToRight">
                    <Button.Background>
                        <ImageBrush ImageSource="/Images/Merge-downwards.png"/>
                    </Button.Background>
                </Button>
                <Button 
                    Height="24" Width="24" uiExt:Translator.TooltipKey="CREATE_MASK" Cursor="Hand"
                    DockPanel.Dock="Right"
                    HorizontalAlignment="Stretch" Margin="5,0,0,0"
                    Style="{StaticResource ToolButtonStyle}"
                    Command="{commands:Command PixiEditor.Layer.CreateMask}"
                    FlowDirection="LeftToRight">
                    <Button.Background>
                        <ImageBrush ImageSource="/Images/Create-mask.png"/>
                    </Button.Background>
                </Button>
                <Button 
                    Height="24" Width="24" uiExt:Translator.TooltipKey="LOCK_TRANSPARENCY" Cursor="Hand"
                    DockPanel.Dock="Right"
                    HorizontalAlignment="Stretch" Margin="5,0,0,0"
                    Style="{StaticResource ToolButtonStyle}"
                    Command="{commands:Command PixiEditor.Layer.ToggleLockTransparency}"
                    FlowDirection="LeftToRight">
                    <Button.Background>
                        <ImageBrush ImageSource="/Images/Lock-alpha.png"/>
                    </Button.Background>
                </Button>
                <Grid/>
            </DockPanel>
            <DockPanel Margin="3,0">
                <userControls:BlendModeComboBox
                    DockPanel.Dock="Left"
                    Margin="0,0,5,0"
                    Width="80"
                    SelectedBlendMode="{Binding ActiveDocument.SelectedStructureMember.BlendModeBindable, Mode=TwoWay, ElementName=layersManager}" />
                <userControls:NumberInput
                    Min="0" Max="100"
                    x:Name="numberInput"
                    d:Value="100"
                    DockPanel.Dock="Right"
                    IsEnabled="{Binding Path=ActiveDocument, ElementName=layersManager, Converter={converters:NotNullToVisibilityConverter}}" 
                    Width="35" Height="20"
                    Margin="5,0,0,0"
                    VerticalAlignment="Center"
                    LostFocus="NumberInput_LostFocus">
                    <userControls:NumberInput.Value>
                        <Binding
                            Mode="TwoWay"
                            ElementName="layersManager"
                            Path="ActiveDocument.SelectedStructureMember.OpacityBindable"
                            Converter="{converters:MultiplyConverter}">
                            <Binding.ConverterParameter>
                                <sys:Double>100</sys:Double>
                            </Binding.ConverterParameter>
                        </Binding>
                    </userControls:NumberInput.Value>
                </userControls:NumberInput>
                <Slider
                    Minimum="0"
                    Maximum="1"
                    SmallChange="0.01"
                    LargeChange="0.1"
                    IsSnapToTickEnabled="True"
                    TickFrequency="0.01"
                    x:Name="opacitySlider"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Stretch">
                    <i:Interaction.Behaviors>
                        <beh:SliderUpdateBehavior
                                Binding="{Binding ElementName=layersManager, Path=ActiveDocument.SelectedStructureMember.OpacityBindable, Mode=OneWay}"
                                DragStarted="{commands:Command PixiEditor.Layer.OpacitySliderDragStarted}"
                                DragValueChanged="{commands:Command PixiEditor.Layer.OpacitySliderDragged, UseProvided=True}"
                                DragEnded="{commands:Command PixiEditor.Layer.OpacitySliderDragEnded}"
                                SetOpacity="{commands:Command PixiEditor.Layer.OpacitySliderSet, UseProvided=True}"
                                ValueFromSlider="{Binding ElementName=opacitySlider, Path=Value, Mode=TwoWay}" />
                    </i:Interaction.Behaviors>
                </Slider>
            </DockPanel>
        </StackPanel>
        <Separator Grid.Row="1" Margin="0,-12, 0, 0" BorderBrush="{StaticResource DarkerAccentColor}" BorderThickness="2" />
        <DockPanel LastChildFill="True" Grid.Row="2" Margin="0, -12, 0, 0">
            <layerUserControls:ReferenceLayer
                DockPanel.Dock="Bottom"
                Document="{Binding Path=ActiveDocument, ElementName=layersManager}"
                Visibility="{Binding Path=ActiveDocument, ElementName=layersManager, Converter={converters:NotNullToVisibilityConverter}}" 
                Background="{StaticResource MainColor}" 
                Grid.Row="3" VerticalAlignment="Bottom"/>
            <TreeView ItemContainerStyle="{StaticResource TreeViewItemStyle}" DockPanel.Dock="Top" Name="treeView" ItemsSource="{Binding ActiveDocument.StructureRoot.Children, ElementName=layersManager}" HorizontalContentAlignment="Stretch">
                <TreeView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ui:ReversedOrderStackPanel />
                    </ItemsPanelTemplate>
                </TreeView.ItemsPanel>
                <TreeView.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
                    <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Transparent" />
                    <HierarchicalDataTemplate DataType="{x:Type docVm:FolderViewModel}" ItemsSource="{Binding Children}">
                        <layerUserControls:FolderControl
                            Folder="{Binding}"
                            Manager="{Binding ElementName=layersManager}"
                            MouseDown="FolderControl_MouseDown"
                            MouseUp="FolderControl_MouseUp"/>
                    </HierarchicalDataTemplate>
                    <DataTemplate DataType="{x:Type docVm:LayerViewModel}">
                        <layerUserControls:LayerControl
                            Layer="{Binding}"
                            Manager="{Binding ElementName=layersManager}"
                            MouseDown="LayerControl_MouseDown"
                            MouseUp="LayerControl_MouseUp"/>
                    </DataTemplate>
                </TreeView.Resources>
            </TreeView>
            <Border Name="dropBorder" DragEnter="Grid_DragEnter" DragLeave="Grid_DragLeave" AllowDrop="True" Drop="Grid_Drop" Background="Transparent" BorderThickness="0, 5, 0, 0"></Border>
        </DockPanel>
    </Grid>
</UserControl>
