<!--
    Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
    the MIT License. See LICENSE in the project root for license information.
-->
<Page x:Class="Microsoft.Terminal.Settings.Editor.ColorSchemes"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:Microsoft.Terminal.Settings.Editor"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:model="using:Microsoft.Terminal.Settings.Model"
      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
      mc:Ignorable="d">

    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="CommonResources.xaml" />
            </ResourceDictionary.MergedDictionaries>

            <Style x:Key="GroupHeaderStyle"
                   BasedOn="{StaticResource SubtitleTextBlockStyle}"
                   TargetType="TextBlock">
                <Setter Property="Margin" Value="0,0,0,4" />
            </Style>

            <Style x:Key="ColorLabelStyle"
                   TargetType="TextBlock">
                <Setter Property="HorizontalAlignment" Value="Left" />
                <Setter Property="VerticalAlignment" Value="Center" />
            </Style>

            <Style x:Key="ColorTableGridStyle"
                   TargetType="Grid">
                <Setter Property="RowSpacing" Value="10" />
                <Setter Property="ColumnSpacing" Value="10" />
            </Style>

            <Style x:Key="ColorControlStyle"
                   TargetType="ContentControl">
                <Setter Property="IsTabStop" Value="False" />
            </Style>

            <Style x:Key="ColorButtonStyle"
                   BasedOn="{StaticResource BaseButtonStyle}"
                   TargetType="Button">
                <Setter Property="BorderBrush" Value="{StaticResource SystemBaseLowColor}" />
                <Setter Property="Height" Value="30" />
                <Setter Property="Width" Value="100" />
            </Style>

            <Style TargetType="ColorPicker">
                <Setter Property="IsColorSliderVisible" Value="False" />
                <Setter Property="IsColorChannelTextInputVisible" Value="False" />
                <Setter Property="IsHexInputVisible" Value="True" />
                <Setter Property="IsAlphaSliderVisible" Value="True" />
                <Setter Property="IsAlphaTextInputVisible" Value="True" />
            </Style>

            <DataTemplate x:Key="ColorTableEntryTemplate"
                          x:DataType="local:ColorTableEntry">
                <Button AutomationProperties.Name="{x:Bind Name}"
                        Background="{x:Bind local:Converters.ColorToBrush(Color), Mode=OneWay}"
                        Style="{StaticResource ColorButtonStyle}"
                        ToolTipService.ToolTip="{x:Bind Name}">
                    <Button.Resources>
                        <!--  Resources to colorize hover/pressed states based on the color of the button  -->
                        <ResourceDictionary>
                            <ResourceDictionary.ThemeDictionaries>
                                <ResourceDictionary x:Key="Light">
                                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
                                                     Color="{x:Bind local:Converters.LightenColor(Color), Mode=OneWay}" />
                                </ResourceDictionary>
                                <ResourceDictionary x:Key="Dark">
                                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
                                                     Color="{x:Bind local:Converters.LightenColor(Color), Mode=OneWay}" />
                                </ResourceDictionary>
                                <!--  No High contrast dictionary, let's just leave that unchanged.  -->
                            </ResourceDictionary.ThemeDictionaries>
                        </ResourceDictionary>
                    </Button.Resources>

                    <Button.Flyout>
                        <Flyout>
                            <muxc:ColorPicker ColorChanged="ColorPickerChanged"
                                              Tag="{x:Bind Tag, Mode=OneWay}"
                                              Color="{x:Bind Color, Mode=OneWay}" />
                        </Flyout>
                    </Button.Flyout>
                </Button>
            </DataTemplate>

        </ResourceDictionary>
    </Page.Resources>

    <ScrollViewer ViewChanging="ViewChanging">
        <StackPanel Margin="{StaticResource StandardIndentMargin}"
                    Spacing="24">

            <!--  Select Color and Add New Button  -->
            <StackPanel Orientation="Horizontal">

                <StackPanel Orientation="Horizontal"
                            Visibility="{x:Bind local:Converters.InvertedBooleanToVisibility(IsRenaming), Mode=OneWay}">
                    <!--  Select a color scheme  -->
                    <ComboBox x:Name="ColorSchemeComboBox"
                              ItemsSource="{x:Bind ColorSchemeList, Mode=OneWay}"
                              SelectedIndex="0"
                              SelectionChanged="ColorSchemeSelectionChanged"
                              Style="{StaticResource ComboBoxSettingStyle}">
                        <ComboBox.ItemTemplate>
                            <DataTemplate x:DataType="model:ColorScheme">
                                <TextBlock Text="{x:Bind Name, Mode=OneWay}" />
                            </DataTemplate>
                        </ComboBox.ItemTemplate>
                    </ComboBox>

                    <!--  Rename Button  -->
                    <!--  Bind IsEnabled to prevent a the color scheme from returning from the dead  -->
                    <Button x:Name="RenameButton"
                            x:Uid="Rename"
                            Click="Rename_Click"
                            IsEnabled="{x:Bind CanDeleteCurrentScheme, Mode=OneWay}"
                            Style="{StaticResource SmallButtonStyle}">
                        <StackPanel Orientation="Horizontal">
                            <FontIcon FontSize="{StaticResource StandardIconSize}"
                                      Glyph="&#xE8AC;" />
                        </StackPanel>
                    </Button>
                </StackPanel>

                <StackPanel Orientation="Horizontal"
                            Visibility="{x:Bind IsRenaming, Mode=OneWay}">

                    <!--  Shown when color scheme name is already in use  -->
                    <muxc:TeachingTip x:Name="RenameErrorTip"
                                      x:Uid="ColorScheme_RenameErrorTip" />

                    <!--  Name text box  -->
                    <TextBox x:Name="NameBox"
                             PreviewKeyDown="NameBox_PreviewKeyDown"
                             Style="{StaticResource TextBoxSettingStyle}" />

                    <!--  Accept rename button  -->
                    <Button x:Name="RenameAcceptButton"
                            x:Uid="RenameAccept"
                            Click="RenameAccept_Click"
                            Style="{StaticResource AccentSmallButtonStyle}">
                        <StackPanel Orientation="Horizontal">
                            <FontIcon FontSize="{StaticResource StandardIconSize}"
                                      Glyph="&#xE8FB;" />
                        </StackPanel>
                    </Button>
                    <!--  Cancel rename button  -->
                    <Button x:Name="RenameCancelButton"
                            x:Uid="RenameCancel"
                            Click="RenameCancel_Click"
                            Style="{StaticResource SmallButtonStyle}">
                        <StackPanel Orientation="Horizontal">
                            <FontIcon FontSize="{StaticResource StandardIconSize}"
                                      Glyph="&#xE711;" />
                        </StackPanel>
                    </Button>
                </StackPanel>

                <!--  Add new button  -->
                <Button x:Name="AddNewButton"
                        Click="AddNew_Click"
                        Style="{StaticResource BrowseButtonStyle}">
                    <StackPanel Orientation="Horizontal">
                        <FontIcon FontSize="{StaticResource StandardIconSize}"
                                  Glyph="&#xE710;" />
                        <TextBlock x:Uid="ColorScheme_AddNewButton"
                                   Style="{StaticResource IconButtonTextBlockStyle}" />
                    </StackPanel>
                </Button>
            </StackPanel>

            <!--  Terminal Colors (Left Column)  -->
            <StackPanel x:Name="ColorPanel"
                        Spacing="48">
                <StackPanel>
                    <TextBlock x:Uid="ColorScheme_TerminalColorsHeader"
                               Style="{StaticResource GroupHeaderStyle}" />
                    <Grid x:Name="ColorTableGrid"
                          Style="{StaticResource ColorTableGridStyle}">
                        <Grid.ColumnDefinitions>
                            <!--  Labels  -->
                            <ColumnDefinition Width="Auto" />

                            <!--  Regular Colors  -->
                            <ColumnDefinition Width="Auto" />

                            <!--  Bright Colors  -->
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                    </Grid>
                </StackPanel>

                <!--  System Colors (Right Column)  -->
                <StackPanel>
                    <TextBlock x:Uid="ColorScheme_SystemColorsHeader"
                               Style="{StaticResource GroupHeaderStyle}" />
                    <Grid Style="{StaticResource ColorTableGridStyle}">

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>

                        <!--  Foreground  -->
                        <TextBlock x:Uid="ColorScheme_Foreground"
                                   Grid.Row="0"
                                   Grid.Column="0"
                                   Style="{StaticResource ColorLabelStyle}" />
                        <ContentControl x:Name="ForegroundButton"
                                        Grid.Row="0"
                                        Grid.Column="1"
                                        Content="{x:Bind CurrentForegroundColor, Mode=TwoWay}"
                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                        Style="{StaticResource ColorControlStyle}" />

                        <!--  Background  -->
                        <TextBlock x:Uid="ColorScheme_Background"
                                   Grid.Row="1"
                                   Grid.Column="0"
                                   Style="{StaticResource ColorLabelStyle}" />
                        <ContentControl x:Name="BackgroundButton"
                                        Grid.Row="1"
                                        Grid.Column="1"
                                        Content="{x:Bind CurrentBackgroundColor, Mode=TwoWay}"
                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                        Style="{StaticResource ColorControlStyle}" />

                        <!--  Cursor Color  -->
                        <TextBlock x:Uid="ColorScheme_CursorColor"
                                   Grid.Row="2"
                                   Grid.Column="0"
                                   Style="{StaticResource ColorLabelStyle}" />
                        <ContentControl x:Name="CursorColorButton"
                                        Grid.Row="2"
                                        Grid.Column="1"
                                        Content="{x:Bind CurrentCursorColor, Mode=TwoWay}"
                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                        Style="{StaticResource ColorControlStyle}" />

                        <!--  Selection Background  -->
                        <TextBlock x:Uid="ColorScheme_SelectionBackground"
                                   Grid.Row="3"
                                   Grid.Column="0"
                                   Style="{StaticResource ColorLabelStyle}" />
                        <ContentControl x:Name="SelectionBackgroundButton"
                                        Grid.Row="3"
                                        Grid.Column="1"
                                        Content="{x:Bind CurrentSelectionBackgroundColor, Mode=TwoWay}"
                                        ContentTemplate="{StaticResource ColorTableEntryTemplate}"
                                        Style="{StaticResource ColorControlStyle}" />
                    </Grid>
                </StackPanel>
            </StackPanel>

            <!--  Delete Button  -->
            <StackPanel Style="{StaticResource PivotStackStyle}">
                <Button x:Name="DeleteButton"
                        IsEnabled="{x:Bind CanDeleteCurrentScheme, Mode=OneWay}"
                        Style="{StaticResource DeleteButtonStyle}">
                    <Button.Resources>
                        <ResourceDictionary>
                            <ResourceDictionary.ThemeDictionaries>
                                <ResourceDictionary x:Key="Light">
                                    <SolidColorBrush x:Key="ButtonBackground"
                                                     Color="Firebrick" />
                                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
                                                     Color="#C23232" />
                                    <SolidColorBrush x:Key="ButtonBackgroundPressed"
                                                     Color="#A21212" />
                                    <SolidColorBrush x:Key="ButtonForeground"
                                                     Color="White" />
                                    <SolidColorBrush x:Key="ButtonForegroundPointerOver"
                                                     Color="White" />
                                    <SolidColorBrush x:Key="ButtonForegroundPressed"
                                                     Color="White" />
                                </ResourceDictionary>
                                <ResourceDictionary x:Key="Dark">
                                    <SolidColorBrush x:Key="ButtonBackground"
                                                     Color="Firebrick" />
                                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
                                                     Color="#C23232" />
                                    <SolidColorBrush x:Key="ButtonBackgroundPressed"
                                                     Color="#A21212" />
                                    <SolidColorBrush x:Key="ButtonForeground"
                                                     Color="White" />
                                    <SolidColorBrush x:Key="ButtonForegroundPointerOver"
                                                     Color="White" />
                                    <SolidColorBrush x:Key="ButtonForegroundPressed"
                                                     Color="White" />
                                </ResourceDictionary>
                                <ResourceDictionary x:Key="HighContrast">
                                    <SolidColorBrush x:Key="ButtonBackground"
                                                     Color="{ThemeResource SystemColorButtonFaceColor}" />
                                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
                                                     Color="{ThemeResource SystemColorHighlightColor}" />
                                    <SolidColorBrush x:Key="ButtonBackgroundPressed"
                                                     Color="{ThemeResource SystemColorHighlightColor}" />
                                    <SolidColorBrush x:Key="ButtonForeground"
                                                     Color="{ThemeResource SystemColorButtonTextColor}" />
                                    <SolidColorBrush x:Key="ButtonForegroundPointerOver"
                                                     Color="{ThemeResource SystemColorHighlightTextColor}" />
                                    <SolidColorBrush x:Key="ButtonForegroundPressed"
                                                     Color="{ThemeResource SystemColorHighlightTextColor}" />
                                </ResourceDictionary>
                            </ResourceDictionary.ThemeDictionaries>
                        </ResourceDictionary>
                    </Button.Resources>
                    <Button.Content>
                        <StackPanel Orientation="Horizontal">
                            <FontIcon Glyph="&#xE74D;" />
                            <TextBlock x:Uid="ColorScheme_DeleteButton"
                                       Style="{StaticResource IconButtonTextBlockStyle}" />
                        </StackPanel>
                    </Button.Content>
                    <Button.Flyout>
                        <Flyout>
                            <StackPanel>
                                <TextBlock x:Uid="ColorScheme_DeleteConfirmationMessage"
                                           Style="{StaticResource CustomFlyoutTextStyle}" />
                                <Button x:Uid="ColorScheme_DeleteConfirmationButton"
                                        Click="DeleteConfirmation_Click" />
                            </StackPanel>
                        </Flyout>
                    </Button.Flyout>
                </Button>
                <TextBlock x:Name="DeleteButtonDisclaimer"
                           VerticalAlignment="Center"
                           Style="{StaticResource DisclaimerStyle}" />
            </StackPanel>
        </StackPanel>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <!--
                            Official guidance states that 640 is the breakpoint between small and medium devices.
                            Since MinWindowWidth is an inclusive range, we need to add 1 to it.
                        -->
                        <AdaptiveTrigger MinWindowWidth="641" />
                    </VisualState.StateTriggers>

                    <VisualState.Setters>
                        <Setter Target="ColorPanel.Orientation" Value="Horizontal" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </ScrollViewer>
</Page>
