<local:NavigablePage
    x:Class="Microsoft.PowerToys.Settings.UI.Views.ColorPickerPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Helpers"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:models="using:Microsoft.PowerToys.Settings.UI.Library"
    xmlns:tkcontrols="using:CommunityToolkit.WinUI.Controls"
    xmlns:tkconverters="using:CommunityToolkit.WinUI.Converters"
    xmlns:ui="using:CommunityToolkit.WinUI"
    xmlns:viewModels="using:Microsoft.PowerToys.Settings.UI.ViewModels"
    x:Name="RootPage"
    d:DataContext="{d:DesignInstance Type=viewModels:ColorPickerViewModel}"
    AutomationProperties.LandmarkType="Main"
    mc:Ignorable="d">
    <controls:SettingsPageControl x:Uid="ColorPicker" ModuleImageSource="ms-appx:///Assets/Settings/Modules/ColorPicker.png">
        <controls:SettingsPageControl.ModuleContent>
            <StackPanel
                x:Name="ColorPickerView"
                ChildrenTransitions="{StaticResource SettingsCardsAnimations}"
                Orientation="Vertical">
                <controls:GPOInfoControl ShowWarning="{x:Bind ViewModel.IsEnabledGpoConfigured, Mode=OneWay}">
                    <tkcontrols:SettingsCard x:Uid="ColorPicker_EnableColorPicker" HeaderIcon="{ui:BitmapIcon Source=/Assets/Settings/Icons/ColorPicker.png}">
                        <ToggleSwitch x:Uid="ToggleSwitch" IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" />
                    </tkcontrols:SettingsCard>
                </controls:GPOInfoControl>

                <controls:SettingsGroup x:Uid="Shortcut" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
                    <tkcontrols:SettingsCard
                        Name="ActivationShortcut"
                        x:Uid="Activation_Shortcut"
                        HeaderIcon="{ui:FontIcon Glyph=&#xEDA7;}">
                        <controls:ShortcutControl HotkeySettings="{x:Bind Path=ViewModel.ActivationShortcut, Mode=TwoWay}" />
                    </tkcontrols:SettingsCard>

                    <tkcontrols:SettingsCard
                        Name="ColorPickerActivationAction"
                        x:Uid="ColorPicker_ActivationAction"
                        HeaderIcon="{ui:FontIcon Glyph=&#xEC4E;}">
                        <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind Path=ViewModel.ActivationBehavior, Mode=TwoWay}">
                            <ComboBoxItem x:Uid="ColorPicker_OpenEditor" />
                            <ComboBoxItem x:Uid="ColorPicker_PickColor" />
                        </ComboBox>
                    </tkcontrols:SettingsCard>

                    <tkcontrols:SettingsExpander
                        Name="ColorPickerMouseActions"
                        x:Uid="ColorPicker_MouseActions"
                        HeaderIcon="{ui:FontIcon Glyph=&#xE962;}"
                        IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
                        <tkcontrols:SettingsExpander.Items>
                            <tkcontrols:SettingsCard
                                Name="ColorPickerPrimaryClick"
                                x:Uid="ColorPicker_PrimaryClick"
                                IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
                                <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind ViewModel.PrimaryClickBehavior, Mode=TwoWay}">
                                    <ComboBoxItem x:Uid="ColorPicker_PickColorThenEditor" />
                                    <ComboBoxItem x:Uid="ColorPicker_PickColorAndClose" />
                                    <ComboBoxItem x:Uid="ColorPicker_Close" />
                                </ComboBox>
                            </tkcontrols:SettingsCard>
                            <tkcontrols:SettingsCard
                                Name="ColorPickerMiddleClick"
                                x:Uid="ColorPicker_MiddleClick"
                                IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
                                <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind ViewModel.MiddleClickBehavior, Mode=TwoWay}">
                                    <ComboBoxItem x:Uid="ColorPicker_PickColorThenEditor" />
                                    <ComboBoxItem x:Uid="ColorPicker_PickColorAndClose" />
                                    <ComboBoxItem x:Uid="ColorPicker_Close" />
                                </ComboBox>
                            </tkcontrols:SettingsCard>
                            <tkcontrols:SettingsCard
                                Name="ColorPickerSecondaryClick"
                                x:Uid="ColorPicker_SecondaryClick"
                                IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
                                <ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind ViewModel.SecondaryClickBehavior, Mode=TwoWay}">
                                    <ComboBoxItem x:Uid="ColorPicker_PickColorThenEditor" />
                                    <ComboBoxItem x:Uid="ColorPicker_PickColorAndClose" />
                                    <ComboBoxItem x:Uid="ColorPicker_Close" />
                                </ComboBox>
                            </tkcontrols:SettingsCard>
                        </tkcontrols:SettingsExpander.Items>
                    </tkcontrols:SettingsExpander>
                </controls:SettingsGroup>

                <controls:SettingsGroup x:Uid="ColorFormats" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
                    <tkcontrols:SettingsCard
                        Name="ColorPickerCopiedColorRepresentation"
                        x:Uid="ColorPicker_CopiedColorRepresentation"
                        HeaderIcon="{ui:FontIcon Glyph=&#xF0E3;}">
                        <ComboBox
                            x:Name="ColorPicker_ComboBox"
                            MinWidth="{StaticResource SettingActionControlMinWidth}"
                            DisplayMemberPath="Value"
                            ItemsSource="{Binding ColorFormatsPreview, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                            Loaded="ColorPicker_ComboBox_Loaded"
                            SelectedIndex="{Binding ColorFormatsPreviewIndex, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                            SelectedValue="{Binding SelectedColorRepresentationValue, Mode=TwoWay}"
                            SelectedValuePath="Key" />
                    </tkcontrols:SettingsCard>

                    <tkcontrols:SettingsCard Name="ColorPickerShowColorName" x:Uid="ColorPicker_ShowColorName">
                        <ToggleSwitch x:Uid="ToggleSwitch" IsOn="{Binding ShowColorName, Mode=TwoWay}" />
                    </tkcontrols:SettingsCard>
                    <!--
                Disabling this until we have a safer way to reset cursor as
                we can hit a state where the cursor doesn't reset

                <CheckBox x:Uid="ColorPicker_ChangeCursor"
                        IsChecked="{Binding ChangeCursor, Mode=TwoWay}"
                        Margin="{StaticResource SmallTopMargin}"
                        IsEnabled="{Binding IsEnabled}"/>
                    -->
                </controls:SettingsGroup>

                <controls:SettingsGroup x:Uid="ColorPicker_Editor" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
                    <tkcontrols:SettingsCard
                        x:Name="ColorFormatsSetting"
                        x:Uid="ColorPicker_ColorFormats"
                        HeaderIcon="{ui:FontIcon Glyph=&#xE762;}">
                        <Button
                            x:Uid="ColorPickerAddNewFormat"
                            HorizontalAlignment="Right"
                            Click="NewFormatClick"
                            Style="{StaticResource AccentButtonStyle}" />
                    </tkcontrols:SettingsCard>
                    <!--  Disabled reordering by dragging  -->
                    <!--  CanReorderItems="True" AllowDrop="True"  -->
                    <ItemsControl
                        x:Name="ColorFormats"
                        HorizontalAlignment="Stretch"
                        AutomationProperties.Name="{Binding ElementName=ColorFormatsSetting, Path=Header}"
                        IsTabStop="False"
                        ItemsSource="{Binding ColorFormats, Mode=TwoWay}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate x:DataType="models:ColorFormatModel">
                                <tkcontrols:SettingsCard
                                    Margin="0,0,0,2"
                                    Click="EditButton_Click"
                                    Description="{x:Bind Example, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                    Header="{x:Bind Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                    IsActionIconVisible="False"
                                    IsClickEnabled="True">
                                    <tkcontrols:SettingsCard.Resources>
                                        <x:Double x:Key="SettingsCardLeftIndention">42</x:Double>
                                        <x:Double x:Key="SettingsCardActionButtonWidth">0</x:Double>
                                    </tkcontrols:SettingsCard.Resources>
                                    <StackPanel Orientation="Horizontal" Spacing="4">
                                        <ToggleSwitch
                                            x:Uid="Enable_ColorFormat"
                                            AutomationProperties.HelpText="{x:Bind Name}"
                                            IsOn="{x:Bind IsShown, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                            OffContent=""
                                            OnContent="" />

                                        <Button
                                            x:Uid="More_Options_Button"
                                            Grid.Column="1"
                                            VerticalAlignment="Center"
                                            Content="&#xE712;"
                                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                            Style="{StaticResource SubtleButtonStyle}">
                                            <Button.Flyout>
                                                <MenuFlyout>
                                                    <MenuFlyoutItem
                                                        x:Uid="MoveUp"
                                                        Click="ReorderButtonUp_Click"
                                                        Icon="{ui:FontIcon Glyph=&#xE74A;}"
                                                        IsEnabled="{x:Bind CanMoveUp, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
                                                    <MenuFlyoutItem
                                                        x:Uid="MoveDown"
                                                        Click="ReorderButtonDown_Click"
                                                        Icon="{ui:FontIcon Glyph=&#xE74B;}"
                                                        IsEnabled="{x:Bind CanMoveDown, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
                                                    <MenuFlyoutSeparator />
                                                    <MenuFlyoutItem
                                                        x:Uid="RemoveItem"
                                                        Click="RemoveButton_Click"
                                                        Icon="{ui:FontIcon Glyph=&#xE74D;}"
                                                        IsEnabled="{x:Bind CanBeDeleted, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
                                                </MenuFlyout>
                                            </Button.Flyout>
                                            <ToolTipService.ToolTip>
                                                <TextBlock x:Uid="More_Options_ButtonTooltip" />
                                            </ToolTipService.ToolTip>
                                        </Button>
                                    </StackPanel>
                                </tkcontrols:SettingsCard>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </controls:SettingsGroup>
                <ContentDialog
                    x:Name="ColorFormatDialog"
                    x:Uid="ColorFormatDialog"
                    Closed="ColorFormatDialog_Closed"
                    IsPrimaryButtonEnabled="{Binding IsValid, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                    PrimaryButtonStyle="{ThemeResource AccentButtonStyle}">
                    <ContentDialog.DataContext>
                        <models:ColorFormatModel />
                    </ContentDialog.DataContext>
                    <ScrollViewer HorizontalScrollBarVisibility="Auto" HorizontalScrollMode="Auto">
                        <controls:ColorFormatEditor
                            Width="480"
                            Margin="2,0,0,0"
                            HorizontalAlignment="Left"
                            PropertyChanged="ColorFormatEditor_PropertyChanged" />
                    </ScrollViewer>
                </ContentDialog>
            </StackPanel>
        </controls:SettingsPageControl.ModuleContent>

        <controls:SettingsPageControl.PrimaryLinks>
            <controls:PageLink x:Uid="LearnMore_ColorPicker" Link="https://aka.ms/PowerToysOverview_ColorPicker" />
        </controls:SettingsPageControl.PrimaryLinks>
        <controls:SettingsPageControl.SecondaryLinks>
            <controls:PageLink Link="https://github.com/martinchrzan/ColorPicker/" Text="Martin Chrzan's Color Picker" />
            <controls:PageLink Link="https://medium.com/@Niels9001/a-fluent-color-meter-for-powertoys-20407ededf0c" Text="Niels Laute's UX concept" />
        </controls:SettingsPageControl.SecondaryLinks>
    </controls:SettingsPageControl>
</local:NavigablePage>