<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:visualScripting="clr-namespace:Artemis.UI.Screens.VisualScripting"
             xmlns:core="clr-namespace:Artemis.Core;assembly=Artemis.Core"
             xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
             mc:Ignorable="d" d:DesignWidth="650" d:DesignHeight="450"
             x:Class="Artemis.UI.Screens.VisualScripting.NodePickerView"
             x:DataType="visualScripting:NodePickerViewModel"
             Width="600"
             Height="400">
    <UserControl.Styles>
        <Style Selector="TextBox#SearchBox">
            <Setter Property="VerticalAlignment" Value="Top"></Setter>
            <Setter Property="InnerRightContent">
                <Template>
                    <StackPanel Orientation="Horizontal">
                        <Button Content="&#xE8BB;" 
                                FontFamily="{StaticResource SymbolThemeFontFamily}"
                                Theme="{StaticResource TransparentButton}"
                                Command="{CompiledBinding $parent[TextBox].Clear}"
                                IsVisible="{CompiledBinding Text, RelativeSource={RelativeSource FindAncestor, AncestorType=TextBox}, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
                        <Button Content="&#xE721;"
                                FontFamily="{StaticResource SymbolThemeFontFamily}"
                                Theme="{StaticResource TransparentButton}"
                                Command="{CompiledBinding $parent[TextBox].Clear}"
                                IsHitTestVisible="False"/>
                    </StackPanel>
                </Template>
            </Setter>
        </Style>
    </UserControl.Styles>
    <Border Classes="picker-container">
        <Grid RowDefinitions="Auto,*">
            <TextBox Name="SearchBox" Text="{CompiledBinding SearchText}" Margin="0 0 0 15" Watermark="Search"></TextBox>
            <TreeView Name="NodeTree"
                      Grid.Row="1"
                      ItemsSource="{CompiledBinding Categories}"
                      IsVisible="{CompiledBinding Categories.Count}"
                      SelectedItem="{CompiledBinding SelectedNode}"
                      ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                <TreeView.Styles>
                    <Style Selector="TreeViewItem">
                        <Setter Property="IsExpanded" Value="True" />
                    </Style>
                </TreeView.Styles>
                <TreeView.DataTemplates>
                    <TreeDataTemplate DataType="core:NodeData">
                        <StackPanel Margin="-15 1 0 1" Background="Transparent" PointerReleased="InputElement_OnPointerReleased">
                            <TextBlock Classes="BodyStrongTextBlockStyle" Text="{CompiledBinding Name}" TextWrapping="Wrap"></TextBlock>
                            <TextBlock Foreground="{DynamicResource TextFillColorSecondary}" Text="{CompiledBinding Description}" TextWrapping="Wrap"></TextBlock>
                        </StackPanel>
                    </TreeDataTemplate>
                    <TreeDataTemplate DataType="visualScripting:NodeCategoryViewModel" ItemsSource="{CompiledBinding Nodes}">
                        <TextBlock Text="{CompiledBinding Category}"></TextBlock>
                    </TreeDataTemplate>
                </TreeView.DataTemplates>
                <TreeView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel/>
                    </ItemsPanelTemplate>
                </TreeView.ItemsPanel>
            </TreeView>
            <StackPanel Grid.Row="1" VerticalAlignment="Center" Spacing="20" IsVisible="{CompiledBinding !Categories.Count}">
                <avalonia:MaterialIcon Kind="CloseCircle" Width="64" Height="64"></avalonia:MaterialIcon>
                <TextBlock Classes="h4" TextAlignment="Center">None of the nodes match your search</TextBlock>
            </StackPanel>
        </Grid>
    </Border>
</UserControl>