<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:viewportControls="clr-namespace:PixiEditor.AvaloniaUI.Views.Main.ViewportControls"
             xmlns:converters="clr-namespace:PixiEditor.AvaloniaUI.Helpers.Converters"
             xmlns:input="clr-namespace:PixiEditor.AvaloniaUI.Views.Input"
             xmlns:ui1="clr-namespace:PixiEditor.AvaloniaUI.Helpers.UI"
             xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             Name="uc"
             x:Class="PixiEditor.AvaloniaUI.Views.Main.Navigation">
     <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="5"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid x:Name="imageGrid" RenderOptions.BitmapInterpolationMode="None"
              IsVisible="{Binding !!Document, ElementName=uc}"
              Margin="10" Background="Transparent"
              d:Width="8" d:Height="8">
            <viewportControls:FixedViewport
                Delayed="True"
                x:Name="viewport"
                Document="{Binding Document, ElementName=uc}"
                Background="{Binding ActiveItem.Value, ElementName=backgroundButton}"/>
            <Border 
                    x:Name="colorCursor" Width="1" Height="1"
                    Margin="{Binding ColorCursorPosition, ElementName=uc}"
                    HorizontalAlignment="Left" VerticalAlignment="Top"
                    BorderBrush="{DynamicResource ThemeBorderLowBrush}" BorderThickness=".1"
                    IsVisible="{Binding IsPointerOver, ElementName=imageGrid}">
                <Border BorderThickness=".1" BorderBrush="White"/>
            </Border>
        </Grid>

        <Grid Grid.Row="1">
            <Grid.Background>
                <SolidColorBrush Color="{Binding ColorCursorColor, ElementName=uc, FallbackValue=Black}"/>
            </Grid.Background>
        </Grid>
        <StackPanel Margin="10, 0, 0, 0" Grid.Row="2" Orientation="Horizontal" MinHeight="30"
                    Background="{DynamicResource ThemeBackgroundBrush}" MaxHeight="60">
            <StackPanel.Styles>
                <Style Selector="TextBlock">
                    <Setter Property="VerticalAlignment" Value="Center"/>
                </Style>
            </StackPanel.Styles>

            <TextBlock Text="{Binding ColorCursorPosition.Left, ElementName=uc, StringFormat='X: {0}'}"/>
            <TextBlock Text="{Binding ColorCursorPosition.Top, ElementName=uc, StringFormat='Y: {0}'}"/>

            <TextBlock VerticalAlignment="Center" Margin="10, 0, 0, 0">
                <TextBlock.Text>
                    <MultiBinding Converter="{converters:FormattedColorConverter}">
                        <Binding Path="ColorCursorColor" ElementName="uc"/>
                        <Binding Path="ActiveItem.Value" ElementName="formatButton"/>
                    </MultiBinding>
                </TextBlock.Text>
            </TextBlock>
        </StackPanel>
        <Grid Grid.Row="2" HorizontalAlignment="Right" Margin="0,0,5,0" ui:RenderOptionsBindable.BitmapInterpolationMode="{Binding ElementName=backgroundButton, Path=ActiveItem.ScalingMode}">
            <StackPanel Orientation="Horizontal">
                <input:ListSwitchButton x:Name="formatButton" Margin="0,0,5,0" Height="20">
                    <input:ListSwitchButton.Items>
                        <input:SwitchItemObservableCollection>
                            <input:SwitchItem Content="RGBA" Background="{DynamicResource ThemeControlMidBrush}" Value="RGBA"/>
                            <input:SwitchItem Content="HEX" Background="{DynamicResource ThemeControlMidBrush}" Value="HEX"/>
                        </input:SwitchItemObservableCollection>
                    </input:ListSwitchButton.Items>
                </input:ListSwitchButton>
                <input:ListSwitchButton RenderOptions.BitmapInterpolationMode="None" BorderBrush="{DynamicResource ThemeBorderMidBrush}" Width="25" Height="20" x:Name="backgroundButton">
                    <input:ListSwitchButton.Items>
                        <input:SwitchItemObservableCollection>
                            <input:SwitchItem ScalingMode="None">
                                <input:SwitchItem.Background>
                                    <ImageBrush Source="/Images/CheckerTile.png" TileMode="Tile" DestinationRect="0, 0, 25 25"/>
                                </input:SwitchItem.Background>
                                <input:SwitchItem.Value>
                                    <ImageBrush DestinationRect="0, 10, 10, 10" Source="/Images/CheckerTile.png" TileMode="Tile"/>
                                </input:SwitchItem.Value>
                            </input:SwitchItem>
                            <input:SwitchItem Value="Transparent">
                                <input:SwitchItem.Background>
                                    <ImageBrush Source="/Images/DiagonalRed.png"/>
                                </input:SwitchItem.Background>
                            </input:SwitchItem>
                            <input:SwitchItem Background="White" Value="White"/>
                            <input:SwitchItem Background="Black" Value="Black"/>
                        </input:SwitchItemObservableCollection>
                    </input:ListSwitchButton.Items>
                </input:ListSwitchButton>
            </StackPanel>
        </Grid>
    </Grid>
</UserControl>
