<UserControl x:Class="Artemis.UI.Screens.Settings.Device.Tabs.DevicePropertiesTabView"
             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:local="clr-namespace:Artemis.UI.Screens.Settings.Device.Tabs"
             xmlns:shared="clr-namespace:Artemis.UI.Shared;assembly=Artemis.UI.Shared"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:s="https://github.com/canton7/Stylet"
             xmlns:b="http://schemas.microsoft.com/xaml/behaviors"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800"
             d:DataContext="{d:DesignInstance local:DevicePropertiesTabViewModel}">
    <UserControl.Resources>
        <shared:SKColorToColorConverter x:Key="SKColorToColorConverter" />
    </UserControl.Resources>

    <!-- Body -->
    <Grid Margin="15">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0">
            <!-- Layout -->
            <TextBlock Style="{StaticResource MaterialDesignSubtitle1TextBlock}">
                Categories
            </TextBlock>
            <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}"
                       Foreground="{DynamicResource MaterialDesignBodyLight}"
                       TextWrapping="Wrap"
                       TextAlignment="Justify">
                Artemis uses categories to determine where the layers of imported profiles are applied to. <LineBreak />
                You can hover over a category for a more detailed description.
            </TextBlock>
            <StackPanel Orientation="Horizontal">
                <CheckBox Style="{StaticResource MaterialDesignFilterChipOutlineCheckBox}"
                          IsChecked="{Binding HasDeskCategory}"
                          ToolTip="A device acting as desk ornamentation such as a LED strip"
                          Content="Desk" />
                <CheckBox Style="{StaticResource MaterialDesignFilterChipOutlineCheckBox}"
                          IsChecked="{Binding HasMonitorCategory}"
                          ToolTip="A device attached to the monitor such as ambilight LEDs"
                          Content="Monitor" />
                <CheckBox Style="{StaticResource MaterialDesignFilterChipOutlineCheckBox}"
                          ToolTip="A device inside your computer case"
                          IsChecked="{Binding HasCaseCategory}"
                          Content="Case" />
                <CheckBox Style="{StaticResource MaterialDesignFilterChipOutlineCheckBox}"
                          IsChecked="{Binding HasRoomCategory}"
                          ToolTip="A device elsewhere in the room"
                          Content="Room" />
                <CheckBox Style="{StaticResource MaterialDesignFilterChipOutlineCheckBox}"
                          IsChecked="{Binding HasPeripheralsCategory}"
                          ToolTip="A peripheral such as a mouse or keyboard"
                          Content="Peripheral" />
            </StackPanel>

            <Grid Margin="0 25">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="40" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0">
                    <TextBlock Style="{StaticResource MaterialDesignSubtitle1TextBlock}">
                        Surface properties
                    </TextBlock>

                    <TextBox materialDesign:HintAssist.Hint="X-coordinate"
                             materialDesign:TextFieldAssist.SuffixText="mm"
                             Text="{Binding X, UpdateSourceTrigger=PropertyChanged}"
                             Style="{StaticResource MaterialDesignFilledTextBox}"
                             Margin="0 5" />
                    <TextBox materialDesign:HintAssist.Hint="Y-coordinate"
                             materialDesign:TextFieldAssist.SuffixText="mm"
                             Text="{Binding Y, UpdateSourceTrigger=PropertyChanged}"
                             Style="{StaticResource MaterialDesignFilledTextBox}"
                             Margin="0 5" />
                    <TextBox materialDesign:HintAssist.Hint="Scale"
                             materialDesign:TextFieldAssist.SuffixText="times"
                             Text="{Binding Scale, UpdateSourceTrigger=PropertyChanged}"
                             Style="{StaticResource MaterialDesignFilledTextBox}"
                             Margin="0 5" />
                    <TextBox materialDesign:HintAssist.Hint="Rotation"
                             materialDesign:TextFieldAssist.SuffixText="deg"
                             Text="{Binding Rotation, UpdateSourceTrigger=PropertyChanged}"
                             Style="{StaticResource MaterialDesignFilledTextBox}"
                             Margin="0 5 0 12" />
                </StackPanel>

                <Rectangle Grid.Column="1" VerticalAlignment="Stretch" Fill="{StaticResource MaterialDesignTextBoxBorder}" Width="1" Margin="0 0 0 5" />

                <StackPanel Grid.Column="2">
                    <TextBlock Style="{StaticResource MaterialDesignSubtitle1TextBlock}">
                        Color calibration
                    </TextBlock>

                    <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}"
                               Foreground="{DynamicResource MaterialDesignBodyLight}"
                               TextWrapping="Wrap"
                               TextAlignment="Justify">
                        Use the sliders below to adjust the colors of your device so that it matches your other devices.
                    </TextBlock>

                    <Grid Margin="0 3">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Content="R" VerticalAlignment="Center" />
                        <Slider Grid.Column="1"
                                Minimum="0"
                                Maximum="200"
                                ValueChanged="{s:Action ApplyScaling}"
                                Value="{Binding RedScale, UpdateSourceTrigger=PropertyChanged}"
                                Margin="10"
                                VerticalAlignment="Center" />
                        <TextBox Grid.Column="2"
                                 VerticalAlignment="Center"
                                 Style="{StaticResource MaterialDesignFilledTextBox}"
                                 Width="70"
                                 Text="{Binding RedScale, StringFormat={}{0:0.0}, UpdateSourceTrigger=PropertyChanged}"
                                 materialDesign:TextFieldAssist.SuffixText="%"
                                 materialDesign:HintAssist.IsFloating="False" />
                    </Grid>

                    <Grid Margin="0 3">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Content="G" VerticalAlignment="Center" />
                        <Slider Grid.Column="1"
                                Minimum="0"
                                Maximum="200"
                                ValueChanged="{s:Action ApplyScaling}"
                                Value="{Binding GreenScale, UpdateSourceTrigger=PropertyChanged}"
                                Margin="10"
                                VerticalAlignment="Center" />
                        <TextBox Grid.Column="2"
                                 VerticalAlignment="Center"
                                 Style="{StaticResource MaterialDesignFilledTextBox}"
                                 Width="70"
                                 Text="{Binding GreenScale, StringFormat={}{0:0.0}, UpdateSourceTrigger=PropertyChanged}"
                                 materialDesign:TextFieldAssist.SuffixText="%"
                                 materialDesign:HintAssist.IsFloating="False" />
                    </Grid>

                    <Grid Margin="0 2">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Content="B" VerticalAlignment="Center" />
                        <Slider Grid.Column="1"
                                Minimum="0"
                                Maximum="200"
                                ValueChanged="{s:Action ApplyScaling}"
                                Value="{Binding BlueScale, UpdateSourceTrigger=PropertyChanged}"
                                Margin="10"
                                Ticks="100"
                                VerticalAlignment="Center" />
                        <TextBox Grid.Column="2"
                                 VerticalAlignment="Center"
                                 Style="{StaticResource MaterialDesignFilledTextBox}"
                                 Width="70"
                                 Text="{Binding BlueScale, StringFormat={}{0:0.0}, UpdateSourceTrigger=PropertyChanged}"
                                 materialDesign:TextFieldAssist.SuffixText="%"
                                 materialDesign:HintAssist.IsFloating="False" />
                    </Grid>

                    <Grid Margin="0 3 0 0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <CheckBox Grid.Column="0"
                                  IsChecked="{Binding DisplayOnDevices}"
                                  Content="Show preview"
                                  VerticalAlignment="Center" />
                        <shared:ColorPicker Grid.Column="1"
                                            HorizontalAlignment="Right"
                                            Color="{Binding CurrentColor, Converter={StaticResource SKColorToColorConverter}}"
                                            TextBoxStyle="{StaticResource MaterialDesignFilledTextBox}"
                                            VerticalAlignment="Center" />
                    </Grid>
                </StackPanel>
            </Grid>

            <!-- Layout -->
            <TextBlock Style="{StaticResource MaterialDesignSubtitle1TextBlock}">
                Layout
            </TextBlock>
            <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}"
                       Foreground="{DynamicResource MaterialDesignBodyLight}"
                       TextWrapping="Wrap"
                       TextAlignment="Justify">
                The device layout is used to determine the position of LEDs and to create the visual representation of the device you see on the left side of this window.
            </TextBlock>

            <CheckBox Margin="0 0 0 5" Style="{StaticResource MaterialDesignCheckBox}" IsChecked="{Binding Device.DisableDefaultLayout, Delay=300}">
                <CheckBox.Content>
                    <TextBlock Margin="0 -5 0 0">
                        Don't load default layout
                        <materialDesign:PackIcon Kind="HelpCircle"
                                                 ToolTip="With this enabled Artemis will not load a layout for this device unless you specifically provide one." />
                    </TextBlock>
                </CheckBox.Content>
            </CheckBox>

            <TextBox Style="{StaticResource MaterialDesignFilledTextBox}"
                     Text="{Binding Device.CustomLayoutPath}"
                     VerticalAlignment="Center"
                     materialDesign:TextFieldAssist.HasClearButton="True"
                     IsReadOnly="True"
                     PreviewMouseLeftButtonUp="{s:Action BrowseCustomLayout}">
                <materialDesign:HintAssist.Hint>
                    <StackPanel Orientation="Horizontal" Margin="-2 0 0 0">
                        <materialDesign:PackIcon Kind="Xml" Width="20" />
                        <TextBlock>Custom layout path</TextBlock>
                    </StackPanel>
                </materialDesign:HintAssist.Hint>
            </TextBox>
            <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}"
                       Foreground="{DynamicResource MaterialDesignBodyLight}"
                       TextWrapping="Wrap"
                       TextAlignment="Justify">
                Select a custom layout below if you want to change the appearance and/or LEDs of this device.
                For info on how to create layouts, check out
                <Hyperlink Style="{StaticResource ArtemisHyperlink}"
                           NavigateUri="https://wiki.artemis-rgb.com/en/guides/developer/layouts">
                    this wiki article
                    <b:Interaction.Behaviors>
                        <shared:OpenInBrowser />
                    </b:Interaction.Behaviors>
                </Hyperlink>
                .
            </TextBlock>
        </StackPanel>

        <!-- Buttons -->
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0"
                    Style="{StaticResource MaterialDesignOutlinedButton}"
                    Margin="0 8 8 0"
                    Command="{s:Action SelectPhysicalLayout}"
                    ToolTip="Restart device setup, allowing you to select a new physical and logical layout">
                RESTART SETUP
            </Button>

            <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Style="{StaticResource MaterialDesignOutlinedButton}" IsCancel="True" Margin="0 8 8 0" Command="{s:Action Reset}">
                    RESET
                </Button>
                <Button Style="{StaticResource MaterialDesignRaisedButton}" IsDefault="True" Margin="0 8 8 0" Command="{s:Action Apply}">
                    APPLY
                </Button>
            </StackPanel>
        </Grid>

    </Grid>
</UserControl>