<Page
    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: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">

    <Page.Resources>
        <tkconverters:BoolToVisibilityConverter x:Key="BoolToVis" />
    </Page.Resources>

    <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">
                <tkcontrols:SettingsCard
                    x:Uid="ColorPicker_EnableColorPicker"
                    HeaderIcon="{ui:BitmapIcon Source=/Assets/Settings/Icons/ColorPicker.png}"
                    IsEnabled="{x:Bind ViewModel.IsEnabledGpoConfigured, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}">
                    <ToggleSwitch x:Uid="ToggleSwitch" IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" />
                </tkcontrols:SettingsCard>
                <InfoBar
                    x:Uid="GPO_SettingIsManaged"
                    IsClosable="False"
                    IsOpen="{x:Bind ViewModel.IsEnabledGpoConfigured, Mode=OneWay}"
                    IsTabStop="{x:Bind ViewModel.IsEnabledGpoConfigured, Mode=OneWay}"
                    Severity="Informational" />

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

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

                </controls:SettingsGroup>

                <controls:SettingsGroup x:Uid="ColorFormats" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
                    <tkcontrols:SettingsCard 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 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
                        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>
</Page>