<UserControl x:Class="CalculatorApp.EquationInputArea"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:controls="using:CalculatorApp.Controls"
             xmlns:converters="using:CalculatorApp.Converters"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="using:CalculatorApp"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:mux="using:Microsoft.UI.Xaml.Controls"
             xmlns:vm="using:CalculatorApp.ViewModel"
             d:DesignHeight="300"
             d:DesignWidth="400"
             mc:Ignorable="d">
    <UserControl.Resources>
        <ResourceDictionary>
            <converters:BooleanToVisibilityNegationConverter x:Name="BooleanToVisibilityNegationConverter"/>

            <DataTemplate x:Key="VariableDataTemplate" x:DataType="vm:VariableViewModel">
                <Grid>
                    <Grid.Resources>
                        <ResourceDictionary>

                            <Style x:Key="VariableTextBoxStyle" TargetType="TextBox">
                                <Setter Property="Margin" Value="10,0,0,0"/>
                                <Setter Property="Padding" Value="2,6,2,2"/>
                                <Setter Property="TextAlignment" Value="Center"/>
                                <Setter Property="Background" Value="Transparent"/>
                                <Setter Property="BorderThickness" Value="0,0,0,1"/>
                                <Setter Property="FontSize" Value="14"/>
                                <Setter Property="InputScope" Value="Number"/>
                                <Setter Property="MaxWidth" Value="46"/>
                                <Setter Property="MinWidth" Value="30"/>
                            </Style>

                            <ResourceDictionary.ThemeDictionaries>
                                <ResourceDictionary x:Key="Default">
                                    <SolidColorBrush x:Key="TextControlBackgroundFocused" Color="Transparent"/>
                                    <SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="Transparent"/>
                                    <SolidColorBrush x:Key="TextControlForegroundFocused" Color="White"/>
                                    <SolidColorBrush x:Key="SliderLegendBrush" Color="#B2ffffff"/>
                                    <Style x:Key="VariableContainerStyle" TargetType="Border">
                                        <Setter Property="Background" Value="#34000000"/>
                                    </Style>
                                    <Style x:Key="ThemedVariableTextBoxStyle"
                                           BasedOn="{StaticResource VariableTextBoxStyle}"
                                           TargetType="TextBox">
                                        <Setter Property="BorderBrush" Value="#50ffffff"/>
                                    </Style>
                                </ResourceDictionary>
                                <ResourceDictionary x:Key="Light">
                                    <SolidColorBrush x:Key="TextControlBackgroundFocused" Color="Transparent"/>
                                    <SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="Transparent"/>
                                    <SolidColorBrush x:Key="TextControlForegroundFocused" Color="Black"/>
                                    <SolidColorBrush x:Key="SliderLegendBrush" Color="#B2000000"/>
                                    <Style x:Key="VariableContainerStyle" TargetType="Border">
                                        <Setter Property="Background" Value="#34ffffff"/>
                                    </Style>
                                    <Style x:Key="ThemedVariableTextBoxStyle"
                                           BasedOn="{StaticResource VariableTextBoxStyle}"
                                           TargetType="TextBox">
                                        <Setter Property="BorderBrush" Value="#70000000"/>
                                    </Style>
                                </ResourceDictionary>
                                <ResourceDictionary x:Key="HighContrast">
                                    <SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{StaticResource SystemColorButtonFaceColor}"/>
                                    <SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="{StaticResource SystemColorButtonFaceColor}"/>
                                    <SolidColorBrush x:Key="TextControlForegroundFocused" Color="{StaticResource SystemColorButtonTextColor}"/>
                                    <SolidColorBrush x:Key="VariablesBackgroundBrush" Color="{StaticResource SystemColorBackgroundColor}"/>
                                    <SolidColorBrush x:Key="SliderLegendBrush" Color="{StaticResource SystemColorWindowTextColor}"/>
                                    <Style x:Key="VariableContainerStyle" TargetType="Border">
                                        <Setter Property="Background" Value="{StaticResource SystemColorWindowColor}"/>
                                        <Setter Property="BorderThickness" Value="1"/>
                                        <Setter Property="BorderBrush" Value="{StaticResource SystemColorWindowTextColor}"/>
                                    </Style>
                                    <Style x:Key="ThemedVariableTextBoxStyle" TargetType="TextBox">
                                        <Setter Property="InputScope" Value="Number"/>
                                        <Setter Property="TextAlignment" Value="Center"/>
                                        <Setter Property="InputScope" Value="Number"/>
                                        <Setter Property="MaxWidth" Value="80"/>
                                        <Setter Property="MinWidth" Value="40"/>
                                    </Style>
                                </ResourceDictionary>
                            </ResourceDictionary.ThemeDictionaries>
                        </ResourceDictionary>
                    </Grid.Resources>
                    <Border Margin="0,3" Style="{ThemeResource VariableContainerStyle}">
                        <StackPanel Padding="12,0" DataContext="{x:Bind}">
                            <Grid HorizontalAlignment="Stretch">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock MinWidth="10"
                                           Margin="0,4,0,0"
                                           VerticalAlignment="Center"
                                           FontWeight="SemiBold"
                                           Text="{x:Bind Name}"/>
                                <TextBox x:Name="ValueTextBox"
                                         Grid.Column="1"
                                         HorizontalAlignment="Left"
                                         VerticalAlignment="Center"
                                         Style="{StaticResource ThemedVariableTextBoxStyle}"
                                         GotFocus="TextBoxGotFocus"
                                         KeyDown="TextBoxKeyDown"
                                         LosingFocus="TextBoxLosingFocus"
                                         Text="{x:Bind Value, Mode=OneWay}"/>
                                <ToggleButton x:Uid="sliderOptionsButton"
                                              Grid.Column="2"
                                              Margin="0,0,-8,0"
                                              HorizontalAlignment="Right"
                                              VerticalAlignment="Center"
                                              Background="Transparent"
                                              FontFamily="{StaticResource SymbolThemeFontFamily}"
                                              Content="&#xE713;"
                                              IsChecked="{x:Bind SliderSettingsVisible, Mode=TwoWay}">
                                    <ToggleButton.Resources>
                                        <SolidColorBrush x:Key="ToggleButtonBackgroundPressed" Color="Transparent"/>
                                        <SolidColorBrush x:Key="ToggleButtonBackgroundChecked" Color="Transparent"/>
                                        <SolidColorBrush x:Key="ToggleButtonBackgroundCheckedPointerOver" Color="Transparent"/>
                                        <SolidColorBrush x:Key="ToggleButtonBorderBrushCheckedPointerOver" Color="Transparent"/>
                                        <SolidColorBrush x:Key="ToggleButtonBackgroundPointerOver" Color="Transparent"/>
                                        <SolidColorBrush x:Key="ToggleButtonBorderBrushPointerOver" Color="Transparent"/>
                                        <SolidColorBrush x:Key="ToggleButtonBackgroundCheckedPressed" Color="Transparent"/>
                                        <SolidColorBrush x:Key="ToggleButtonForegroundPointerOver" Color="{ThemeResource SystemAccentColor}"/>
                                        <SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="{ThemeResource SystemAccentColor}"/>
                                        <SolidColorBrush x:Key="ToggleButtonForegroundChecked" Color="{ThemeResource SystemAccentColor}"/>
                                        <SolidColorBrush x:Key="ToggleButtonForegroundCheckedPressed" Color="{ThemeResource SystemAccentColor}"/>
                                        <SolidColorBrush x:Key="ToggleButtonForegroundCheckedPointerOver" Color="{ThemeResource SystemAccentColor}"/>
                                        <x:Double x:Key="TextControlThemeMinWidth">32</x:Double>
                                    </ToggleButton.Resources>
                                </ToggleButton>
                            </Grid>
                            <Grid Visibility="{x:Bind SliderSettingsVisible, Converter={StaticResource BooleanToVisibilityNegationConverter}, Mode=OneWay}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="auto"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="auto"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock VerticalAlignment="Center"
                                           Foreground="{ThemeResource SliderLegendBrush}"
                                           Text="{x:Bind Min, Mode=OneWay}"/>
                                <Slider Grid.Column="1"
                                        Margin="8,0"
                                        VerticalAlignment="Center"
                                        Maximum="{x:Bind Max, Mode=TwoWay}"
                                        Minimum="{x:Bind Min, Mode=TwoWay}"
                                        StepFrequency="{x:Bind Step, Mode=TwoWay}"
                                        Value="{x:Bind Value, Mode=TwoWay}"/>
                                <TextBlock Grid.Column="2"
                                           VerticalAlignment="Center"
                                           Foreground="{ThemeResource SliderLegendBrush}"
                                           Text="{x:Bind Max, Mode=OneWay}"/>
                            </Grid>
                            <Grid Grid.Row="1"
                                  Padding="0,6,0,12"
                                  HorizontalAlignment="Stretch"
                                  Visibility="{x:Bind SliderSettingsVisible, Mode=OneWay}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Grid HorizontalAlignment="Left">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock x:Uid="MinTextBlock"
                                               Margin="0,4,0,0"
                                               VerticalAlignment="Center"/>
                                    <TextBox x:Name="MinTextBox"
                                             Grid.Column="1"
                                             Style="{StaticResource ThemedVariableTextBoxStyle}"
                                             GotFocus="TextBoxGotFocus"
                                             KeyDown="TextBoxKeyDown"
                                             LosingFocus="TextBoxLosingFocus"
                                             Text="{x:Bind Min, Mode=OneWay}"/>
                                </Grid>
                                <Grid Grid.Column="1"
                                      Margin="4,0"
                                      HorizontalAlignment="Center">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock x:Uid="StepTextBlock"
                                               Margin="0,4,0,0"
                                               HorizontalAlignment="Center"
                                               VerticalAlignment="Center"/>
                                    <TextBox x:Name="StepTextBox"
                                             Grid.Column="1"
                                             Style="{StaticResource ThemedVariableTextBoxStyle}"
                                             GotFocus="TextBoxGotFocus"
                                             KeyDown="TextBoxKeyDown"
                                             LosingFocus="TextBoxLosingFocus"
                                             Text="{x:Bind Step, Mode=OneWay}"/>
                                </Grid>
                                <Grid Grid.Column="2" HorizontalAlignment="Right">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock x:Uid="MaxTextBlock"
                                               Margin="0,4,0,0"
                                               VerticalAlignment="Center"/>
                                    <TextBox x:Name="MaxTextBox"
                                             Grid.Column="1"
                                             Style="{StaticResource ThemedVariableTextBoxStyle}"
                                             GotFocus="TextBoxGotFocus"
                                             KeyDown="TextBoxKeyDown"
                                             LosingFocus="TextBoxLosingFocus"
                                             Text="{x:Bind Max, Mode=OneWay}"/>
                                </Grid>
                            </Grid>
                        </StackPanel>
                    </Border>
                </Grid>
            </DataTemplate>

        </ResourceDictionary>
    </UserControl.Resources>
    <mux:ItemsRepeaterScrollHost>
        <ScrollViewer>
            <StackPanel>
                <mux:ItemsRepeater x:Name="EquationInputList"
                                   ItemsSource="{x:Bind Equations}"
                                   TabFocusNavigation="Local">
                    <mux:ItemsRepeater.ItemTemplate>
                        <DataTemplate x:DataType="vm:EquationViewModel">
                            <controls:EquationTextBox x:Uid="EquationInputButton"
                                                      Margin="1,0,1,2"
                                                      Style="{StaticResource EquationTextBoxStyle}"
                                                      DataContext="{x:Bind Mode=OneWay}"
                                                      DataContextChanged="InputTextBox_DataContextChanged"
                                                      EquationButtonClicked="EquationTextBox_EquationButtonClicked"
                                                      EquationButtonContentIndex="{x:Bind FunctionLabelIndex, Mode=OneWay}"
                                                      EquationColor="{x:Bind local:EquationInputArea.ToSolidColorBrush(LineColor), Mode=OneWay}"
                                                      EquationSubmitted="InputTextBox_Submitted"
                                                      GotFocus="InputTextBox_GotFocus"
                                                      HasError="{x:Bind GraphEquation.HasGraphError, Mode=OneWay}"
                                                      IsAddEquationMode="{x:Bind IsLastItemInList, Mode=OneWay}"
                                                      KeyGraphFeaturesButtonClicked="EquationTextBox_KeyGraphFeaturesButtonClicked"
                                                      Loaded="InputTextBox_Loaded"
                                                      LostFocus="InputTextBox_LostFocus"
                                                      RemoveButtonClicked="EquationTextBox_RemoveButtonClicked">
                                <controls:EquationTextBox.ColorChooserFlyout>
                                    <Flyout x:Name="ColorChooserFlyout"
                                            x:Uid="ColorChooserFlyout"
                                            Placement="Bottom">
                                        <local:EquationStylePanelControl SelectedColor="{x:Bind LineColor, Mode=TwoWay}"/>
                                    </Flyout>
                                </controls:EquationTextBox.ColorChooserFlyout>
                            </controls:EquationTextBox>
                        </DataTemplate>
                    </mux:ItemsRepeater.ItemTemplate>
                </mux:ItemsRepeater>

                <StackPanel Margin="12" Visibility="{x:Bind local:EquationInputArea.ManageEditVariablesButtonVisibility(Variables.Size), Mode=OneWay}">
                    <TextBlock x:Uid="VaiablesHeader"
                               Margin="0,6"
                               FontWeight="SemiBold"/>
                    <mux:ItemsRepeater x:Name="VariableListView"
                                       ItemTemplate="{StaticResource VariableDataTemplate}"
                                       ItemsSource="{x:Bind Variables, Mode=OneWay}"
                                       TabFocusNavigation="Local">
                        <mux:ItemsRepeater.Transitions>
                            <TransitionCollection>
                                <AddDeleteThemeTransition/>
                            </TransitionCollection>
                        </mux:ItemsRepeater.Transitions>
                    </mux:ItemsRepeater>
                </StackPanel>
            </StackPanel>

        </ScrollViewer>
    </mux:ItemsRepeaterScrollHost>

</UserControl>
