<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
             xmlns:visualScripting="clr-namespace:Artemis.UI.Screens.VisualScripting"
             xmlns:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
             mc:Ignorable="d" d:DesignWidth="250" d:DesignHeight="150"
             x:Class="Artemis.UI.Screens.VisualScripting.NodeView"
             x:DataType="visualScripting:NodeViewModel">
    <UserControl.Styles>
        <Style Selector="Border.node-container">
            <Setter Property="CornerRadius" Value="6" />
            <Setter Property="Background">
                <SolidColorBrush Color="{DynamicResource SolidBackgroundFillColorBase}" Opacity="0.75"></SolidColorBrush>
            </Setter>
            <Setter Property="BorderBrush" Value="{DynamicResource CardStrokeColorDefaultBrush}" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Transitions">
                <Setter.Value>
                    <Transitions>
                        <BrushTransition Property="BorderBrush" Duration="0:0:0.2" Easing="CubicEaseOut" />
                    </Transitions>
                </Setter.Value>
            </Setter>
        </Style>
        <Style Selector="Border.node-container-selected">
            <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColor}" />
        </Style>
    </UserControl.Styles>
    <Border Classes="node-container" Classes.node-container-selected="{CompiledBinding IsSelected}" PointerMoved="NodeContainer_OnPointerMoved">
        <Grid RowDefinitions="Auto,*">
            <Border Grid.Row="0"
                    CornerRadius="6 6 0 0"
                    Cursor="Hand"
                    PointerReleased="InputElement_OnPointerReleased"
                    PointerMoved="InputElement_OnPointerMoved"
                    ClipToBounds="True"
                    Background="{DynamicResource ContentDialogBackground}">
                <Border Background="{DynamicResource TaskDialogHeaderBackground}">
                    <Grid Classes="node-header" VerticalAlignment="Top" ColumnDefinitions="Auto,*,Auto,Auto">
                        <HyperlinkButton Grid.Column="0" 
                                                  Classes="icon-button icon-button-small broken-state-button"
                                                  Margin="5 0 0 0"
                                                  Command="{CompiledBinding ShowBrokenState}"
                                                  IsVisible="{CompiledBinding Node.BrokenState, Converter={x:Static ObjectConverters.IsNotNull}}"
                                                  ToolTip.Tip="{CompiledBinding Node.BrokenState}">
                            <avalonia:MaterialIcon Kind="AlertCircle" />
                        </HyperlinkButton>

                        <TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="10 0 0 0" Text="{CompiledBinding Node.Name}" ToolTip.Tip="{CompiledBinding Node.Description}" />
      
                        <HyperlinkButton Grid.Column="2" 
                                                  IsVisible="{CompiledBinding Node.HelpUrl, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
                                                  VerticalAlignment="Center" 
                                                  Classes="icon-button icon-button-small"
                                                  Margin="5 5 -3 5"
                                                  ToolTip.Tip="View node help" 
                                                  NavigateUri="{CompiledBinding Node.HelpUrl}">
                            <avalonia:MaterialIcon Kind="Help" />
                        </HyperlinkButton>
                        <Button Grid.Column="3" VerticalAlignment="Center" Classes="icon-button icon-button-small" Margin="5" Command="{CompiledBinding DeleteNode}">
                            <avalonia:MaterialIcon Kind="Close"></avalonia:MaterialIcon>
                        </Button>
                    </Grid>
                </Border>
            </Border>

            <Grid Grid.Row="1" RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="Auto,*,Auto" Margin="4">
                <ContentControl Grid.Row="0"
                                Grid.Column="0"
                                Grid.ColumnSpan="3"
                                Margin="5"
                                Content="{CompiledBinding CustomNodeViewModel}"
                                IsVisible="{CompiledBinding DisplayCustomViewModelAbove}" />

                <StackPanel Grid.Row="1" Grid.Column="0" IsVisible="{CompiledBinding HasInputPins}">
                    <ItemsControl ItemsSource="{CompiledBinding InputPinViewModels}" Margin="4 0" />
                    <ItemsControl ItemsSource="{CompiledBinding InputPinCollectionViewModels}" />
                </StackPanel>

                <ContentControl Grid.Row="1"
                                Grid.Column="1"
                                Content="{CompiledBinding CustomNodeViewModel}"
                                VerticalAlignment="{CompiledBinding CustomViewModelVerticalAlignment}"
                                IsVisible="{CompiledBinding DisplayCustomViewModelBetween}" />

                <StackPanel Grid.Row="1" Grid.Column="2" IsVisible="{CompiledBinding HasOutputPins}">
                    <ItemsControl ItemsSource="{CompiledBinding OutputPinViewModels}" Margin="4 0" />
                    <ItemsControl ItemsSource="{CompiledBinding OutputPinCollectionViewModels}" />
                </StackPanel>

                <ContentControl Grid.Row="2"
                                Grid.Column="0"
                                Grid.ColumnSpan="3"
                                Margin="5"
                                Content="{CompiledBinding CustomNodeViewModel}"
                                IsVisible="{CompiledBinding DisplayCustomViewModelBelow}" />
            </Grid>
        </Grid>
    </Border>
</UserControl>