<UserControl
    x:Class="ClockRack.TimeZoneClock"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ClockRack"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400"
    Name="ctrl">
    
    <UserControl.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="Margin" Value="12 0" />
            <Setter Property="TextAlignment" Value="Center" />
        </Style>
        
        <Style TargetType="Path">
            <Setter Property="StrokeThickness" Value="0.2" />
            <Setter Property="StrokeStartLineCap" Value="Round" />
            <Setter Property="StrokeEndLineCap" Value="Round" />
            <Setter Property="StrokeLineJoin" Value="Round" />
            <Setter Property="StrokeDashCap" Value="Round" />
            <Setter Property="Fill" Value="Gray" />
        </Style>
    </UserControl.Resources>

    <UserControl.Foreground>
        <SolidColorBrush Color="{Binding Foreground}" />
    </UserControl.Foreground>

    <Grid>
        <Grid.Background>
            <SolidColorBrush Color="{Binding Background}" />
        </Grid.Background>

        <Viewbox StretchDirection="Both">
            <Grid Width="20"
                  Height="30" 
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center">
        
                <Grid.RowDefinitions>
                    <RowDefinition Height="5" />
                    <RowDefinition Height="20" />
                    <RowDefinition Height="5" />
                </Grid.RowDefinitions>
        
                <Viewbox Grid.Row="0">
                    <TextBlock Text="{Binding Location}" />
                </Viewbox>
        
                <Grid Grid.Row="1">

                    <!-- Transformacja całego zegara -->
                    <Grid.RenderTransform>
                        <TranslateTransform X="10" Y="10" />
                    </Grid.RenderTransform>

                    <!-- Małe znaczniki kroków -->
                    <Path Fill="{x:Null}"
                          Stroke="{Binding ElementName=ctrl, Path=Foreground}"
                          StrokeThickness="0.3"
                          StrokeDashArray="0 3.14159">
                        <Path.Data>
                            <EllipseGeometry RadiusX="9" RadiusY="9" />
                        </Path.Data>
                    </Path>

                    <!-- Duże znaczniki kroków -->
                    <Path Fill="{x:Null}"
                          Stroke="{Binding ElementName=ctrl, Path=Foreground}"
                          StrokeThickness="0.6"
                          StrokeDashArray="0 7.854">
                        <Path.Data>
                            <EllipseGeometry RadiusX="9" RadiusY="9" />
                        </Path.Data>
                    </Path>

                    <!-- Wskazówka godzinowa wskazująca w górę -->
                    <Path Data="M 0 -6 C 0 -3, 2 -3, 0.5 -2 L 0.5 0
                                       C 0.5 0.75, -0.5 0.75, -0.5 0 L -0.5 -2
                                       C -2 -3, 0 -3, 0 -6"
                          Stroke="{Binding ElementName=ctrl, Path=Foreground}">
                        <Path.RenderTransform>
                            <RotateTransform Angle="{Binding HourAngle}" />
                        </Path.RenderTransform>
                    </Path>

                    <!-- Wskazówka minutowa wskazująca w górę -->
                    <Path Data="M 0 -8 C 0 -7.5, 0 -7, 0.25 -6 L 0.25 0
                                       C 0.25 0.5, -0.25 0.5, -0.25 0 L -0.255 -6
                                       C 0 -7, 0 -7.5, 0 -8"
                          Stroke="{Binding ElementName=ctrl, Path=Foreground}">
                        <Path.RenderTransform>
                            <RotateTransform Angle="{Binding MinuteAngle}" />
                        </Path.RenderTransform>
                    </Path>

                    <!-- Druga wskazówka wskazująca w górę -->
                    <Path Data="M 0 1 L 0 -8"
                          Stroke="{Binding ElementName=ctrl, Path=Foreground}">
                        <Path.RenderTransform>
                            <RotateTransform Angle="{Binding SecondAngle}" />
                        </Path.RenderTransform>
                    </Path>
                </Grid>
        
                <Viewbox Grid.Row="2">
                    <TextBlock Text="{Binding FormattedDateTime}" />
                </Viewbox>
            </Grid>
        </Viewbox>
    </Grid>
</UserControl>
