<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:DesertPaintCodex.ViewModels"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:views="clr-namespace:DesertPaintCodex.Views"
             mc:Ignorable="d" d:DesignWidth="600" d:DesignHeight="475"
             x:Class="DesertPaintCodex.Views.SimulatorView">
    
    <Design.DataContext>
        <vm:SimulatorViewModel/>
    </Design.DataContext>
    
    <UserControl.DataContext>
        <vm:SimulatorViewModel />
    </UserControl.DataContext>
    
    <UserControl.Styles>
        <Style Selector="Border.ReagentSwatch">
            <Setter Property="Width" Value="20"/>
            <Setter Property="Height" Value="20"/>
        </Style>
        <Style Selector="TextBlock.Unused">
            <Setter Property="Foreground" Value="#CA7091"/>
            <Setter Property="FontStyle" Value="Italic"/>
        </Style>
    </UserControl.Styles>
    
    <DockPanel Classes="Activity">
        <Button DockPanel.Dock="Bottom" VerticalAlignment="Center" Margin="0 10 0 0" IsEnabled="{Binding IsGoodRecipe}" Command="{Binding CopyToClipboard}">📋 Copy Recipe to Clipboard</Button>
        
        <views:EmbeddedWarningBox DockPanel.Dock="Bottom" Title="🛇 INSUFFICIENT DATA" Message="You are missing reaction data necessary for simulating this recipe." IsVisible="{Binding HasMissingReactions}" />
        
        <views:PaintSwatchView DockPanel.Dock="Bottom" ShowName="True" Color="{Binding PaintColor}"  IsVisible="{Binding !HasMissingReactions}"/>

        <Grid ColumnDefinitions="200,15,*" RowDefinitions="20,*" VerticalAlignment="Stretch" Margin="0 0 0 15">
            <TextBlock Grid.Row="0" Grid.Column="0" DockPanel.Dock="Top" Classes="BlockHeader" Margin="0 0 0 5">REAGENTS</TextBlock>
            <ListBox Grid.Row="1" Grid.Column="0" Items="{Binding Reagents}" SelectedItems="{Binding ActiveReagents}" SelectionMode="Multiple,Toggle">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Border BorderBrush="{DynamicResource ThemeBorderLowBrush}" BorderThickness="1">
                            <CheckBox IsChecked="{Binding $parent[ListBoxItem].IsSelected}">
                                <StackPanel Orientation="Horizontal" Spacing="10">
                                    <Border Classes="ReagentSwatch" Background="{Binding Color, Converter={StaticResource paintToBrush}, FallbackValue=#00000000}" />
                                    <TextBlock Text="{Binding Name}"/>
                                </StackPanel>
                            </CheckBox>
                        </Border>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

            <TextBlock Grid.Row="0" Grid.Column="2" Classes="BlockHeader">RECIPE</TextBlock>
            <Border Grid.Row="1" Grid.Column="2"
                    BorderBrush="{DynamicResource ThemeBorderMidBrush}"
                    BorderThickness="{DynamicResource ThemeBorderThickness}">
                <ScrollViewer Background="{DynamicResource ThemeBackgroundBrush}">
                    <ItemsControl Items="{Binding RecipeItems}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Grid ColumnDefinitions="45,15,*,15,40,5,40" RowDefinitions="Auto" Margin="5">
                                    <NumericUpDown Grid.Column="0" Minimum="0" Maximum="{Binding MaxQty}" Value="{Binding Quantity}"/>
                                    <TextBlock Grid.Column="2" VerticalAlignment="Center" Text="{Binding Reagent.Name}"
                                               FontSize="16" IsVisible="{Binding !Unused}"/>
                                    <TextBlock Grid.Column="2" VerticalAlignment="Center" Text="{Binding Reagent.Name}" Classes="Unused"
                                               FontSize="16" IsVisible="{Binding Unused}"/>
                                    <Button Grid.Column="4" Command="{Binding $parent[views:SimulatorView].DataContext.MoveItemUp}"
                                            CommandParameter="{Binding}"
                                            IsEnabled="{Binding !First}">▲</Button>
                                    <Button Grid.Column="6" Command="{Binding $parent[views:SimulatorView].DataContext.MoveItemDown}"
                                            CommandParameter="{Binding}"
                                            IsEnabled="{Binding !Last}">▼</Button>
                                </Grid>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </ScrollViewer>
            </Border>
        </Grid>
    </DockPanel>

 
</UserControl>