<UserControl
    x:Class="Clippy.Controls.APIBox"
    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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:Icons="using:CubeKit.UI.Icons" 
    xmlns:toolkit="using:CommunityToolkit.WinUI.UI.Controls"
    xmlns:ani="using:CommunityToolkit.WinUI.UI.Animations" 
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity" 
    xmlns:interactions="using:Microsoft.Xaml.Interactions.Core" 
    xmlns:behaviors="using:CommunityToolkit.WinUI.UI.Behaviors"
    mc:Ignorable="d">
    <UserControl.Resources>
        <LinearGradientBrush x:Name="AccentLinearGradientBrush" x:Key="AccentLinearGradientBrush" StartPoint="0,0" EndPoint="1,0">
            <GradientStop Color="{ThemeResource SystemAccentColorLight1}" Offset="0.0" />
            <GradientStop Color="{ThemeResource SystemAccentColorLight2}" Offset="0.5" />
            <GradientStop Color="{ThemeResource SystemAccentColorLight3}" Offset="1.0" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Name="RedLinearGradientBrush" StartPoint="0,0" EndPoint="1,0">
            <GradientStop Color="DarkRed" Offset="0.0" />
            <GradientStop Color="Red" Offset="0.5" />
            <GradientStop Color="#e96e60" Offset="1.0" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Name="GreenLinearGradientBrush" StartPoint="0,0" EndPoint="1,0">
            <GradientStop Color="DarkGreen" Offset="0.0" />
            <GradientStop Color="Green" Offset="0.5" />
            <GradientStop Color="LightGreen" Offset="1.0" />
        </LinearGradientBrush>
        <Style x:Key="KeyGlowPasswordBoxStyle" TargetType="PasswordBox">
            <Setter Property="Foreground" Value="{ThemeResource AccentLinearGradientBrush}" />
            <Setter Property="Background" Value="{ThemeResource SortHvidBrush}" />
            <Setter Property="BorderBrush" Value="{ThemeResource TextControlBorderBrush}" />
            <Setter Property="BorderBrush" Value="{ThemeResource TextControlBorderBrush}" />
            <Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" />
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
            <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
            <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
            <Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}" />
            <Setter Property="ContextFlyout" Value="{StaticResource TextControlCommandBarContextFlyout}" />
            <Setter Property="SelectionFlyout" Value="{StaticResource TextControlCommandBarSelectionFlyout}" />
            <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="PasswordBox">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">

                                    <VisualState x:Name="Disabled">

                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlHeaderForegroundDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderThickness">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Normal">
                                        <VisualState.Setters>
                                            <Setter Target="Shadow.ShadowOpacity" Value="0"/>
                                        </VisualState.Setters>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderThickness">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForeground}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                    <VisualState x:Name="PointerOver">

                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderThickness">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SortHvidBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Focused">
                                        <VisualState.Setters>
                                            <Setter Target="Shadow.ShadowOpacity" Value="0.43"/>
                                        </VisualState.Setters>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="BottomBar" Duration="0:0:0.15" Storyboard.TargetProperty="ScaleX" EnableDependentAnimation="True" To="1"/>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundFocused}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderThickness">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SortHvidBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushFocused}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundFocused}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <VisualState.Setters>
                                            <Setter Target="Shadow.ShadowOpacity" Value="0.43"/>
                                        </VisualState.Setters>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderThickness">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation Storyboard.TargetName="BottomBar" Duration="0:0:5" Storyboard.TargetProperty="ScaleX" EnableDependentAnimation="True" To="1"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ButtonStates">
                                    <VisualState x:Name="ButtonVisible">

                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RevealButton" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="ButtonCollapsed" />

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

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

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

                            <ContentPresenter x:Name="HeaderContentPresenter"
                            Grid.Row="0"
                            Grid.Column="0"
                            Grid.ColumnSpan="2"
                            Content="{TemplateBinding Header}"
                            ContentTemplate="{TemplateBinding HeaderTemplate}"
                            FontWeight="Normal"
                            Foreground="{ThemeResource TextControlHeaderForeground}"
                            Margin="{ThemeResource PasswordBoxTopHeaderMargin}"
                            TextWrapping="Wrap"
                            VerticalAlignment="Top"
                            Visibility="Collapsed"
                            x:DeferLoadStrategy="Lazy" />
                            <Border x:Name="BorderElement"
                            Grid.Row="1"
                            Grid.Column="0"
                            Grid.RowSpan="1"
                            Grid.ColumnSpan="2"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{TemplateBinding CornerRadius}"
                            MinWidth="{ThemeResource TextControlThemeMinWidth}"
                            MinHeight="{ThemeResource TextControlThemeMinHeight}"/>
                            <toolkit:DropShadowPanel x:Name="Shadow" BlurRadius="16.0" ShadowOpacity="0.43" IsMasked="True" Grid.Row="1"
                          OffsetX="0.0" OffsetY="0.0" VerticalAlignment="Bottom" Color="{ThemeResource SystemAccentColorLight2}">
                                <Grid VerticalAlignment="Bottom" Margin="0, 0, 0, 0"  Width="{TemplateBinding Width}"
                            Height="2" CornerRadius="0, 0, 4, 4" Background="{TemplateBinding Foreground}">
                                    <Grid.RenderTransform>
                                        <ScaleTransform x:Name="BottomBar" ScaleX="0"/>
                                    </Grid.RenderTransform>
                                </Grid>
                            </toolkit:DropShadowPanel>
                            <ScrollViewer x:Name="ContentElement"
                            Grid.Row="1"
                            Grid.Column="0"
                            HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                            HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                            VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                            VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                            IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                            IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                            Margin="{TemplateBinding BorderThickness}"
                            Padding="{TemplateBinding Padding}"
                            IsTabStop="False"
                            ZoomMode="Disabled"
                            AutomationProperties.AccessibilityView="Raw" />
                            <TextBlock x:Name="PlaceholderTextContentPresenter"
                            Grid.Row="1"
                            Grid.Column="0"
                            Grid.ColumnSpan="2"
                            Foreground="{ThemeResource TextControlPlaceholderForeground}"
                            Margin="{TemplateBinding BorderThickness}"
                            Padding="{TemplateBinding Padding}"
                            Text="{TemplateBinding PlaceholderText}"
                            IsHitTestVisible="False" />
                            <ToggleButton x:Name="RevealButton"
                            Grid.Row="1"
                            Grid.Column="0"
                            Canvas.ZIndex="3"
                            HorizontalAlignment="Right"
                            Style="{StaticResource ToolbarToggleButton}"
                            CornerRadius="{TemplateBinding CornerRadius}"
                            Padding="{ThemeResource HelperButtonThemePadding}"
                            Visibility="Collapsed"
                            FontSize="{TemplateBinding FontSize}"
                            VerticalAlignment="Top"
                            Width="30" Height="28">
                                <Icons:FluentSymbolIcon Symbol="EyeShow16" Margin="0, 0, 2, 0"/>
                            </ToggleButton>
                            <ContentPresenter x:Name="DescriptionPresenter"
                            Grid.Row="2"
                            Grid.Column="0"
                            Grid.ColumnSpan="2"
                            Content="{TemplateBinding Description}"
                            Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}"
                            AutomationProperties.AccessibilityView="Raw"
                            x:Load="False"/>

                        </Grid>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <StackPanel Padding="12">
        <StackPanel Orientation="Horizontal" Spacing="12">
            <toolkit:DropShadowPanel ShadowOpacity="0.4" OffsetX="4" CornerRadius="8" Margin="0, 12, 0, 16" OffsetY="4">
                <PasswordBox x:Name="KeyBox" Width="340" PasswordRevealMode="{x:Bind PrivacyToPassword(PasswordVisbility.IsChecked), Mode=OneWay}" PlaceholderText="Enter your OpenAI Api key here..." KeyDown="ApiBox_KeyDown" Style="{ThemeResource KeyGlowPasswordBoxStyle}" Foreground="{ThemeResource AccentLinearGradientBrush}">
                    <ani:Explicit.Animations>
                        <ani:AnimationSet x:Name="KeyLoadAnimation" IsSequential="True">
                            <ani:OffsetAnimation From="0" To="8,0,0" Duration="0:0:0.0625"/>
                            <ani:OffsetAnimation From="8,0,0" To="-8,0,0" Duration="0:0:0.125"/>
                            <ani:OffsetAnimation From="-8,0,0" To="6,0,0" Duration="0:0:0.109375"/>
                            <ani:OffsetAnimation From="6,0,0" To="-6,0,0" Duration="0:0:0.09375"/>
                            <ani:OffsetAnimation From="-6,0,0" To="2,0,0" Duration="0:0:0.0625"/>
                            <ani:OffsetAnimation From="-2,0,0" To="0,0,0" Duration="0:0:0.015625"/>
                        </ani:AnimationSet>
                    </ani:Explicit.Animations>
                </PasswordBox>
            </toolkit:DropShadowPanel>
            <ToggleButton x:Name="PasswordVisbility" Style="{ThemeResource ToolbarToggleButton}" IsChecked="False" Height="32">
                <Icons:FluentSymbolIcon Symbol="{x:Bind PrivacyToIcon(PasswordVisbility.IsChecked), Mode=OneWay}" Foreground="{ThemeResource HvidSortBrush}"/>
            </ToggleButton>
            <Button Click="Submit_Click" Style="{ThemeResource ToolbarButton}" Height="32">
                <Icons:FluentSymbolIcon Symbol="Save20"/>
            </Button>
            <Button Click="Delete_Click" Style="{ThemeResource ToolbarButton}" Height="32">
                <Icons:FluentSymbolIcon Symbol="Delete20" Margin="0, 0, 1, 0"/>
            </Button>
            <ProgressRing x:Name="Ring" Visibility="Collapsed" IsIndeterminate="True" IsActive="True" Height="28" Width="28"/>
        </StackPanel>
        <TextBlock x:Name="ErrorBlock" MaxWidth="500" TextWrapping="Wrap" Foreground="#e96e60"/>
    </StackPanel>
</UserControl>