<ui:Page xmlns:props="clr-namespace:Ink_Canvas.Properties" x:Class="Ink_Canvas.Windows.SettingsViews.Pages.CanvasPage"
      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:Ink_Canvas.Windows.SettingsViews.Pages"
      xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
      xmlns:ikw="http://schemas.inkore.net/lib/ui/wpf"
      xmlns:sys="clr-namespace:System;assembly=mscorlib"
      xmlns:controls="clr-namespace:Ink_Canvas.Controls;assembly=InkCanvas.Controls"
      xmlns:c="clr-namespace:Ink_Canvas.Converter"
      xmlns:helpers="clr-namespace:Ink_Canvas.Windows.SettingsViews.Helpers"
      mc:Ignorable="d"
      Title="{x:Static props:CanvasStrings.Canvas_GroupTitle}">
    <ScrollViewer PanningMode="VerticalFirst">
        <Grid Margin="59,0,59,0">
            <FrameworkElement.Resources>
                <sys:Double x:Key="SettingsCardSpacing">4</sys:Double>
                <c:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
                <Style x:Key="SettingsSectionHeaderTextBlockStyle"
                       BasedOn="{StaticResource BodyStrongTextBlockStyle}"
                       TargetType="TextBlock">
                    <Style.Setters>
                        <Setter Property="Margin" Value="1,30,0,6" />
                    </Style.Setters>
                </Style>
            </FrameworkElement.Resources>
            <Grid>
                <ikw:SimpleStackPanel MaxWidth="1000" HorizontalAlignment="Stretch"
                    Spacing="{StaticResource SettingsCardSpacing}">

                    <TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}"
                        Text="{x:Static props:CanvasStrings.Canvas_GroupTitle}" />

                    <!-- 画笔光标：开关 + 展开后选择系统/内置/自定义光标 -->
                    <ui:SettingsExpander x:Name="ExpanderShowPenCursor"
                            Header="{x:Static props:CanvasStrings.Canvas_ShowPenCursor}"
                            Description="{x:Static props:CanvasStrings.Canvas_PenCursorTypeHint}"
                            IsExpanded="{Binding IsOn, ElementName=ToggleSwitchShowCursor, Mode=OneWay}"
                            d:Visibility="Visible" d:IsExpanded="True">
                        <ui:SettingsExpander.HeaderIcon>
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.PointerHand}" />
                        </ui:SettingsExpander.HeaderIcon>
                        <ui:ToggleSwitch x:Name="ToggleSwitchShowCursor"
                                helpers:SettingsBinder.PropertyPath="Canvas.IsShowCursor"
                                helpers:SettingsBinder.SettingsChanged="OnIsShowCursorChanged" />
                        <ui:SettingsExpander.Items>
                            <ui:SettingsCard Header="{x:Static props:CanvasStrings.Canvas_PenCursorType}">
                                <ComboBox x:Name="ComboBoxPenCursorType" SelectedIndex="1"
                                          helpers:SettingsBinder.PropertyPath="Canvas.PenCursorType"
                                          helpers:SettingsBinder.SettingsChanged="OnPenCursorTypeChanged"
                                          SelectionChanged="ComboBoxPenCursorType_SelectionChanged">
                                    <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_PenCursorType_System}" />
                                    <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_PenCursorType_BuiltIn}" />
                                    <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_PenCursorType_Custom}" />
                                </ComboBox>
                            </ui:SettingsCard>
                            <ui:SettingsCard x:Name="CardCustomPenCursorPath"
                                    Header="{x:Static props:CanvasStrings.Canvas_CustomPenCursorPath}"
                                    Description="{x:Static props:CanvasStrings.Canvas_CustomPenCursorPathHint}"
                                    Visibility="Collapsed">
                                <ikw:SimpleStackPanel Orientation="Horizontal" Spacing="8">
                                    <TextBlock x:Name="CustomPenCursorPathText"
                                               VerticalAlignment="Center" MaxWidth="300"
                                               TextTrimming="CharacterEllipsis" />
                                    <Button Content="{x:Static props:CanvasStrings.Canvas_SelectCustomPenCursor}"
                                            Click="SelectCustomPenCursor_Click" />
                                </ikw:SimpleStackPanel>
                            </ui:SettingsCard>
                        </ui:SettingsExpander.Items>
                    </ui:SettingsExpander>

                    <!-- 互斥开关：需要 code-behind 处理联动逻辑 -->
                    <controls:LabeledSettingsCard x:Name="CardEnablePressureTouchMode"
                            Header="{x:Static props:CanvasStrings.Canvas_EnablePressureTouch}"
                            Description="{x:Static props:CanvasStrings.Canvas_EnablePressureTouchHint}"
                            Icon="{x:Static ui:SegoeFluentIcons.Touch}"
                            SwitchName="ToggleSwitchEnablePressureTouchMode"
                            Toggled="ToggleSwitchEnablePressureTouchMode_Toggled" />

                    <controls:LabeledSettingsCard x:Name="CardDisablePressure"
                            Header="{x:Static props:CanvasStrings.Canvas_IgnorePressure}"
                            Description="{x:Static props:CanvasStrings.Canvas_DisablePressureHint}"
                            Icon="{x:Static ui:SegoeFluentIcons.TouchPointer}"
                            SwitchName="ToggleSwitchDisablePressure"
                            Toggled="ToggleSwitchDisablePressure_Toggled" />

                    <controls:LabeledSettingsCard
                            Header="{x:Static props:CanvasStrings.Canvas_EnableNativeInkPrediction}"
                            Description="{x:Static props:CanvasStrings.Canvas_EnableNativeInkPredictionHint}"
                            Icon="{x:Static ui:SegoeFluentIcons.Edit}"
                            SwitchName="ToggleSwitchEnableNativeInkPrediction"
                            helpers:SettingsBinder.PropertyPath="Canvas.EnableNativeInkPrediction" />

                    <controls:LabeledSettingsCard x:Name="CardUseLegacyWetInk"
                            Header="{x:Static props:CanvasStrings.Canvas_UseLegacyWetInk}"
                            Description="{x:Static props:CanvasStrings.Canvas_UseLegacyWetInkHint}"
                            Icon="{x:Static ui:SegoeFluentIcons.InkingTool}"
                            SwitchName="ToggleSwitchUseLegacyWetInk"
                            Toggled="ToggleSwitchUseLegacyWetInk_Toggled" />

                    <!-- 简单下拉：声明式绑定 -->
                    <ui:SettingsCard Header="{x:Static props:CanvasStrings.Canvas_EraserSize}"
                            Description="{x:Static props:CanvasStrings.Canvas_EraserSizeHint}">
                        <ui:SettingsCard.HeaderIcon>
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.EraseTool}" />
                        </ui:SettingsCard.HeaderIcon>
                        <ComboBox x:Name="ComboBoxEraserSize"
                                  SelectedIndex="1"
                                  helpers:SettingsBinder.PropertyPath="Canvas.EraserSize"
                                  helpers:SettingsBinder.SettingsChanged="OnEraserSizeChanged">
                            <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_EraserSize_VerySmall}" />
                            <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_EraserSize_Small}" />
                            <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_EraserSize_Medium}" />
                            <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_EraserSize_Large}" />
                            <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_EraserSize_VeryLarge}" />
                        </ComboBox>
                    </ui:SettingsCard>

                    <!-- 简单开关：声明式绑定 -->
                    <controls:LabeledSettingsCard
                            Header="{x:Static props:CanvasStrings.Canvas_HideInkOnExit}"
                            Description="{x:Static props:CanvasStrings.Canvas_HideStrokeWhenSelectingHint}"
                            Icon="{x:Static ui:SegoeFluentIcons.Hide}"
                            SwitchName="ToggleSwitchHideStrokeWhenSelecting"
                            helpers:SettingsBinder.PropertyPath="Canvas.HideStrokeWhenSelecting" />

                    <controls:LabeledSettingsCard
                            Header="{x:Static props:CanvasStrings.Canvas_ClearInkAlsoClearHistory}"
                            Icon="{x:Static ui:SegoeFluentIcons.Delete}"
                            SwitchName="ToggleSwitchClearCanvasAndClearTimeMachine"
                            helpers:SettingsBinder.PropertyPath="Canvas.ClearCanvasAndClearTimeMachine" />

                    <controls:LabeledSettingsCard
                            Header="{x:Static props:CanvasStrings.Canvas_ClearCanvasAlsoClearImages}"
                            Icon="{x:Static ui:SegoeFluentIcons.Photo}"
                            SwitchName="ToggleSwitchClearCanvasAlsoClearImages"
                            helpers:SettingsBinder.PropertyPath="Canvas.ClearCanvasAlsoClearImages" />

                    <controls:LabeledSettingsCard
                            Header="{x:Static props:CanvasStrings.Canvas_CompressPicturesUploaded}"
                            Icon="{x:Static ui:SegoeFluentIcons.Clear}"
                            SwitchName="ToggleSwitchCompressPicturesUploaded"
                            helpers:SettingsBinder.PropertyPath="Canvas.IsCompressPicturesUploaded" />

                    <controls:LabeledSettingsCard
                            Header="{x:Static props:CanvasStrings.Canvas_LaunchSeewoVideoShowcaseForWhiteboardBooth}"
                            Description="{x:Static props:CanvasStrings.Canvas_LaunchSeewoVideoShowcaseForWhiteboardBoothHint}"
                            Icon="{x:Static ui:SegoeFluentIcons.Video}"
                            SwitchName="ToggleSwitchLaunchSeewoVideoShowcaseForWhiteboardBooth"
                            helpers:SettingsBinder.PropertyPath="Canvas.LaunchSeewoVideoShowcaseForWhiteboardBooth" />

                    <controls:LabeledSettingsCard
                            Header="{x:Static props:FloatingBarStrings.Canvas_EdgeExpandHint_Settings_Enable}"
                            Icon="{x:Static ui:SegoeFluentIcons.FullScreen}"
                            SwitchName="ToggleSwitchEdgeExpandHint"
                            helpers:SettingsBinder.PropertyPath="Canvas.IsEnableEdgeExpandHint" />

                    <!-- 简单下拉：声明式绑定 -->
                    <ui:SettingsCard Header="{x:Static props:CanvasStrings.Canvas_KeepAsymptote}"
                            Description="{x:Static props:CanvasStrings.Canvas_HyperbolaAsymptoteHint}">
                        <ui:SettingsCard.HeaderIcon>
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.AreaChart}" />
                        </ui:SettingsCard.HeaderIcon>
                        <ComboBox helpers:SettingsBinder.PropertyPath="Canvas.HyperbolaAsymptoteOption"
                                  SelectedIndex="0">
                            <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_Yes}" />
                            <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_No}" />
                            <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_AskEachTime}" />
                        </ComboBox>
                    </ui:SettingsCard>

                    <controls:LabeledSettingsCard
                            Header="{x:Static props:CanvasStrings.Canvas_MergeInkSmoothingWithUndo}"
                            Description="{x:Static props:CanvasStrings.Canvas_MergeInkSmoothingWithUndoHint}"
                            Icon="{x:Static ui:SegoeFluentIcons.Undo}"
                            SwitchName="ToggleSwitchMergeInkSmoothingWithUndo"
                            helpers:SettingsBinder.PropertyPath="Canvas.MergeInkSmoothingWithUndo" />

                    <controls:LabeledSettingsCard
                            Header="{x:Static props:CanvasStrings.Canvas_ShowCircleCenter}"
                            Icon="{x:Static ui:SegoeFluentIcons.CircleRing}"
                            SwitchName="ToggleSwitchShowCircleCenter"
                            helpers:SettingsBinder.PropertyPath="Canvas.ShowCircleCenter" />

                    <controls:LabeledSettingsCard
                            Header="{x:Static props:CanvasStrings.Canvas_ShowCoordinateUnitMarks}"
                            Description="{x:Static props:CanvasStrings.Canvas_ShowCoordinateUnitMarksHint}"
                            Icon="{x:Static ui:SegoeFluentIcons.Calculator}"
                            SwitchName="ToggleSwitchShowCoordinateUnitMarks"
                            helpers:SettingsBinder.PropertyPath="Canvas.ShowCoordinateUnitMarks" />

                    <!-- 复杂下拉：映射到两个设置属性，需要 code-behind -->
                    <ui:SettingsCard Header="{x:Static props:CanvasStrings.Canvas_CurveSmoothingMode}">
                        <ui:SettingsCard.HeaderIcon>
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.InkingTool}" />
                        </ui:SettingsCard.HeaderIcon>
                        <ComboBox x:Name="ComboBoxCurveSmoothingMode"
                                  SelectedIndex="2"
                                  SelectionChanged="ComboBoxCurveSmoothingMode_SelectionChanged">
                            <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_CurveSmoothing_Off}" Tag="0" />
                            <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_WPFBezier}" Tag="1" />
                            <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_AdvancedSmoothing}" Tag="2" />
                        </ComboBox>
                    </ui:SettingsCard>

                    <!-- Expander + ToggleSwitch：ToggleSwitch 用声明式，Expander.IsExpanded 由 XAML Binding 驱动 -->
                    <ui:SettingsExpander x:Name="ExpanderBrushAutoRestore"
                            Header="{x:Static props:CanvasStrings.Canvas_BrushAutoRestore}"
                            Description="{x:Static props:CanvasStrings.Canvas_BrushAutoRestoreHint}"
                            IsExpanded="{Binding IsOn, ElementName=ToggleSwitchBrushAutoRestore, Mode=OneWay}"
                            d:Visibility="Visible" d:IsExpanded="True">
                        <ui:SettingsExpander.HeaderIcon>
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Refresh}" />
                        </ui:SettingsExpander.HeaderIcon>
                        <ui:ToggleSwitch x:Name="ToggleSwitchBrushAutoRestore"
                                helpers:SettingsBinder.PropertyPath="Canvas.EnableBrushAutoRestore" />
                        <ui:SettingsExpander.Items>
                            <!-- TextBox：暂不支持声明式，保留 code-behind -->
                            <ui:SettingsCard Header="{x:Static props:CanvasStrings.Canvas_AutoRestoreTimePoints}">
                                <TextBox x:Name="BrushAutoRestoreTimesTextBox" Width="260"
                                         TextChanged="BrushAutoRestoreTimesTextBox_TextChanged" />
                            </ui:SettingsCard>
                            <!-- ComboBox by Tag：暂不支持声明式，保留 code-behind -->
                            <ui:SettingsCard Header="{x:Static props:CanvasStrings.Canvas_RestoreColor}">
                                <ComboBox x:Name="ComboBoxBrushAutoRestoreColor"
                                          SelectionChanged="ComboBoxBrushAutoRestoreColor_SelectionChanged">
                                    <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_Color_Default}" Tag="#FFFF0000" />
                                    <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_Color_Black}" Tag="#FF000000" />
                                    <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_Color_White}" Tag="#FFFFFFFF" />
                                    <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_Color_Red}" Tag="#FFFF0000" />
                                    <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_Color_Yellow}" Tag="#FFFFFF00" />
                                    <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_Color_Blue}" Tag="#FF2563EB" />
                                    <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_Color_Green}" Tag="#FF16A34A" />
                                    <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_Color_Orange}" Tag="#FFFB9650" />
                                    <ComboBoxItem Content="{x:Static props:CanvasStrings.Canvas_Color_Purple}" Tag="#FF9333EA" />
                                </ComboBox>
                            </ui:SettingsCard>
                            <!-- Slider：声明式绑定 -->
                            <ui:SettingsCard Header="{x:Static props:CanvasStrings.Canvas_RestoreWidth}">
                                <ikw:SimpleStackPanel Orientation="Horizontal" Spacing="8">
                                    <TextBlock x:Name="BrushAutoRestoreWidthText"
                                               VerticalAlignment="Center" FontFamily="Consolas" TextAlignment="Right"/>
                                    <Slider x:Name="BrushAutoRestoreWidthSlider" Width="200" Minimum="1" Maximum="20"
                                            TickFrequency="1" IsSnapToTickEnabled="True" Value="5"
                                            helpers:SettingsBinder.PropertyPath="Canvas.BrushAutoRestoreWidth"
                                            helpers:SettingsBinder.ValueRounding="2"
                                            helpers:SettingsBinder.FormatString="{}{0:F2}"
                                            helpers:SettingsBinder.TargetTextBlock="{Binding ElementName=BrushAutoRestoreWidthText}" />
                                </ikw:SimpleStackPanel>
                            </ui:SettingsCard>
                            <ui:SettingsCard Header="{x:Static props:CanvasStrings.Canvas_RestoreOpacity}">
                                <ikw:SimpleStackPanel Orientation="Horizontal" Spacing="8">
                                    <TextBlock x:Name="BrushAutoRestoreAlphaText"
                                               VerticalAlignment="Center" FontFamily="Consolas" TextAlignment="Right"/>
                                    <Slider x:Name="BrushAutoRestoreAlphaSlider" Width="200" Minimum="0" Maximum="255"
                                            TickFrequency="5" IsSnapToTickEnabled="True"
                                            helpers:SettingsBinder.PropertyPath="Canvas.BrushAutoRestoreAlpha"
                                            helpers:SettingsBinder.ValueRounding="0"
                                            helpers:SettingsBinder.FormatString="{}{0:0}"
                                            helpers:SettingsBinder.TargetTextBlock="{Binding ElementName=BrushAutoRestoreAlphaText}" />
                                </ikw:SimpleStackPanel>
                            </ui:SettingsCard>
                        </ui:SettingsExpander.Items>
                    </ui:SettingsExpander>

                    <ui:SettingsExpander x:Name="ExpanderEnableEraserAutoSwitchBack"
                            Header="{x:Static props:CanvasStrings.Canvas_SwitchBackAfterEraser}"
                            Description="{x:Static props:CanvasStrings.Canvas_SwitchBackAfterEraserHint}"
                            IsExpanded="{Binding IsOn, ElementName=ToggleSwitchEnableEraserAutoSwitchBack, Mode=OneWay}"
                            d:Visibility="Visible" d:IsExpanded="True">
                        <ui:SettingsExpander.HeaderIcon>
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Switch}" />
                        </ui:SettingsExpander.HeaderIcon>
                        <ui:ToggleSwitch x:Name="ToggleSwitchEnableEraserAutoSwitchBack"
                                helpers:SettingsBinder.PropertyPath="Canvas.EnableEraserAutoSwitchBack" />
                        <ui:SettingsExpander.Items>
                            <ui:SettingsCard Header="{x:Static props:CanvasStrings.Canvas_SwitchBackDelay}"
                                    Description="{x:Static props:CanvasStrings.Canvas_SwitchBackDelayHint}">
                                <ikw:SimpleStackPanel Orientation="Horizontal" Spacing="8">
                                    <TextBlock x:Name="EraserAutoSwitchBackDelayText"
                                               VerticalAlignment="Center" FontFamily="Consolas" TextAlignment="Right"/>
                                    <Slider x:Name="EraserAutoSwitchBackDelaySlider" Width="200" Minimum="1" Maximum="60"
                                            Value="10" TickFrequency="1" IsSnapToTickEnabled="True"
                                            helpers:SettingsBinder.PropertyPath="Canvas.EraserAutoSwitchBackDelaySeconds"
                                            helpers:SettingsBinder.ValueRounding="0"
                                            helpers:SettingsBinder.FormatString="{x:Static props:CanvasStrings.Canvas_SecondsFormat}"
                                            helpers:SettingsBinder.TargetTextBlock="{Binding ElementName=EraserAutoSwitchBackDelayText}" />
                                </ikw:SimpleStackPanel>
                            </ui:SettingsCard>
                        </ui:SettingsExpander.Items>
                    </ui:SettingsExpander>

                    <TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}"
                        Text="{x:Static props:GestureStrings.Gesture_Title}" />

                    <controls:LabeledSettingsCard
                            Header="{x:Static props:GestureStrings.Gesture_AllowRotateScale}"
                            Description="{x:Static props:GestureStrings.Gesture_AllowRotateScaleHint}"
                            Icon="{x:Static ui:SegoeFluentIcons.Rotate}"
                            SwitchName="ToggleSwitchEnableTwoFingerRotationOnSelection"
                            helpers:SettingsBinder.PropertyPath="Gesture.IsEnableTwoFingerRotationOnSelection" />

                    <ui:SettingsExpander x:Name="ExpanderEnablePalmEraser"
                            Header="{x:Static props:GestureStrings.Gesture_EnablePalmEraser}"
                            Description="{x:Static props:GestureStrings.Gesture_PalmHint}"
                            IsExpanded="{Binding IsOn, ElementName=ToggleSwitchEnablePalmEraser, Mode=OneWay}"
                            d:Visibility="Visible" d:IsExpanded="True">
                        <ui:SettingsExpander.HeaderIcon>
                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.EraseTool}" />
                        </ui:SettingsExpander.HeaderIcon>
                        <ui:ToggleSwitch x:Name="ToggleSwitchEnablePalmEraser"
                                helpers:SettingsBinder.PropertyPath="Canvas.EnablePalmEraser" />
                        <ui:SettingsExpander.Items>
                            <ui:SettingsCard Header="{x:Static props:GestureStrings.Gesture_PalmSensitivity}">
                                <ComboBox helpers:SettingsBinder.PropertyPath="Canvas.PalmEraserSensitivity">
                                    <ComboBoxItem Content="{x:Static props:GestureStrings.Gesture_PalmSensitivityLow}" />
                                    <ComboBoxItem Content="{x:Static props:GestureStrings.Gesture_PalmSensitivityMedium}" />
                                    <ComboBoxItem Content="{x:Static props:GestureStrings.Gesture_PalmSensitivityHigh}" />
                                </ComboBox>
                            </ui:SettingsCard>
                        </ui:SettingsExpander.Items>
                    </ui:SettingsExpander>

                    <Rectangle Height="48" />

                </ikw:SimpleStackPanel>
            </Grid>
        </Grid>
    </ScrollViewer>
</ui:Page>
