<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:paz="clr-namespace:Avalonia.Controls.PanAndZoom;assembly=Avalonia.Controls.PanAndZoom"
             xmlns:core="clr-namespace:Artemis.Core;assembly=Artemis.Core"
             xmlns:visualEditor="clr-namespace:Artemis.UI.Screens.ProfileEditor.VisualEditor"
             xmlns:vis="clr-namespace:Artemis.UI.Screens.ProfileEditor.VisualEditor.Visualizers"
             xmlns:shared="clr-namespace:Artemis.UI.Shared;assembly=Artemis.UI.Shared"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="Artemis.UI.Screens.ProfileEditor.VisualEditor.VisualEditorView"
             x:DataType="visualEditor:VisualEditorViewModel">
    <UserControl.Resources>
        <VisualBrush x:Key="LargeCheckerboardBrush" TileMode="Tile" Stretch="Uniform" SourceRect="0,0,20,20">
            <VisualBrush.Visual>
                <Canvas Width="20" Height="20">
                    <Rectangle Width="10" Height="10" Fill="Black" Opacity="0.15" />
                    <Rectangle Width="10" Height="10" Canvas.Left="10" />
                    <Rectangle Width="10" Height="10" Canvas.Top="10" />
                    <Rectangle Width="10" Height="10" Canvas.Left="10" Canvas.Top="10" Fill="Black" Opacity="0.15" />
                </Canvas>
            </VisualBrush.Visual>
        </VisualBrush>
    </UserControl.Resources>
    <Grid>
        <paz:ZoomBorder Name="ZoomBorder"
                        Stretch="None"
                        ClipToBounds="True"
                        Focusable="True"
                        VerticalAlignment="Stretch"
                        HorizontalAlignment="Stretch"
                        Background="{StaticResource LargeCheckerboardBrush}"
                        ZoomChanged="ZoomBorder_OnZoomChanged">
            <Grid Name="ContainerGrid" Background="Transparent">
                <Grid.Transitions>
                    <Transitions>
                        <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.2" Easing="CubicEaseOut" />
                    </Transitions>
                </Grid.Transitions>

                <!-- The bottom layer consists of devices -->
                <ItemsControl Name="DevicesContainer" ItemsSource="{CompiledBinding Devices}" ClipToBounds="False">
                    <ItemsControl.Styles>
                        <Style Selector="ContentPresenter" x:DataType="core:ArtemisDevice">
                            <Setter Property="Canvas.Left" Value="{CompiledBinding X}" />
                            <Setter Property="Canvas.Top" Value="{CompiledBinding Y}" />
                        </Style>
                    </ItemsControl.Styles>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <Canvas />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate DataType="core:ArtemisDevice">
                            <shared:DeviceVisualizer Device="{CompiledBinding}" ShowColors="True" RenderOptions.BitmapInterpolationMode="MediumQuality" />
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>

                <!-- The middle layer contains visualizers -->
                <ItemsControl ItemsSource="{CompiledBinding Visualizers}" ClipToBounds="False" IsVisible="{CompiledBinding !SuspendedEditing}">
                    <ItemsControl.Styles>
                        <Style Selector="ContentPresenter" x:DataType="vis:IVisualizerViewModel">
                            <Setter Property="Canvas.Left" Value="{CompiledBinding X}" />
                            <Setter Property="Canvas.Top" Value="{CompiledBinding Y}" />
                        </Style>
                    </ItemsControl.Styles>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <Canvas />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>

                <!-- The top layer contains tools -->
                <ItemsControl ItemsSource="{CompiledBinding Tools}" ClipToBounds="False" IsVisible="{CompiledBinding !SuspendedEditing}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <Grid />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </Grid>
        </paz:ZoomBorder>
        <Border CornerRadius="0 0 8 0" 
                VerticalAlignment="Top" 
                HorizontalAlignment="Left" 
                Background="{DynamicResource ControlFillColorDefaultBrush}" 
                IsVisible="{CompiledBinding ProfileConfiguration, Converter={x:Static ObjectConverters.IsNotNull}}">
            <StackPanel Orientation="Horizontal" Margin="8">
                <shared:ProfileConfigurationIcon ConfigurationIcon="{CompiledBinding ProfileConfiguration.Icon}" Width="18" Height="18" Margin="0 0 5 0" />
                <TextBlock Text="{CompiledBinding ProfileConfiguration.Name}" />
            </StackPanel>
        </Border>
    </Grid>
</UserControl>