<ui:Page
    x:Class="ModernWpf.SampleApp.ControlPages.ThemeResourcesPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ui="http://schemas.modernwpf.com/2019"
    xmlns:common="clr-namespace:ModernWpf.SampleApp.Common"
    xmlns:local="clr-namespace:ModernWpf.SampleApp.ControlPages"
    xmlns:sc="clr-namespace:System.ComponentModel;assembly=WindowsBase"
    mc:Ignorable="d"
    SnapsToDevicePixels="True">

    <Page.Resources>
        <common:SolidColorBrushToColorStringConverter x:Key="SolidColorBrushToColorStringConverter" />

        <CollectionViewSource x:Key="ColorsCvs">
            <CollectionViewSource.Source>
                <local:ColorResources />
            </CollectionViewSource.Source>
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="GroupName" />
            </CollectionViewSource.GroupDescriptions>
            <CollectionViewSource.SortDescriptions>
                <sc:SortDescription PropertyName="GroupOrder" />
                <sc:SortDescription PropertyName="Order" />
            </CollectionViewSource.SortDescriptions>
        </CollectionViewSource>

        <local:BrushResources x:Key="BrushResources" />
        <local:TextStyles x:Key="TextStyles" />

        <ContextMenu x:Key="ResourceContextMenu">
            <MenuItem
                Header="Copy resource key"
                Click="CopyKey" />
        </ContextMenu>

        <DataTemplate x:Key="ColorTemplate">
            <StackPanel
                Background="Transparent"
                Margin="12,12,0,0"
                ContextMenu="{StaticResource ResourceContextMenu}"
                ContextMenuService.IsEnabled="{Binding CanCopyKey}">
                <Grid
                    Width="168"
                    Height="100">
                    <!--<Rectangle
                        Fill="{DynamicResource SystemControlBackgroundBaseHighBrush}"
                        Visibility="{Binding IsAlt, Converter={StaticResource BooleanToVisibilityConverter}}" />-->
                    <Border
                        x:Name="Border"
                        BorderBrush="{DynamicResource SystemControlForegroundBaseHighBrush}"
                        BorderThickness="2"
                        local:ColorResourceHelper.BackgroundColorKey="{Binding Key}" />
                </Grid>
                <TextBlock
                    Text="{Binding SimpleName}"
                    Style="{StaticResource BodyTextBlockStyle}"
                    Margin="0,6,0,0" />
                <TextBlock
                    Text="{Binding ElementName=Border, Path=Background, Converter={StaticResource SolidColorBrushToColorStringConverter}}"
                    Style="{StaticResource BodyTextBlockStyle}"
                    Margin="0,3,0,0" />
            </StackPanel>
        </DataTemplate>

        <Style x:Key="ColorListStyle" TargetType="ItemsControl">
            <Setter Property="Background" Value="{DynamicResource SystemControlPageBackgroundAltHighBrush}" />
            <Setter Property="Foreground" Value="{DynamicResource SystemControlPageTextBaseHighBrush}" />
            <Setter Property="Padding" Value="12,0" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="ItemTemplate" Value="{StaticResource ColorTemplate}" />
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <WrapPanel
                            ItemWidth="180"
                            ItemHeight="180" />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <DataTemplate x:Key="ColorGroupHeaderTemplate">
            <TextBlock
                Text="{Binding Name}"
                Style="{DynamicResource BaseTextBlockStyle}"
                Margin="12,12,0,6" />
        </DataTemplate>

        <Style x:Key="ColorGroupContainerStyle" TargetType="GroupItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GroupItem">
                        <StackPanel>
                            <ContentPresenter x:Name="PART_Header" />
                            <ItemsPresenter x:Name="ItemsPresenter" />
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <DataTemplate x:Key="BrushTemplate">
            <Grid
                Margin="12,0"
                Background="Transparent"
                ContextMenu="{StaticResource ResourceContextMenu}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <Border
                    BorderBrush="{DynamicResource SystemControlForegroundBaseHighBrush}"
                    BorderThickness="1"
                    Width="126"
                    Height="51"
                    VerticalAlignment="Center">
                    <Rectangle
                        common:DynamicResourceHelper.Property="Shape.Fill"
                        common:DynamicResourceHelper.ResourceKey="{Binding Key}" />
                </Border>

                <TextBlock
                    Grid.Column="1"
                    Text="{Binding Key}"
                    VerticalAlignment="Center"
                    Margin="12,0,0,0" />
            </Grid>
        </DataTemplate>

        <Style x:Key="BrushesRepeaterStyle" TargetType="ui:ItemsRepeater">
            <Setter Property="ItemTemplate" Value="{StaticResource BrushTemplate}" />
            <Setter Property="ItemsSource" Value="{StaticResource BrushResources}" />
            <Setter Property="Margin" Value="12" />
            <Setter Property="Layout">
                <Setter.Value>
                    <ui:StackLayout Spacing="14" />
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="ScrollViewerStyle" TargetType="ScrollViewer" BasedOn="{StaticResource {x:Type ScrollViewer}}">
            <Setter Property="Foreground" Value="{DynamicResource SystemControlPageTextBaseHighBrush}" />
            <Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
            <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
            <Setter Property="Padding" Value="0" />
        </Style>
    </Page.Resources>

    <TabControl
        Style="{StaticResource TabControlPivotStyle}"
        Padding="12,0">

        <TabItem Header="Color ramp">
            <ScrollViewer
                Style="{StaticResource ScrollViewerStyle}"
                Margin="-24,0"
                Padding="0"
                ui:ThemeManager.RequestedTheme="Dark">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <ItemsControl
                        Style="{StaticResource ColorListStyle}"
                        ItemsSource="{Binding Source={StaticResource ColorsCvs}}"
                        ui:ThemeManager.RequestedTheme="Light">
                        <ItemsControl.GroupStyle>
                            <GroupStyle
                                ContainerStyle="{StaticResource ColorGroupContainerStyle}"
                                HeaderTemplate="{StaticResource ColorGroupHeaderTemplate}" />
                        </ItemsControl.GroupStyle>
                    </ItemsControl>

                    <ItemsControl
                        Grid.Column="1"
                        Style="{StaticResource ColorListStyle}"
                        ItemsSource="{Binding Source={StaticResource ColorsCvs}}"
                        ui:ThemeManager.RequestedTheme="Dark">
                        <ItemsControl.GroupStyle>
                            <GroupStyle
                                ContainerStyle="{StaticResource ColorGroupContainerStyle}"
                                HeaderTemplate="{StaticResource ColorGroupHeaderTemplate}" />
                        </ItemsControl.GroupStyle>
                    </ItemsControl>

                </Grid>
            </ScrollViewer>
        </TabItem>

        <TabItem Header="Accent color palette">
            <UniformGrid
                Rows="7"
                Columns="1"
                Margin="-24,0"
                UseLayoutRounding="False">
                <UniformGrid.Resources>
                    <Style TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
                        <Setter Property="HorizontalAlignment" Value="Center" />
                        <Setter Property="VerticalAlignment" Value="Center" />
                    </Style>
                </UniformGrid.Resources>
                <Border Background="{DynamicResource SystemAccentColorLight3Brush}">
                    <TextBlock
                        Text="SystemAccentColorLight3"
                        Foreground="Black" />
                </Border>
                <Border Background="{DynamicResource SystemAccentColorLight2Brush}">
                    <TextBlock
                        Text="SystemAccentColorLight2"
                        Foreground="Black" />
                </Border>
                <Border Background="{DynamicResource SystemAccentColorLight1Brush}">
                    <TextBlock
                        Text="SystemAccentColorLight1"
                        Foreground="Black" />
                </Border>
                <Border Background="{DynamicResource SystemControlBackgroundAccentBrush}">
                    <TextBlock
                        Text="SystemAccentColor"
                        Foreground="White" />
                </Border>
                <Border Background="{DynamicResource SystemAccentColorDark1Brush}">
                    <TextBlock
                        Text="SystemAccentColorDark1"
                        Foreground="White" />
                </Border>
                <Border Background="{DynamicResource SystemAccentColorDark2Brush}">
                    <TextBlock
                        Text="SystemAccentColorDark2"
                        Foreground="White" />
                </Border>
                <Border Background="{DynamicResource SystemAccentColorDark3Brush}">
                    <TextBlock
                        Text="SystemAccentColorDark3"
                        Foreground="White" />
                </Border>
            </UniformGrid>
        </TabItem>

        <TabItem Header="Brushes">
            <Grid Margin="-24,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <ui:ItemsRepeaterScrollHost
                    Background="{DynamicResource SystemControlPageBackgroundAltHighBrush}"
                    ui:ThemeManager.RequestedTheme="Light">
                    <ScrollViewer
                        x:Name="SV1"
                        Style="{StaticResource ScrollViewerStyle}"
                        VerticalScrollBarVisibility="Hidden"
                        PanningMode="VerticalOnly"
                        ScrollChanged="OnScrollChanged">
                        <ui:ItemsRepeater Style="{StaticResource BrushesRepeaterStyle}" />
                    </ScrollViewer>
                </ui:ItemsRepeaterScrollHost>

                <ui:ItemsRepeaterScrollHost
                    Grid.Column="1"
                    Background="{DynamicResource SystemControlPageBackgroundAltHighBrush}"
                    ui:ThemeManager.RequestedTheme="Dark">
                    <ScrollViewer
                        x:Name="SV2"
                        Style="{StaticResource ScrollViewerStyle}"
                        ScrollChanged="OnScrollChanged">
                        <ui:ItemsRepeater Style="{StaticResource BrushesRepeaterStyle}" />
                    </ScrollViewer>
                </ui:ItemsRepeaterScrollHost>
            </Grid>
        </TabItem>

        <TabItem Header="Type ramp">
            <ui:ItemsRepeaterScrollHost Margin="-24,0">
                <ScrollViewer Style="{StaticResource ScrollViewerStyle}">
                    <ui:ItemsRepeater
                        ItemsSource="{StaticResource TextStyles}"
                        Margin="12,0">
                        <ui:ItemsRepeater.Layout>
                            <ui:StackLayout Spacing="12" />
                        </ui:ItemsRepeater.Layout>
                        <DataTemplate>
                            <TextBlock
                                Text="{Binding Text}"
                                common:StaticResourceHelper.Property="TextBlock.Style"
                                common:StaticResourceHelper.ResourceKey="{Binding Key}"
                                ContextMenu="{StaticResource ResourceContextMenu}"
                                Margin="12,0" />
                        </DataTemplate>
                    </ui:ItemsRepeater>
                </ScrollViewer>
            </ui:ItemsRepeaterScrollHost>
        </TabItem>

    </TabControl>
</ui:Page>
