{%- assign accentColor = '#2563EB' -%}
{%- assign themeKey = 'ThemeIndex' -%}
{%- assign themeOptions = 'Unspecified|System|adjust,Light|Light|sun,Dark|Dark|moon' | Split:',' -%}
<VerticalStackLayout Spacing="8">
    <Label Text="APPEARANCE"
        StyleClass="footnote, bold, text-interface-medium"
        Margin="4,0,0,0" />

    <Border StrokeShape="RoundRectangle 12"
        StrokeThickness="0"
        StyleClass="bg-interface-softest"
        Padding="16">

        <Border.Shadow>
            <Shadow Brush="Gray"
                Offset="5,5"
                Radius="5"
                Opacity="0.15" />
        </Border.Shadow>

        <VerticalStackLayout Spacing="12">
            <Picker x:Name="ThemeApplier"
                IsVisible="False">
                <Picker.ItemsSource>
                    <x:Array Type="{x:Type x:Object}">
                        <AppTheme xmlns="clr-namespace:Microsoft.Maui.ApplicationModel;assembly=Microsoft.Maui.Essentials">Unspecified</AppTheme>
                        <AppTheme xmlns="clr-namespace:Microsoft.Maui.ApplicationModel;assembly=Microsoft.Maui.Essentials">Light</AppTheme>
                        <AppTheme xmlns="clr-namespace:Microsoft.Maui.ApplicationModel;assembly=Microsoft.Maui.Essentials">Dark</AppTheme>
                    </x:Array>
                </Picker.ItemsSource>
                <Picker.SelectedItem>
                    <Binding Source="{x:Static Application.Current}"
                        Path="UserAppTheme"
                        Mode="OneWayToSource" />
                </Picker.SelectedItem>
            </Picker>

            <Border StrokeShape="RoundRectangle 14"
                StrokeThickness="0"
                StyleClass="bg-interface-softer"
                Padding="4">

                <Grid ColumnDefinitions="*, *, *"
                    ColumnSpacing="4">

                    {%- for option in themeOptions -%}
                        {%- assign optionParts = option | Split:'|' -%}
                        {%- assign optionIndex = forloop.index0 -%}
                        <Border StrokeShape="RoundRectangle 10"
                            StrokeThickness="0"
                            BackgroundColor="Transparent"
                            Padding="6,10"
                            Grid.Column="{{ optionIndex }}">

                            <Border.Triggers>
                                <DataTrigger TargetType="Border"
                                    Binding="{Binding Source={x:Static Application.Current}, Path=UserAppTheme}">
                                    <DataTrigger.Value>
                                        <AppTheme xmlns="clr-namespace:Microsoft.Maui.ApplicationModel;assembly=Microsoft.Maui.Essentials">{{ optionParts[0] }}</AppTheme>
                                    </DataTrigger.Value>
                                    <Setter Property="BackgroundColor" Value="{{ accentColor }}" />
                                    <Setter Property="InputTransparent" Value="True" />
                                </DataTrigger>
                            </Border.Triggers>

                            <VerticalStackLayout Spacing="4"
                                HorizontalOptions="Center">

                                <Rock:Icon IconClass="{{ optionParts[2] }}"
                                    FontSize="18"
                                    FontAutoScalingEnabled="False"
                                    StyleClass="text-interface-strong"
                                    HorizontalOptions="Center">
                                    <Rock:Icon.Triggers>
                                        <DataTrigger TargetType="Rock:Icon"
                                            Binding="{Binding Source={x:Static Application.Current}, Path=UserAppTheme}">
                                            <DataTrigger.Value>
                                                <AppTheme xmlns="clr-namespace:Microsoft.Maui.ApplicationModel;assembly=Microsoft.Maui.Essentials">{{ optionParts[0] }}</AppTheme>
                                            </DataTrigger.Value>
                                            <Setter Property="TextColor" Value="White" />
                                        </DataTrigger>
                                    </Rock:Icon.Triggers>
                                </Rock:Icon>

                                <Label Text="{{ optionParts[1] }}"
                                    StyleClass="footnote, bold, text-interface-strongest"
                                    HorizontalOptions="Center">
                                    <Label.Triggers>
                                        <DataTrigger TargetType="Label"
                                            Binding="{Binding Source={x:Static Application.Current}, Path=UserAppTheme}">
                                            <DataTrigger.Value>
                                                <AppTheme xmlns="clr-namespace:Microsoft.Maui.ApplicationModel;assembly=Microsoft.Maui.Essentials">{{ optionParts[0] }}</AppTheme>
                                            </DataTrigger.Value>
                                            <Setter Property="TextColor" Value="White" />
                                        </DataTrigger>
                                    </Label.Triggers>
                                </Label>
                            </VerticalStackLayout>

                            <Border.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding AggregateCommand}">
                                    <TapGestureRecognizer.CommandParameter>
                                        <Rock:AggregateCommandParameters>
                                            <Rock:CommandReference Command="{Binding SetAppValue}"
                                                CommandParameter="{{ themeKey }}={{ optionIndex }}" />
                                            <Rock:CommandReference Command="{Binding SetViewProperty}">
                                                <Rock:SetViewPropertyParameters View="{x:Reference ThemeApplier}"
                                                    Name="SelectedIndex"
                                                    Value="{{ optionIndex }}" />
                                            </Rock:CommandReference>
                                        </Rock:AggregateCommandParameters>
                                    </TapGestureRecognizer.CommandParameter>
                                </TapGestureRecognizer>
                            </Border.GestureRecognizers>
                        </Border>
                    {%- endfor -%}
                </Grid>
            </Border>
        </VerticalStackLayout>
    </Border>
</VerticalStackLayout>