<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:device="clr-namespace:Artemis.UI.Screens.Device"
             xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
             xmlns:inputMappings="clr-namespace:Artemis.UI.Screens.Device.InputMappings"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="Artemis.UI.Screens.Device.InputMappings.InputMappingsTabView"
             x:DataType="inputMappings:InputMappingsTabViewModel">
    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
        <Grid RowDefinitions="Auto,Auto,*">
            <StackPanel Grid.Row="0">
                <TextBlock Classes="h4">
                    Introduction
                </TextBlock>
                <TextBlock TextWrapping="Wrap">
                    In some cases you may want Artemis to map key presses to different LEDs.
                </TextBlock>
                <TextBlock TextWrapping="Wrap" Margin="0 13 0 0">
                    This is useful when your logical layout swaps keys around (like Hungarian layouts where the Z and Y keys are swapped). In this tab you can set up these custom input mappings, simply click on a LED and press a key, Artemis will from then on consider that LED pressed whenever you press the same key again.
                </TextBlock>
            </StackPanel>

            <TextBlock Grid.Row="1"
                       Margin="0 20"
                       Classes="h4"
                       TextAlignment="Center"
                       IsVisible="{CompiledBinding SelectedLed, Converter={x:Static ObjectConverters.IsNull}}">
                Select a LED in the preview on the left side to get started...
            </TextBlock>

            <StackPanel Grid.Row="1" Margin="0 20" IsVisible="{CompiledBinding SelectedLed, Converter={x:Static ObjectConverters.IsNotNull}}">
                <StackPanel HorizontalAlignment="Center" Orientation="Horizontal" Spacing="6">
                    <TextBlock Classes="h4" TextAlignment="Center">Current target LED: </TextBlock>
                    <TextBlock Classes="h4" TextAlignment="Center" Text="{CompiledBinding SelectedLed.RgbLed.Id, Mode=OneWay, FallbackValue='none'}" />
                </StackPanel>
                <StackPanel HorizontalAlignment="Center" Orientation="Horizontal" Spacing="5">
                    <TextBlock TextAlignment="Center">Press the key you want to remap</TextBlock>
                    <TextBlock TextAlignment="Center" FontWeight="Bold" Text="{CompiledBinding SelectedLed.RgbLed.Id, Mode=OneWay, FallbackValue='none'}" />
                    <TextBlock TextAlignment="Center">to ...</TextBlock>
                </StackPanel>
            </StackPanel>

            <DataGrid Grid.Row="2"
                      ItemsSource="{CompiledBinding InputMappings}"
                      CanUserSortColumns="True"
                      IsReadOnly="True"
                      AutoGenerateColumns="False"
                      Margin="10">
                <DataGrid.Columns>
                    <DataGridTextColumn Binding="{CompiledBinding Path=Original.RgbLed.Id}" Header="Original LED ID" Width="*" />
                    <DataGridTextColumn Binding="{CompiledBinding Path=Replacement.RgbLed.Id}" Header="Remapped LED ID" Width="*" />

                    <DataGridTemplateColumn Width="Auto" IsReadOnly="True">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Button Command="{Binding $parent[UserControl].DataContext.DeleteMapping}"
                                        CommandParameter="{Binding}"
                                        Classes="icon-button"
                                        ToolTip.Tip="Delete mapping"
                                        HorizontalAlignment="Center">
                                    <avalonia:MaterialIcon Kind="Delete" />
                                </Button>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                </DataGrid.Columns>
            </DataGrid>
        </Grid>
    </ScrollViewer>
</UserControl>