<?xml version="1.0" encoding="utf-8" ?>
<local:ChatPresetControlBase
    x:Class="RodelAgent.UI.Controls.Chat.PresetModelPanel"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:base="using:RodelAgent.UI.Controls.Base"
    xmlns:community="using:CommunityToolkit.WinUI.Controls"
    xmlns:controls="using:RodelAgent.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:ext="using:RodelAgent.UI.Extensions"
    xmlns:ic="using:FluentIcons.WinUI"
    xmlns:itemcontrol="using:RodelAgent.UI.Controls.Items"
    xmlns:items="using:RodelAgent.UI.ViewModels.Items"
    xmlns:local="using:RodelAgent.UI.Controls.Chat"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid ColumnSpacing="20">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid RowSpacing="8">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <TextBlock
                    Margin="0,0,8,0"
                    VerticalAlignment="Center"
                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                    Style="{StaticResource CaptionTextBlockStyle}"
                    Text="{ext:Locale Name=Avatar}" />
                <HyperlinkButton
                    x:Name="EmojiAvatarButton"
                    Grid.Column="1"
                    Margin="0,0,8,0"
                    VerticalAlignment="Center"
                    Click="OnEmojiAvatarButtonClick"
                    Content="{ext:Locale Name=EmojiAvatar}"
                    FontSize="12">
                    <FlyoutBase.AttachedFlyout>
                        <Flyout x:Name="EmojiFlyout" Placement="Bottom">
                            <Flyout.FlyoutPresenterStyle>
                                <Style BasedOn="{StaticResource DefaultFlyoutPresenterStyle}" TargetType="FlyoutPresenter">
                                    <Setter Property="Padding" Value="12" />
                                </Style>
                            </Flyout.FlyoutPresenterStyle>
                            <base:EmojiPanel EmojiClick="OnEmojiClick" />
                        </Flyout>
                    </FlyoutBase.AttachedFlyout>
                </HyperlinkButton>
                <HyperlinkButton
                    x:Name="ReplaceImageButton"
                    Grid.Column="2"
                    VerticalAlignment="Center"
                    Click="OnReplaceImageButtonClickAsync"
                    Content="{ext:Locale Name=ReplaceImage}"
                    FontSize="12"
                    Visibility="Collapsed" />
            </Grid>
            <Grid
                x:Name="EmojiContainer"
                Grid.Row="1"
                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                BorderThickness="2"
                CornerRadius="{StaticResource ControlCornerRadius}"
                Visibility="Collapsed">
                <TextBlock
                    x:Name="EmojiBlock"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    FontFamily="Segoe UI Emoji"
                    FontSize="98" />
            </Grid>
            <Grid
                x:Name="ImagePlaceholderContainer"
                Grid.Row="1"
                AllowDrop="True"
                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                BorderThickness="2"
                CornerRadius="{StaticResource ControlCornerRadius}"
                DragOver="OnImageAreaDragOver"
                Drop="OnImageAreaDropAsync"
                Tapped="OnImageAreaTappedAsync">
                <StackPanel
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Spacing="16">
                    <ic:SymbolIcon
                        HorizontalAlignment="Center"
                        FontSize="48"
                        Foreground="{ThemeResource TextFillColorDisabledBrush}"
                        Symbol="ImageSparkle" />
                    <TextBlock
                        MaxWidth="210"
                        HorizontalAlignment="Center"
                        Foreground="{ThemeResource TextFillColorDisabledBrush}"
                        LineHeight="20"
                        Style="{StaticResource CaptionTextBlockStyle}"
                        Text="{ext:Locale Name=DropPresetImageTip}"
                        TextAlignment="Center"
                        TextWrapping="Wrap" />
                </StackPanel>
            </Grid>
            <community:ImageCropper
                x:Name="Cropper"
                Grid.Row="1"
                AspectRatio="1"
                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                BorderThickness="2"
                CornerRadius="{StaticResource ControlCornerRadius}"
                CropShape="Circular"
                Visibility="Collapsed" />
        </Grid>
        <Border
            Grid.Column="1"
            Width="1"
            Height="120"
            VerticalAlignment="Center"
            Background="{ThemeResource DividerStrokeColorDefaultBrush}" />
        <Grid Grid.Column="2">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition />
            </Grid.RowDefinitions>
            <ComboBox
                Margin="0,0,0,12"
                HorizontalAlignment="Stretch"
                Header="{ext:Locale Name=Services}"
                ItemsSource="{x:Bind ViewModel.AvailableServices}"
                SelectedItem="{x:Bind ViewModel.SelectedService, Mode=TwoWay}">
                <ComboBox.ItemTemplate>
                    <DataTemplate x:DataType="items:ChatServiceItemViewModel">
                        <itemcontrol:ChatServiceItemControl Style="{StaticResource SelectionServiceStyle}" ViewModel="{x:Bind}" />
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>
            <ComboBox
                Grid.Row="1"
                Margin="0,0,0,12"
                HorizontalAlignment="Stretch"
                Header="{ext:Locale Name=Model}"
                ItemsSource="{x:Bind ViewModel.Models}"
                SelectedItem="{x:Bind ViewModel.SelectedModel, Mode=TwoWay}"
                Visibility="{x:Bind ViewModel.IsModelsEmpty, Mode=OneWay, Converter={StaticResource BoolToVisibilityReverseConverter}}">
                <ComboBox.ItemTemplate>
                    <DataTemplate x:DataType="items:ChatModelItemViewModel">
                        <itemcontrol:ChatModelCard Style="{StaticResource SelectionChatModelCardStyle}" ViewModel="{x:Bind}" />
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>
            <TextBox
                x:Name="NameBox"
                Grid.Row="2"
                Margin="0,0,0,12"
                HorizontalAlignment="Stretch"
                AutomationProperties.Name="{ext:Locale Name=PresetName}"
                Header="{ext:Locale Name=PresetName}"
                HeaderTemplate="{StaticResource InputHeaderTemplate}"
                PlaceholderText="{ext:Locale Name=PresetNamePlaceholder}"
                Text="{x:Bind ViewModel.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
            <TextBox
                x:Name="SystemInstructionBox"
                Grid.Row="3"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                AcceptsReturn="True"
                Header="{ext:Locale Name=SystemInstruction}"
                HeaderTemplate="{StaticResource InputHeaderTemplate}"
                PlaceholderText="{ext:Locale Name=SystemInstructionPlaceholder}"
                Text="{x:Bind ViewModel.Instruction, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                TextWrapping="Wrap" />
        </Grid>
    </Grid>
</local:ChatPresetControlBase>
