<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:conv="clr-namespace:Avalonia.Diagnostics.Converters"
             xmlns:local="clr-namespace:Avalonia.Diagnostics.Views"
             xmlns:controls="clr-namespace:Avalonia.Diagnostics.Controls"
             xmlns:vm="clr-namespace:Avalonia.Diagnostics.ViewModels"
             xmlns:lb="using:Avalonia.Diagnostics.Behaviors"
             x:Class="Avalonia.Diagnostics.Views.ControlDetailsView"
             x:Name="Main">

  <UserControl.Resources>
    <conv:BoolToOpacityConverter x:Key="BoolToOpacity" Opacity="0.6"/>
    <conv:GetTypeNameConverter x:Key="GetTypeName"/>
  </UserControl.Resources>

  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="Auto"/>
      <!--
      When selecting the Application node, we need this trick to hide Layout Visualizer 
      because when using the GridSplitter it sets the Witdth property of ColumnDefinition
      (see https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/GridSplitter.cs#L528) 
      and if we hide the contents of the column, the space is not reclaimed 
      (see discussion https://github.com/AvaloniaUI/Avalonia/discussions/6773). 
      -->
      <ColumnDefinition Width="320" lb:ColumnDefinition.IsVisible="{Binding Layout, Converter={x:Static ObjectConverters.IsNotNull}}" />
    </Grid.ColumnDefinitions>
    
    <Grid Grid.Column="0" RowDefinitions="Auto,Auto,*">

      <Grid ColumnDefinitions="Auto, *" RowDefinitions="Auto, Auto">
        <Button Grid.Column="0" Grid.RowSpan="2" Content="^" Command="{Binding ApplyParentProperty}" />
        <TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding SelectedEntityName}" FontWeight="Bold" />
        <TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding SelectedEntityType}" FontStyle="Italic" />
      </Grid>
      
      <controls:FilterTextBox Grid.Row="1"
                              BorderThickness="0"
                              DataContext="{Binding TreePage.PropertiesFilter}"
                              Text="{Binding FilterString}"
                              Watermark="Filter properties"
                              UseCaseSensitiveFilter="{Binding UseCaseSensitiveFilter}"
                              UseWholeWordFilter="{Binding UseWholeWordFilter}"
                              UseRegexFilter="{Binding UseRegexFilter}"/>
      
      <DataGrid 
                x:Name="DataGrid"
                Items="{Binding PropertiesView}"
                Grid.Row="2"
                BorderThickness="0"
                RowBackground="Transparent"
                SelectedItem="{Binding SelectedProperty, Mode=TwoWay}"
                CanUserResizeColumns="true"
                DoubleTapped="PropertiesGrid_OnDoubleTapped">
        <DataGrid.Columns>
          <DataGridTextColumn Header="Property" Binding="{Binding Name}" IsReadOnly="True" />
          <DataGridTextColumn Header="Value" Binding="{Binding Value}" />
          <DataGridTextColumn Header="Type" Binding="{Binding Type}"
                              IsReadOnly="True"
                              IsVisible="{Binding !$parent[UserControl;2].DataContext.ShowDettailsPropertyType}"
                              />
          <DataGridTextColumn Header="Assinged Type" Binding="{Binding AssignedType, Converter={StaticResource GetTypeName}}"
                              IsReadOnly="True"
                              IsVisible="{Binding $parent[UserControl;2].DataContext.ShowDettailsPropertyType}"
                              />
          <DataGridTextColumn Header="Property Type" Binding="{Binding PropertyType, Converter={StaticResource GetTypeName}}"
                              IsReadOnly="True"
                              IsVisible="{Binding $parent[UserControl;2].DataContext.ShowDettailsPropertyType}"
                              />
          <DataGridTextColumn Header="Priority" Binding="{Binding Priority}" IsReadOnly="True" />
        </DataGrid.Columns>

        <DataGrid.Styles>
          <Style Selector="DataGridRow TextBox">
            <Setter Property="SelectionBrush" Value="LightBlue" />
          </Style>
        </DataGrid.Styles>
      </DataGrid>

    </Grid>

    <GridSplitter Grid.Column="1"/>

    <Grid Grid.Column="2" RowDefinitions="*,Auto,*"
          IsVisible="{Binding Layout, Converter={x:Static ObjectConverters.IsNotNull}}">

      <Grid RowDefinitions="Auto,*" Grid.Row="0">
        <TextBlock FontWeight="Bold" Grid.Row="0" Text="Layout Visualizer" Margin="4" />
        <local:LayoutExplorerView Grid.Row="1" DataContext="{Binding Layout}" />
      </Grid>

      <GridSplitter Grid.Row="1" />

      <Grid RowDefinitions="Auto,*,Auto" Grid.Row="2">

        <Grid Grid.Row="0" Margin="4" RowDefinitions="Auto,Auto">

          <Grid Grid.Row="0" Margin="2" ColumnDefinitions="Auto,*,Auto,Auto">
            <TextBlock FontWeight="Bold" Grid.Column="0" Text="{Binding StyleStatus}" VerticalAlignment="Center" />
            <CheckBox Margin="2,0,0,0" Grid.Column="2" Content="Show inactive" IsChecked="{Binding ShowInactiveStyles}" ToolTip.Tip="Show styles that are currently inactive" />
            <ToggleButton Margin="2,0,0,0" Grid.Column="3" ToolTip.Tip="Snapshot current styles (Alt+S/Alt+D to enable/disable within debugged window)" Content="Snapshot" IsChecked="{Binding SnapshotStyles}" />
          </Grid>

          <controls:FilterTextBox Grid.Row="1" Margin="2" Grid.Column="0"
                                  DataContext="{Binding TreePage.SettersFilter}"
                                  Text="{Binding FilterString}"
                                  Watermark="Filter setters"
                                  UseCaseSensitiveFilter="{Binding UseCaseSensitiveFilter}"
                                  UseWholeWordFilter="{Binding UseWholeWordFilter}"
                                  UseRegexFilter="{Binding UseRegexFilter}" />
        </Grid>

        <ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Disabled">
          <ItemsControl Items="{Binding AppliedStyles}" >
            <ItemsControl.ItemTemplate>
              <DataTemplate>
                <Border BorderThickness="0,0,0,1" BorderBrush="#6C6C6C" Opacity="{Binding IsActive, Converter={StaticResource BoolToOpacity}}">
                  <Border.IsVisible>
                    <MultiBinding Converter="{x:Static BoolConverters.And}">
                      <MultiBinding Converter="{x:Static BoolConverters.Or}" >
                        <Binding Path="IsActive" />
                        <Binding Path="#Main.DataContext.ShowInactiveStyles" />
                      </MultiBinding>
                      <Binding Path="IsVisible" />
                    </MultiBinding>
                  </Border.IsVisible>
                  <Expander IsExpanded="True" Margin="0" Padding="8,0" ContentTransition="{x:Null}" >
                    <Expander.Header>
                      <TextBlock Grid.Row="0" Text="{Binding Name}" />
                    </Expander.Header>

                    <ItemsControl Margin="20,0,0,0" Grid.Row="1" Items="{Binding Setters}">
                      
                      <ItemsControl.Styles>
                        <Style Selector="TextBlock.property-name">
                          <Setter Property="FontWeight" Value="SemiBold" />
                          <Setter Property="Background" Value="Transparent" />
                        </Style>
                        
                        <Style Selector="TextBlock.property-name:pointerover">
                          <Setter Property="TextDecorations" Value="Underline" />
                        </Style>
                        
                        <Style Selector="Rectangle.property-inactive">
                          <Setter Property="IsHitTestVisible" Value="False" />
                          <Setter Property="Height" Value="1" />
                          <Setter Property="Fill" Value="#6C6C6C" />
                          <Setter Property="VerticalAlignment" Value="Center" />
                        </Style>
                        
                      </ItemsControl.Styles>
                      
                      <ItemsControl.DataTemplates>

                        <DataTemplate DataType="IBrush">
                          <StackPanel Orientation="Horizontal" Spacing="2">
                            <Border BorderThickness="1" BorderBrush="Black" Background="{Binding}" Width="8" Height="8"/>
                            <TextBlock Text="{Binding}" />
                          </StackPanel>
                        </DataTemplate>

                        <DataTemplate DataType="Color">
                          <StackPanel Orientation="Horizontal" Spacing="2">
                            <Border BorderThickness="1" BorderBrush="Black" Width="8" Height="8">
                              <Border.Background>
                                <SolidColorBrush Color="{Binding}" />
                              </Border.Background>
                            </Border>
                            <TextBlock Text="{Binding}" />
                          </StackPanel>
                        </DataTemplate>
                        
                        <DataTemplate DataType="vm:BindingSetterViewModel">
                          <Panel Opacity="{Binding IsActive, Converter={StaticResource BoolToOpacity}}" IsVisible="{Binding IsVisible}" HorizontalAlignment="Left">
                            <Panel.ContextMenu>
                              <ContextMenu>
                                <MenuItem Header="Copy property name" Command="{Binding CopyPropertyName} "/>
                                <MenuItem Header="Copy value" Command="{Binding CopyValue} "/>
                              </ContextMenu>
                            </Panel.ContextMenu>
                            <StackPanel Orientation="Horizontal" Spacing="2">
                              <TextBlock Classes="property-name" PointerPressed="PropertyNamePressed" Text="{Binding Name}" />
                              <TextBlock Text=":" />
                              <TextBlock>{</TextBlock>
                              <Rectangle Height="8" Width="8" VerticalAlignment="Center" Fill="{Binding Tint}" ToolTip.Tip="{Binding ValueTypeTooltip}"/>
                              <TextBlock Text="{Binding Path}" />
                              <TextBlock>}</TextBlock>
                            </StackPanel>
                            <Rectangle Classes="property-inactive" IsVisible="{Binding !IsActive}" />
                          </Panel>
                        </DataTemplate>

                        <DataTemplate DataType="vm:ResourceSetterViewModel">
                          <Panel Opacity="{Binding IsActive, Converter={StaticResource BoolToOpacity}}" IsVisible="{Binding IsVisible}" HorizontalAlignment="Left">
                            <Panel.ContextMenu>
                              <ContextMenu>
                                <MenuItem Header="Copy property name" Command="{Binding CopyPropertyName} "/>
                                <MenuItem Header="Copy value" Command="{Binding CopyValue} "/>
                                <MenuItem Header="Copy resource key" Command="{Binding CopyResourceKey}" />
                              </ContextMenu>
                            </Panel.ContextMenu>
                            <StackPanel Orientation="Horizontal" Spacing="2" HorizontalAlignment="Left">
                              <TextBlock Classes="property-name" PointerPressed="PropertyNamePressed" Text="{Binding Name}" />
                              <TextBlock Text=":" />
                              <ContentControl Content="{Binding Value}"/>
                              <TextBlock>(</TextBlock>
                              <Ellipse Height="8" Width="8" VerticalAlignment="Center" Fill="{Binding Tint}" ToolTip.Tip="{Binding ValueTypeTooltip}"/>
                              <TextBlock FontStyle="Italic" Text="{Binding Key}" />
                              <TextBlock>)</TextBlock>
                            </StackPanel>
                            <Rectangle Classes="property-inactive" IsVisible="{Binding !IsActive}" />
                          </Panel>
                        </DataTemplate>

                        <DataTemplate DataType="vm:SetterViewModel">
                          <Panel Opacity="{Binding IsActive, Converter={StaticResource BoolToOpacity}}" IsVisible="{Binding IsVisible}" HorizontalAlignment="Left">
                            <Panel.ContextMenu>
                              <ContextMenu>
                                <MenuItem Header="Copy property name" Command="{Binding CopyPropertyName} "/>
                                <MenuItem Header="Copy value" Command="{Binding CopyValue} "/>
                              </ContextMenu>
                            </Panel.ContextMenu>
                            <StackPanel Orientation="Horizontal" Spacing="2">
                              <TextBlock Classes="property-name" PointerPressed="PropertyNamePressed" Text="{Binding Name}" />
                              <TextBlock Text=":" />
                              <ContentControl Content="{Binding Value}"/>
                            </StackPanel>
                            <Rectangle Classes="property-inactive" IsVisible="{Binding !IsActive}" />
                          </Panel>
                        </DataTemplate>

                      </ItemsControl.DataTemplates>
                    </ItemsControl>

                  </Expander>
                </Border>
              </DataTemplate>
            </ItemsControl.ItemTemplate>
          </ItemsControl>
        </ScrollViewer>

        <Expander Header="Pseudo Classes" Grid.Row="2">
          <ItemsControl Items="{Binding PseudoClasses}">
            <ItemsControl.ItemsPanel>
              <ItemsPanelTemplate>
                <WrapPanel />
              </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
              <DataTemplate>
                <CheckBox Margin="2" Content="{Binding Name}" IsChecked="{Binding IsActive, Mode=TwoWay}" />
              </DataTemplate>
            </ItemsControl.ItemTemplate>
          </ItemsControl>
        </Expander>

      </Grid>

    </Grid>
  </Grid>

</UserControl>
