<abstract:CalendarRenderingSettingsPageAbstract
    x:Class="Wino.Mail.WinUI.Views.Calendar.CalendarRenderingSettingsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:abstract="using:Wino.Mail.WinUI.Views.Abstract"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:domain="using:Wino.Core.Domain"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <ScrollViewer>
        <StackPanel Spacing="{StaticResource SettingsCardSpacing}">
            <controls:SettingsCard Description="{x:Bind domain:Translator.CalendarSettings_FirstDayOfWeek_Description, Mode=OneTime}" Header="{x:Bind domain:Translator.CalendarSettings_FirstDayOfWeek_Header, Mode=OneTime}">
                <controls:SettingsCard.HeaderIcon>
                    <FontIcon Glyph="&#xE787;" />
                </controls:SettingsCard.HeaderIcon>
                <ComboBox ItemsSource="{x:Bind ViewModel.DayNames, Mode=OneWay}" SelectedIndex="{x:Bind ViewModel.SelectedFirstDayOfWeekIndex, Mode=TwoWay}" />
            </controls:SettingsCard>

            <controls:SettingsExpander Description="{x:Bind domain:Translator.CalendarSettings_WorkingDays_Description, Mode=OneTime}" Header="{x:Bind domain:Translator.CalendarSettings_WorkingDays_Header, Mode=OneTime}">
                <controls:SettingsExpander.HeaderIcon>
                    <FontIcon Glyph="&#xE8EF;" />
                </controls:SettingsExpander.HeaderIcon>
                <controls:SettingsExpander.Items>
                    <controls:SettingsCard HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" ContentAlignment="Vertical">
                        <controls:SettingsCard.Content>
                            <StackPanel Spacing="16">
                                <StackPanel Spacing="6">
                                    <TextBlock FontWeight="SemiBold" Text="{x:Bind domain:Translator.CalendarSettings_HighlightWorkingHours_Label, Mode=OneTime}" />
                                    <ToggleSwitch
                                        IsOn="{x:Bind ViewModel.IsWorkingHoursEnabled, Mode=TwoWay}"
                                        OffContent="{x:Bind domain:Translator.CalendarSettings_Toggle_Off, Mode=OneTime}"
                                        OnContent="{x:Bind domain:Translator.CalendarSettings_Toggle_On, Mode=OneTime}" />
                                </StackPanel>

                                <Grid RowSpacing="12">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>

                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="50" />
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock VerticalAlignment="Center" FontWeight="Bold" Text="{x:Bind domain:Translator.CalendarSettings_WorkingDays_From, Mode=OneTime}" />
                                        <ComboBox
                                            Grid.Column="1"
                                            IsEnabled="{x:Bind ViewModel.IsWorkingHoursEnabled, Mode=OneWay}"
                                            ItemsSource="{x:Bind ViewModel.DayNames, Mode=OneWay}"
                                            SelectedIndex="{x:Bind ViewModel.WorkingDayStartIndex, Mode=TwoWay}" />
                                        <TimePicker
                                            x:Name="WorkHourStartPicker"
                                            Grid.Column="2"
                                            Margin="12,0"
                                            IsEnabled="{x:Bind ViewModel.IsWorkingHoursEnabled, Mode=OneWay}"
                                            Time="{x:Bind ViewModel.WorkingHourStart, Mode=TwoWay}" />
                                    </Grid>

                                    <Grid Grid.Row="1">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="50" />
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock VerticalAlignment="Center" FontWeight="Bold" Text="{x:Bind domain:Translator.CalendarSettings_WorkingDays_To, Mode=OneTime}" />
                                        <ComboBox
                                            Grid.Column="1"
                                            IsEnabled="{x:Bind ViewModel.IsWorkingHoursEnabled, Mode=OneWay}"
                                            ItemsSource="{x:Bind ViewModel.DayNames, Mode=OneWay}"
                                            SelectedIndex="{x:Bind ViewModel.WorkingDayEndIndex, Mode=TwoWay}" />
                                        <TimePicker
                                            x:Name="WorkHourEndPicker"
                                            Grid.Column="2"
                                            Margin="12,0"
                                            IsEnabled="{x:Bind ViewModel.IsWorkingHoursEnabled, Mode=OneWay}"
                                            Time="{x:Bind ViewModel.WorkingHourEnd, Mode=TwoWay}" />
                                    </Grid>
                                </Grid>
                            </StackPanel>
                        </controls:SettingsCard.Content>
                    </controls:SettingsCard>
                </controls:SettingsExpander.Items>
            </controls:SettingsExpander>

            <controls:SettingsExpander Description="{x:Bind domain:Translator.CalendarSettings_CalendarRendering_Description, Mode=OneTime}" Header="{x:Bind domain:Translator.CalendarSettings_CalendarRendering_Header, Mode=OneTime}" IsExpanded="True">
                <controls:SettingsExpander.HeaderIcon>
                    <FontIcon Glyph="&#xE9D2;" />
                </controls:SettingsExpander.HeaderIcon>
                <controls:SettingsExpander.Items>
                    <controls:SettingsCard
                        HorizontalContentAlignment="Stretch"
                        VerticalContentAlignment="Stretch"
                        ContentAlignment="Vertical"
                        Description="{x:Bind domain:Translator.CalendarSettings_HourHeight_Description, Mode=OneTime}"
                        Header="{x:Bind domain:Translator.CalendarSettings_HourHeight_Header, Mode=OneTime}">
                        <StackPanel Spacing="12">
                            <Slider
                                x:Name="HourCellSlider"
                                LargeChange="10"
                                Maximum="120"
                                Minimum="40"
                                SmallChange="5"
                                StepFrequency="5"
                                Value="{x:Bind ViewModel.CellHourHeight, Mode=TwoWay}" />
                            <Grid ColumnSpacing="12">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <TextBlock VerticalAlignment="Bottom" Text="00:00" />
                                <Grid
                                    Grid.Column="1"
                                    Width="100"
                                    Height="{x:Bind HourCellSlider.Value, Mode=OneWay}"
                                    VerticalAlignment="Center"
                                    BorderBrush="Black"
                                    BorderThickness="1">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="1" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <Rectangle Grid.Row="1" HorizontalAlignment="Stretch" Stroke="Black" StrokeThickness="0.5" />
                                </Grid>
                            </Grid>
                        </StackPanel>
                    </controls:SettingsCard>

                    <controls:SettingsCard Description="{x:Bind domain:Translator.CalendarSettings_ClockIdentifierForHeaders_Description, Mode=OneTime}" Header="{x:Bind domain:Translator.CalendarSettings_ClockIdentifierForHeaders_Header, Mode=OneTime}">
                        <StackPanel Spacing="8">
                            <ToggleSwitch
                                HorizontalAlignment="Right"
                                IsOn="{x:Bind ViewModel.Is24HourHeaders, Mode=TwoWay}"
                                OffContent="12h"
                                OnContent="24h" />
                            <TextBlock
                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                Text="{x:Bind ViewModel.TimedHourLabelPreview, Mode=OneWay}"
                                TextWrapping="WrapWholeWords" />
                        </StackPanel>
                    </controls:SettingsCard>

                    <controls:SettingsCard Description="{x:Bind domain:Translator.CalendarSettings_TimedDayHeaderFormat_Description, Mode=OneTime}" Header="{x:Bind domain:Translator.CalendarSettings_TimedDayHeaderFormat_Header, Mode=OneTime}">
                        <StackPanel Spacing="8">
                            <TextBox PlaceholderText="{x:Bind domain:Translator.CalendarSettings_TimedDayHeaderFormat_Placeholder, Mode=OneTime}" Text="{x:Bind ViewModel.TimedDayHeaderDateFormat, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
                            <ComboBox ItemsSource="{x:Bind ViewModel.TimedDayHeaderFormatPresets, Mode=OneWay}" SelectedIndex="{x:Bind ViewModel.SelectedTimedDayHeaderFormatPresetIndex, Mode=TwoWay}" />
                            <TextBlock
                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                Text="{x:Bind ViewModel.TimedDayHeaderFormatPreview, Mode=OneWay}"
                                TextWrapping="WrapWholeWords" />
                        </StackPanel>
                    </controls:SettingsCard>
                </controls:SettingsExpander.Items>
            </controls:SettingsExpander>
        </StackPanel>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ClockIdentifierStates">
                <VisualState x:Name="TwelveHour" />
                <VisualState x:Name="TwentyFourHour">
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{x:Bind ViewModel.Is24HourHeaders, Mode=OneWay}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="WorkHourStartPicker.ClockIdentifier" Value="24HourClock" />
                        <Setter Target="WorkHourEndPicker.ClockIdentifier" Value="24HourClock" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </ScrollViewer>
</abstract:CalendarRenderingSettingsPageAbstract>
