<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
        xmlns:core="clr-namespace:Artemis.Core;assembly=Artemis.Core"
        xmlns:fluent="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
        xmlns:converters="clr-namespace:Artemis.UI.Shared.Converters"
        xmlns:gradientPicker="clr-namespace:Artemis.UI.Shared.Controls.GradientPicker"
        xmlns:behaviors="clr-namespace:Artemis.UI.Shared.Behaviors">
    <Styles.Resources>
        <VisualBrush x:Key="LightCheckerboardBrush" TileMode="Tile" Stretch="Uniform" DestinationRect="3,0,10,10">
            <VisualBrush.Visual>
                <Grid Width="10" Height="10" RowDefinitions="*,*" ColumnDefinitions="*,*">
                    <Rectangle Grid.Row="0" Grid.Column="0" Fill="#c3c3c3" />
                    <Rectangle Grid.Row="0" Grid.Column="1" Fill="White" />
                    <Rectangle Grid.Row="1" Grid.Column="0" Fill="White" />
                    <Rectangle Grid.Row="1" Grid.Column="1" Fill="#c3c3c3" />
                </Grid>
            </VisualBrush.Visual>
        </VisualBrush>
    </Styles.Resources>
    <Design.PreviewWith>
        <gradientPicker:GradientPicker />
    </Design.PreviewWith>

    <Style Selector="gradientPicker|GradientPickerColorStop /template/ Border.stop-handle">
        <Setter Property="CornerRadius" Value="18" />
        <Setter Property="Width" Value="18" />
        <Setter Property="Height" Value="60" />
        <Setter Property="Margin" Value="-9 -10 0 0"></Setter>
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="BorderBrush" Value="{DynamicResource ToolTipBorderBrush}" />
        <Setter Property="Cursor" Value="Hand" />
    </Style>
    <Style Selector="gradientPicker|GradientPickerColorStop /template/ Border.stop-handle > Border">
        <Setter Property="CornerRadius" Value="18" />
        <Setter Property="BorderThickness" Value="3" />
        <Setter Property="BorderBrush" Value="{DynamicResource SolidBackgroundFillColorQuarternaryBrush}" />
        <Setter Property="Background" Value="{DynamicResource LightCheckerboardBrush}" />
    </Style>
    <Style Selector="gradientPicker|GradientPickerColorStop /template/ Border.stop-handle > Border > Border">
        <Setter Property="CornerRadius" Value="18" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Margin" Value="-1" />
        <Setter Property="BorderBrush" Value="{DynamicResource SolidBackgroundFillColorSecondaryBrush}" />
    </Style>

    <Style Selector="gradientPicker|GradientPickerColorStop:selected /template/ Border.stop-handle > Border">
        <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColorLight2}" />
    </Style>

    <Style Selector="gradientPicker|GradientPicker Border#Gradient">
        <Setter Property="Height" Value="40" />
        <Setter Property="CornerRadius" Value="4" />
    </Style>
    <Style Selector="gradientPicker|GradientPicker Border#Gradient Border">
        <Setter Property="CornerRadius" Value="4" />
    </Style>

    <Style Selector="gradientPicker|GradientPicker Border.stop-position">
        <Setter Property="Background" Value="{DynamicResource SolidBackgroundFillColorBaseBrush}" />
        <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrush}" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Width" Value="40" />
        <Setter Property="Height" Value="30" />
        <Setter Property="Margin" Value="-20 -15 0 0" />
        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
    </Style>

    <Style Selector="gradientPicker|GradientPicker Border.stop-position TextBlock">
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalAlignment" Value="Center" />
    </Style>

    <Style Selector="gradientPicker|GradientPicker">
        <Style.Resources>
            <converters:SKColorToColorConverter x:Key="SKColorToColorConverter" />
            <converters:SKColorToBrushConverter x:Key="SKColorToBrushConverter" />
            <converters:SKColorToStringConverter x:Key="SKColorToStringConverter" />
            <converters:WidthNormalizedConverter x:Key="WidthNormalizedConverter" />
        </Style.Resources>
        <Setter Property="Focusable" Value="True" />
        <Setter Property="Template">
            <ControlTemplate>
                <Grid RowDefinitions="Auto,Auto,*" ColumnDefinitions="Auto,255" Margin="20">
                    <Border Name="Gradient"
                            Grid.Row="0"
                            Grid.ColumnSpan="2"
                            Background="{DynamicResource LightCheckerboardBrush}"
                            Margin="5 0">
                        <Border Background="{TemplateBinding LinearGradientBrush}">
                            <ItemsControl Name="GradientStops" ItemsSource="{TemplateBinding EditingColorGradient}" ClipToBounds="False">
                                <ItemsControl.Styles>
                                    <Style Selector="ItemsControl#GradientStops > ContentPresenter">
                                        <Setter Property="Canvas.Left">
                                            <Setter.Value>
                                                <MultiBinding Converter="{StaticResource WidthNormalizedConverter}">
                                                    <Binding Path="Position" />
                                                    <Binding Path="Bounds.Width" ElementName="Gradient" />
                                                </MultiBinding>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </ItemsControl.Styles>
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate DataType="core:ColorGradientStop">
                                        <gradientPicker:GradientPickerColorStop ColorStop="{CompiledBinding}"
                                                                                PositionReference="{CompiledBinding $parent[Border]}"
                                                                                Classes="gradient-handle"
                                                                                GradientPicker="{CompiledBinding $parent[gradientPicker:GradientPicker]}">
                                        </gradientPicker:GradientPickerColorStop>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <Canvas />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                            </ItemsControl>
                        </Border>
                    </Border>

                    <Border Grid.Row="1"
                            Grid.Column="0"
                            Grid.ColumnSpan="2"
                            BorderBrush="{DynamicResource ButtonBorderBrush}"
                            BorderThickness="0 0 0 1"
                            Margin="-20 30"
                            Height="2"
                            VerticalAlignment="Center">
                    </Border>

                    <ItemsControl Name="GradientPositions"
                                  Grid.Row="1"
                                  Grid.Column="0"
                                  Grid.ColumnSpan="2"
                                  VerticalAlignment="Center"
                                  ItemsSource="{TemplateBinding EditingColorGradient}"
                                  ClipToBounds="False"
                                  Margin="5 0">
                        <ItemsControl.Styles>
                            <Style Selector="ContentPresenter">
                                <Setter Property="Canvas.Left">
                                    <Setter.Value>
                                        <MultiBinding Converter="{StaticResource WidthNormalizedConverter}">
                                            <Binding Path="Position" />
                                            <Binding Path="#GradientPositions.Bounds.Width" />
                                        </MultiBinding>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </ItemsControl.Styles>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate DataType="core:ColorGradientStop">
                                <Border Classes="stop-position">
                                    <TextBlock Text="{CompiledBinding Position}"></TextBlock>
                                </Border>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <Canvas />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                    </ItemsControl>

                    <Border Grid.Row="2"
                            Grid.Column="0"
                            BorderBrush="{DynamicResource ButtonBorderBrush}"
                            BorderThickness="0 0 1 0"
                            Padding="0 0 10 0">
                        <fluent:FAColorPicker Name="ColorPicker"
                                              ColorTextType="HexAlpha"
                                              UseColorWheel="True"
                                              UseColorTriangle="True"
                                              IsMoreButtonVisible="True"
                                              IsVisible="{TemplateBinding SelectedColorStop, Converter={x:Static ObjectConverters.IsNotNull}}"
                                              IsCompact="{CompiledBinding IsCompact, RelativeSource={RelativeSource TemplatedParent}}"
                                              Color="{CompiledBinding SelectedColorStop.Color, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource SKColorToColorConverter}}" />
                    </Border>

                    <Grid Grid.Row="2" Grid.Column="1" RowDefinitions="*,Auto">
                        <ListBox Name="GradientColors"
                                 Grid.Row="0"
                                 MaxHeight="280"
                                 ItemsSource="{TemplateBinding EditingColorGradient}"
                                 SelectedItem="{TemplateBinding SelectedColorStop, Mode=TwoWay}"
                                 Padding="10 0 15 0">
                            <ListBox.ItemTemplate>
                                <DataTemplate DataType="core:ColorGradientStop">
                                    <Grid VerticalAlignment="Center"
                                          ColumnDefinitions="34,*,Auto,Auto"
                                          Margin="-5 0"
                                          Classes="stop-list-item">
                                        <Border Grid.Column="0" Width="28" Height="28" CornerRadius="4" HorizontalAlignment="Left"
                                                BorderThickness="3"
                                                BorderBrush="{DynamicResource ButtonBorderBrush}"
                                                ClipToBounds="True"
                                                Background="{DynamicResource LightCheckerboardBrush}">
                                            <Border CornerRadius="4" Margin="-2" Background="{CompiledBinding Color, Converter={StaticResource SKColorToBrushConverter}}" />
                                        </Border>
                                        <TextBox Grid.Column="1" Text="{CompiledBinding Color, Converter={StaticResource SKColorToStringConverter}}" />
                                        <NumericUpDown Grid.Column="2" FormatString="F3" ShowButtonSpinner="False" Margin="5 0" Minimum="0" Maximum="1" Increment="0.01">
                                            <Interaction.Behaviors>
                                                <behaviors:LostFocusNumericUpDownBindingBehavior Value="{CompiledBinding Position}" />
                                            </Interaction.Behaviors>
                                        </NumericUpDown>
                                        <Button Name="DeleteButton"
                                                Grid.Column="3"
                                                Classes="icon-button"
                                                Command="{CompiledBinding $parent[gradientPicker:GradientPicker].DeleteStop}"
                                                CommandParameter="{CompiledBinding}">
                                            <avalonia:MaterialIcon Kind="Close" />
                                        </Button>
                                    </Grid>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>

                        <Border Grid.Row="1"
                                Margin="10 5 0 0"
                                Padding="0 5 0 0"
                                BorderBrush="{DynamicResource ButtonBorderBrush}"
                                BorderThickness="0 1 0 0">
                            <StackPanel Orientation="Horizontal" Spacing="5" HorizontalAlignment="Right">
                                <Button Name="SpreadStops" Classes="icon-button operation-button" ToolTip.Tip="Spread the color stops equally across the gradient.">
                                    <avalonia:MaterialIcon Kind="ArrowLeftRight" />
                                </Button>
                                <Button Name="ToggleSeamless" Classes="icon-button operation-button"
                                        ToolTip.Tip="Toggle the gradient being seamless by starting and ending with the same color.">
                                    <avalonia:MaterialIcon Kind="SineWave" />
                                </Button>
                                <Button Name="FlipStops" Classes="icon-button operation-button" ToolTip.Tip="Flip the stops of the gradient.">
                                    <avalonia:MaterialIcon Kind="FlipHorizontal" />
                                </Button>
                                <Button Name="RotateStops" Classes="icon-button operation-button">
                                    <ToolTip.Tip>
                                        <StackPanel>
                                            <TextBlock>Rotates the stops of the gradient.</TextBlock>
                                            <TextBlock>Hold shift to change direction.</TextBlock>
                                        </StackPanel>
                                    </ToolTip.Tip>
                                    <avalonia:MaterialIcon Kind="AxisZRotateCounterclockwise" />
                                </Button>
                                <Button Name="Randomize" Classes="icon-button operation-button" ToolTip.Tip="Randomize the gradient.">
                                    <avalonia:MaterialIcon Kind="ShuffleVariant" />
                                </Button>
                            </StackPanel>
                        </Border>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter>
    </Style>

    <Style Selector="gradientPicker|GradientPickerColorStop.gradient-handle">
        <Style.Resources>
            <converters:SKColorToBrushConverter x:Key="SKColorToBrushConverter" />
        </Style.Resources>
        <Setter Property="ClipToBounds" Value="False"></Setter>
        <Setter Property="Template">
            <ControlTemplate>
                <Border Classes="stop-handle">
                    <Border>
                        <Border Background="{Binding Color, Converter={StaticResource SKColorToBrushConverter}}" />
                    </Border>
                </Border>
            </ControlTemplate>
        </Setter>
    </Style>
</Styles>