<UserControl
    x:Class="AmbientSounds.Controls.SleepTimerControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:AmbientSounds.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d">

    <UserControl.Resources>
        <Style x:Key="TimeButtonStyle" TargetType="FontIcon">
            <Setter Property="FontFamily" Value="{StaticResource FluentUIGlyphs}" />
            <Setter Property="Glyph" Value="&#xE9B5;" />
        </Style>
    </UserControl.Resources>

    <Grid
        x:Name="RootGrid"
        Padding="4"
        Background="{ThemeResource CardBackgroundBrush}"
        BorderBrush="{ThemeResource CardStrokeBrush}"
        BorderThickness="1"
        CornerRadius="8">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="auto" />
        </Grid.ColumnDefinitions>
        <Button x:Uid="SleepTimerButton" Style="{StaticResource TransparentRoundButtonStyle}">
            <FontIcon FontFamily="{StaticResource FluentUIGlyphs}" Glyph="&#xEBFE;" />
            <Button.Flyout>
                <muxc:CommandBarFlyout Placement="BottomEdgeAlignedLeft">
                    <muxc:CommandBarFlyout.SecondaryCommands>
                        <AppBarButton x:Uid="Minutes30Button" Command="{x:Bind ViewModel.TimerStartCommand}">
                            <AppBarButton.Icon>
                                <FontIcon Style="{StaticResource TimeButtonStyle}" />
                            </AppBarButton.Icon>
                            <AppBarButton.CommandParameter>
                                <x:Int32>30</x:Int32>
                            </AppBarButton.CommandParameter>
                        </AppBarButton>
                        <AppBarButton x:Uid="Minutes60Button" Command="{x:Bind ViewModel.TimerStartCommand}">
                            <AppBarButton.Icon>
                                <FontIcon Style="{StaticResource TimeButtonStyle}" />
                            </AppBarButton.Icon>
                            <AppBarButton.CommandParameter>
                                <x:Int32>60</x:Int32>
                            </AppBarButton.CommandParameter>
                        </AppBarButton>
                        <AppBarButton x:Uid="Hours2Button" Command="{x:Bind ViewModel.TimerStartCommand}">
                            <AppBarButton.Icon>
                                <FontIcon Style="{StaticResource TimeButtonStyle}" />
                            </AppBarButton.Icon>
                            <AppBarButton.CommandParameter>
                                <x:Int32>120</x:Int32>
                            </AppBarButton.CommandParameter>
                        </AppBarButton>
                        <AppBarButton x:Uid="Hours4Button" Command="{x:Bind ViewModel.TimerStartCommand}">
                            <AppBarButton.Icon>
                                <FontIcon Style="{StaticResource TimeButtonStyle}" />
                            </AppBarButton.Icon>
                            <AppBarButton.CommandParameter>
                                <x:Int32>240</x:Int32>
                            </AppBarButton.CommandParameter>
                        </AppBarButton>
                        <AppBarButton x:Uid="Hours8Button" Command="{x:Bind ViewModel.TimerStartCommand}">
                            <AppBarButton.Icon>
                                <FontIcon Style="{StaticResource TimeButtonStyle}" />
                            </AppBarButton.Icon>
                            <AppBarButton.CommandParameter>
                                <x:Int32>480</x:Int32>
                            </AppBarButton.CommandParameter>
                        </AppBarButton>
                    </muxc:CommandBarFlyout.SecondaryCommands>
                </muxc:CommandBarFlyout>
            </Button.Flyout>
        </Button>
        <TextBlock
            Grid.Column="1"
            Margin="8,0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Text="{x:Bind ViewModel.TimeLeft, Mode=OneWay}" />

        <Grid Grid.Column="2" MinWidth="40">
            <Button
                AutomationProperties.Name="{x:Bind PlayTimerAutomationName}"
                Command="{x:Bind ViewModel.TimerPlayCommand}"
                Style="{StaticResource TransparentRoundButtonStyle}"
                Visibility="{x:Bind ViewModel.PlayVisible, Mode=OneWay}">
                <FontIcon FontFamily="{StaticResource FluentUIGlyphs}" Glyph="&#xEB21;" />
            </Button>
            <Button
                AutomationProperties.Name="{x:Bind StopTimerAutomationName}"
                Command="{x:Bind ViewModel.TimerStopCommand}"
                Style="{StaticResource TransparentRoundButtonStyle}"
                Visibility="{x:Bind ViewModel.StopVisible, Mode=OneWay}">
                <FontIcon FontFamily="{StaticResource FluentUIGlyphs}" Glyph="&#xEB8A;" />
            </Button>
        </Grid>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="RegularBackgroundState" />
                <VisualState x:Name="ImageBackgroundState">
                    <VisualState.Setters>
                        <Setter Target="RootGrid.BorderThickness" Value="0" />
                        <Setter Target="RootGrid.BorderBrush" Value="Transparent" />
                        <Setter Target="RootGrid.Background" Value="{ThemeResource AcrylicBackplateBrush}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</UserControl>
