<UserControl x:Class="Artemis.UI.Screens.ProfileEditor.LayerProperties.Tree.TreePropertyView"
             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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:s="https://github.com/canton7/Stylet"
             xmlns:shared="clr-namespace:Artemis.UI.Shared;assembly=Artemis.UI.Shared"
             xmlns:converters="clr-namespace:Artemis.UI.Converters"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
        <converters:PropertyTreeMarginConverter Length="20" x:Key="PropertyTreeMarginConverter" />
        <Style x:Key="DataBindingsButton" TargetType="shared:LockableToggleButton" BasedOn="{StaticResource MaterialDesignFlatToggleButton}">
            <Style.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="IsEnabled">
                                    <DiscreteBooleanKeyFrame KeyTime="00:00:00" Value="False" />
                                    <DiscreteBooleanKeyFrame KeyTime="00:00:00.3" Value="True" />
                                </BooleanAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>

    <Border Name="Bd"
            BorderBrush="{DynamicResource MaterialDesignDivider}"
            BorderThickness="0,0,0,1"
            Height="25">
        <Border.Style>
            <Style TargetType="Border">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding LayerPropertyViewModel.IsHighlighted, Mode=OneWay}" Value="True">
                        <Setter Property="Background" Value="{DynamicResource MaterialDesignPaper}" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Border.Style>
        <Grid Margin="{Binding Converter={StaticResource PropertyTreeMarginConverter}}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <ToggleButton Grid.Column="0"
                          Style="{StaticResource MaterialDesignFlatToggleButton}"
                          ToolTip="Toggle key-framing"
                          Width="24"
                          Height="24"
                          IsChecked="{Binding KeyframesEnabled}"
                          IsEnabled="{Binding LayerProperty.KeyframesSupported}"
                          VerticalAlignment="Center" Padding="-25">
                <materialDesign:PackIcon Kind="Stopwatch" Height="16" Width="16" />
            </ToggleButton>

            <TextBlock Grid.Column="1"
                       Margin="5,0,0,0"
                       Padding="0,0,5,0"
                       VerticalAlignment="Center"
                       TextTrimming="CharacterEllipsis"
                       Text="{Binding LayerProperty.PropertyDescription.Name}"
                       ToolTip="{Binding LayerProperty.PropertyDescription.Description}"
                       HorizontalAlignment="Left" />

            <ContentControl Grid.Column="2" 
                            Margin="5 0"
                            s:View.Model="{Binding PropertyInputViewModel, IsAsync=True}" 
                            ToolTip="{Binding LayerProperty.PropertyDescription.Description}"/>

            <Button Grid.Column="3"
                    Command="{s:Action ResetToDefault}" 
                    Style="{StaticResource MaterialDesignIconButton}"
                    ToolTip="Reset the property to its default value."
                    Width="24"
                    Height="24">
                <materialDesign:PackIcon Kind="BackupRestore" Height="16" Width="16" />
            </Button>
            
            <shared:LockableToggleButton Grid.Column="4"
                                         Style="{StaticResource DataBindingsButton}"
                                         ToolTip="Change the property's data binding"
                                         Width="24"
                                         Height="24"
                                         VerticalAlignment="Center"
                                         IsLocked="True"
                                         IsEnabled="{Binding LayerProperty.DataBindingsSupported}"
                                         IsChecked="{Binding HasDataBinding, Mode=OneWay}"
                                         Click="{s:Action ActivateDataBindingViewModel}">
                <materialDesign:PackIcon Kind="VectorLink" Height="16" Width="16" />
            </shared:LockableToggleButton>
        </Grid>

    </Border>
</UserControl>