<UserControl x:Class="Artemis.UI.Screens.Sidebar.SidebarProfileConfigurationView"
             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:Artemis.UI.Screens.Sidebar"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:s="https://github.com/canton7/Stylet"
             xmlns:core="clr-namespace:Artemis.Core;assembly=Artemis.Core"
             xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
             xmlns:converters="clr-namespace:Artemis.UI.Converters"
             xmlns:shared="clr-namespace:Artemis.UI.Shared;assembly=Artemis.UI.Shared"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800"
             d:DataContext="{d:DesignInstance local:SidebarProfileConfigurationViewModel}"
             Background="Transparent"
             Margin="-8"
             Padding="8">
    <!-- Above is a dumb hack to get the context menu to cover the entire item -->
    <UserControl.Resources>
        <converters:ValuesAdditionConverter x:Key="ValuesAddition" />
    </UserControl.Resources>
    <UserControl.ContextMenu>
        <ContextMenu>
            <MenuItem Header="View properties" Command="{s:Action ViewProperties}">
                <MenuItem.Icon>
                    <materialDesign:PackIcon Kind="Cog" />
                </MenuItem.Icon>
            </MenuItem>
            <MenuItem Header="Suspend" IsCheckable="True" IsChecked="{Binding IsSuspended}">
                <MenuItem.Icon>
                    <materialDesign:PackIcon Kind="Pause" />
                </MenuItem.Icon>
            </MenuItem>
            <MenuItem Header="Suspend all">
                <MenuItem.Icon>
                    <materialDesign:PackIcon Kind="Pause" />
                </MenuItem.Icon>
                <MenuItem Header="Above" Command="{s:Action SuspendAbove}" CommandParameter="suspend" />
                <MenuItem Header="Below" Command="{s:Action SuspendBelow}" CommandParameter="suspend" />
            </MenuItem>
            <MenuItem Header="Resume all">
                <MenuItem.Icon>
                    <materialDesign:PackIcon Kind="Play" />
                </MenuItem.Icon>
                <MenuItem Header="Above" Command="{s:Action SuspendAbove}" CommandParameter="resume" />
                <MenuItem Header="Below" Command="{s:Action SuspendBelow}" CommandParameter="resume" />
            </MenuItem>
            <Separator />
            <MenuItem Header="Export" Command="{s:Action Export}">
                <MenuItem.Icon>
                    <materialDesign:PackIcon Kind="Export" />
                </MenuItem.Icon>
            </MenuItem>
            <MenuItem Header="Duplicate" Command="{s:Action Duplicate}">
                <MenuItem.Icon>
                    <materialDesign:PackIcon Kind="ContentDuplicate" />
                </MenuItem.Icon>
            </MenuItem>
            <MenuItem Header="Copy" Command="{s:Action Copy}">
                <MenuItem.Icon>
                    <materialDesign:PackIcon Kind="ContentCopy" />
                </MenuItem.Icon>
            </MenuItem>
            <MenuItem Header="Paste" Command="{s:Action Paste}">
                <MenuItem.Icon>
                    <materialDesign:PackIcon Kind="ContentPaste" />
                </MenuItem.Icon>
            </MenuItem>
            <Separator />
            <MenuItem Header="Delete" Command="{s:Action Delete}" InputGestureText="Del">
                <MenuItem.Icon>
                    <materialDesign:PackIcon Kind="Trash" />
                </MenuItem.Icon>
            </MenuItem>
        </ContextMenu>
    </UserControl.ContextMenu>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <shared:ProfileConfigurationIcon Grid.Column="0"
                                         x:Name="ProfileIcon"
                                         VerticalAlignment="Center"
                                         ConfigurationIcon="{Binding ProfileConfiguration.Icon}"
                                         Width="20"
                                         Height="20">
            <shared:ProfileConfigurationIcon.Style>
                <Style>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsProfileActive}" Value="False">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.33" Duration="0:0:0.25" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.25" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </shared:ProfileConfigurationIcon.Style>
        </shared:ProfileConfigurationIcon>

        <TextBlock Grid.Column="1"
                   x:Name="ProfileName"
                   FontSize="12"
                   Margin="10 0 0 0"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Left"
                   Text="{Binding ProfileConfiguration.Name}"
                   TextTrimming="CharacterEllipsis">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsProfileActive}" Value="False">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.33" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.25" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>

        <Border Grid.Column="0"
                Grid.ColumnSpan="2"
                BorderThickness="1"
                BorderBrush="{DynamicResource MaterialDesignBody}"
                Height="1"
                Opacity="0"
                HorizontalAlignment="Left">
            <!-- Ensure the line covers the profile and the text but not the full two columns -->
            <Border.Width>
                <MultiBinding Converter="{StaticResource ValuesAddition}">
                    <Binding Path="ActualWidth" ElementName="ProfileIcon" />
                    <Binding Path="ActualWidth" ElementName="ProfileName" />
                    <Binding Path="Margin.Left" ElementName="ProfileName" />
                </MultiBinding>
            </Border.Width>
            <Border.Style>
                <Style>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsSuspended}" Value="True">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.75" Duration="0:0:0.25" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.25" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
        </Border>

        <Button Grid.Column="2" ToolTip="View properties" Width="20" Height="20" Command="{s:Action ViewProperties}" HorizontalAlignment="Right">
            <Button.Style>
                <Style TargetType="{x:Type Button}" BasedOn="{StaticResource MaterialDesignIconForegroundButton}">
                    <Setter Property="Visibility" Value="Collapsed" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}, Mode=FindAncestor}}" Value="True">
                            <Setter Property="Visibility" Value="Visible" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
            <materialDesign:PackIcon Kind="Cog" Width="16" Height="16" />
        </Button>
        <ToggleButton Grid.Column="3" ToolTip="Suspend profile" Width="18" Height="18" Margin="2 0 0 0" IsChecked="{Binding IsSuspended}">
            <ToggleButton.Style>
                <Style TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource MaterialDesignFlatToggleButton}">
                    <Setter Property="Visibility" Value="Collapsed" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}, Mode=FindAncestor}}" Value="True">
                            <Setter Property="Visibility" Value="Visible" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ToggleButton.Style>
            <materialDesign:PackIcon Kind="Pause" Height="14" Width="14" />
        </ToggleButton>
    </Grid>
</UserControl>