<UserControl
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:s="https://github.com/canton7/Stylet"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:visualization="clr-namespace:Artemis.UI.Screens.ProfileEditor.Visualization"
             xmlns:shared="clr-namespace:Artemis.UI.Shared;assembly=Artemis.UI.Shared"
             xmlns:Converters="clr-namespace:Artemis.UI.Converters" x:Class="Artemis.UI.Screens.ProfileEditor.Visualization.ProfileView"
             mc:Ignorable="d"
             d:DesignHeight="510.9" d:DesignWidth="800"
             d:DataContext="{d:DesignInstance {x:Type visualization:ProfileViewModel}}">
    <UserControl.Resources>
        <Converters:InverseBooleanConverter x:Key="InverseBooleanConverter"/>
    </UserControl.Resources>
    <Grid>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <ToolBarTray Orientation="Vertical" Width="58">
            <ToolBar Style="{DynamicResource MaterialDesignToolBar}" ClipToBounds="False" ToolBarTray.IsLocked="True">
                <ListBox SelectedIndex="{Binding ActiveToolIndex}" ToolBar.OverflowMode="Never">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Vertical" />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBoxItem ToolTip="Pan over different parts of the surface - Ctrl">
                        <materialDesign:PackIcon Kind="HandLeft" />
                    </ListBoxItem>
                    <ListBoxItem ToolTip="Transform layer shape (hold SHIFT for incremental changes and X/Y snapping) - Ctrl+T" 
                                 IsEnabled="{Binding CanSelectEditTool}">
                        <materialDesign:PackIcon Kind="TransitConnectionVariant" />
                    </ListBoxItem>
                    <ListBoxItem ToolTip="Change layer selection (hold SHIFT to add to existing selection) - Ctrl+Q" 
                                 IsEnabled="{Binding SuspendedEditing, Converter={StaticResource InverseBooleanConverter}, Mode=OneWay}">
                        <materialDesign:PackIcon Kind="SelectionDrag" />
                    </ListBoxItem>
                    <ListBoxItem ToolTip="Remove from layer selection - Ctrl+W" 
                                 IsEnabled="{Binding SuspendedEditing, Converter={StaticResource InverseBooleanConverter}, Mode=OneWay}">
                        <materialDesign:PackIcon Kind="SelectOff" />
                    </ListBoxItem>
                </ListBox>
            </ToolBar>
        </ToolBarTray>
        <Grid Grid.Column="1"
              ClipToBounds="True"
              MouseWheel="{s:Action CanvasMouseWheel}"
              MouseUp="{s:Action CanvasMouseUp}"
              MouseDown="{s:Action CanvasMouseDown}"
              MouseMove="{s:Action CanvasMouseMove}"
              Cursor="{Binding ActiveToolViewModel.Cursor}"
              shared:SizeObserver.Observe="True"
              shared:SizeObserver.ObservedWidth="{Binding PanZoomViewModel.CanvasWidth, Mode=OneWayToSource}"
              shared:SizeObserver.ObservedHeight="{Binding PanZoomViewModel.CanvasHeight, Mode=OneWayToSource}">

            <Grid.Background>
                <VisualBrush TileMode="Tile" Stretch="Uniform" Viewport="{Binding PanZoomViewModel.BackgroundViewport}" ViewportUnits="Absolute">
                    <VisualBrush.Visual>
                        <Grid Width="25" Height="25">
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Rectangle Grid.Row="0" Grid.Column="0" Fill="Black" Opacity="0.15" />
                            <Rectangle Grid.Row="0" Grid.Column="1" />
                            <Rectangle Grid.Row="1" Grid.Column="0" />
                            <Rectangle Grid.Row="1" Grid.Column="1" Fill="Black" Opacity="0.15" />
                        </Grid>
                    </VisualBrush.Visual>
                </VisualBrush>
            </Grid.Background>

            <Grid x:Name="DeviceDisplayGrid">
                <Grid.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="{Binding PanZoomViewModel.Zoom}" ScaleY="{Binding PanZoomViewModel.Zoom}" />
                        <TranslateTransform X="{Binding PanZoomViewModel.PanX}" Y="{Binding PanZoomViewModel.PanY}" />
                    </TransformGroup>
                </Grid.RenderTransform>
                <ItemsControl ItemsSource="{Binding Devices}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <Canvas />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemContainerStyle>
                        <Style TargetType="{x:Type ContentPresenter}">
                            <Setter Property="Canvas.Left" Value="{Binding X}" />
                            <Setter Property="Canvas.Top" Value="{Binding Y}" />
                        </Style>
                    </ItemsControl.ItemContainerStyle>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <shared:DeviceVisualizer Device="{Binding}"
                                                     ShowColors="True"
                                                     RenderOptions.BitmapScalingMode="HighQuality"
                                                     HighlightedLeds="{Binding DataContext.HighlightedLeds, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" />
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Grid>

            <Grid x:Name="EditorDisplayGrid"
                  Visibility="{Binding SuspendedEditing, Converter={x:Static s:BoolToVisibilityConverter.InverseInstance}, Mode=OneWay}"
                  shared:SizeObserver.Observe="True"
                  shared:SizeObserver.ObservedHeight="{Binding PanZoomViewModel.CanvasHeight}"
                  shared:SizeObserver.ObservedWidth="{Binding PanZoomViewModel.CanvasWidth}">
                <Grid.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="{Binding PanZoomViewModel.Zoom}" ScaleY="{Binding PanZoomViewModel.Zoom}" />
                        <TranslateTransform X="{Binding PanZoomViewModel.PanX}" Y="{Binding PanZoomViewModel.PanY}" />
                    </TransformGroup>
                </Grid.RenderTransform>
                <ItemsControl ItemsSource="{Binding Items}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <Canvas />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemContainerStyle>
                        <Style TargetType="{x:Type ContentPresenter}">
                            <Setter Property="Canvas.Left" Value="{Binding X}" />
                            <Setter Property="Canvas.Top" Value="{Binding Y}" />
                        </Style>
                    </ItemsControl.ItemContainerStyle>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <ContentControl s:View.Model="{Binding}" />
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Grid>

            <StackPanel Orientation="Vertical" VerticalAlignment="Bottom" HorizontalAlignment="Right"
                        Margin="10" Panel.ZIndex="1">
                <Slider Orientation="Vertical"
                        HorizontalAlignment="Center"
                        Margin="0 10"
                        Height="120"
                        Minimum="10"
                        Maximum="250"
                        Value="{Binding PanZoomViewModel.ZoomPercentage}" />
                <Button Command="{s:Action ResetZoomAndPan}"
                        Style="{StaticResource MaterialDesignFloatingActionMiniButton}"
                        HorizontalAlignment="Right"
                        ToolTip="Reset zoom &amp; position">
                    <materialDesign:PackIcon Kind="ImageFilterCenterFocus" Height="24" Width="24" />
                </Button>
            </StackPanel>
        </Grid>
    </Grid>

</UserControl>