<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"
             xmlns:models="clr-namespace:DesertPaintCodex.Models"
             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.DataTemplates>
      <DataTemplate DataType="{x:Type models:GeneratorRecipe}">
        <Grid ColumnDefinitions="45,5,130,5,*" RowDefinitions="Auto" Margin="5">
          <Border Grid.Column="0" Classes="ReagentSwatch" Background="{Binding Color, Converter={StaticResource paintToBrush}, FallbackValue=#00000000}" />
          <TextBlock Grid.Column="2" VerticalAlignment="Center" Text="{Binding Color.Name}"/>
          <TextBlock Grid.Column="4" VerticalAlignment="Center" TextWrapping="Wrap" Text="{Binding Recipe}"/>
        </Grid>
      </DataTemplate>
    </UserControl.DataTemplates>
  
    <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 CONCENTRATION" Message="The current recipe does not have sufficient concentration of reagents." IsVisible="{Binding !IsValidConcentration}" />
      <views:EmbeddedWarningBox DockPanel.Dock="Bottom" Title="🛇 INSUFFICIENT DATA" Message="You are missing reaction data necessary for simulating this recipe." Message2="{Binding MissingReactionList}" IsVisible="{Binding HasMissingReactions}" />

    <Border Classes="ThinFrame" DockPanel.Dock="Bottom" IsVisible="{Binding ExistingRecipe, Converter={x:Static ObjectConverters.IsNotNull}}" Margin="0,0,0,10">
      <Grid ColumnDefinitions="*,50" RowDefinitions="20,*" HorizontalAlignment="Stretch" DockPanel.Dock="Bottom" >
          <TextBlock Classes="BlockHeader" Grid.Row="0" Grid.Column="0" DockPanel.Dock="Top" Margin="0 0 0 5">CURRENT RECIPE</TextBlock>
          <ContentControl Grid.Row="1" Grid.Column="0" Content="{Binding ExistingRecipe}"/>
      </Grid>
    </Border>

    <Grid ColumnDefinitions="*,120" RowDefinitions="*" HorizontalAlignment="Stretch" DockPanel.Dock="Bottom" Margin="0,0,0,10">
      <views:PaintSwatchView Grid.Row="0" Grid.Column="0" ShowName="True" Color="{Binding PaintColor}"  IsVisible="true"/>
      <Button Grid.Row="0" Grid.Column="1" Margin="10 10 10 10" IsEnabled="{Binding IsGoodRecipe}"  Command="{Binding ReplaceRecipe}">
        <Panel>
        <TextBlock TextAlignment="Center" IsVisible="{Binding ExistingRecipe, Converter={x:Static ObjectConverters.IsNull}}">
Save
Recipe
        </TextBlock>
        <TextBlock TextAlignment="Center" IsVisible="{Binding ExistingRecipe, Converter={x:Static ObjectConverters.IsNotNull}}">
Replace
Recipe
        </TextBlock>
        </Panel>
      </Button>
    </Grid>

    <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>