@namespace Connected.Components
@inherits Picker<TimeSpan?>

@Render

@code{

    protected override RenderFragment PickerContent=> 
    @<CascadingValue Value="@this" IsFixed="true">
        <PickerToolbar Class="@ToolbarClass" Style="@Style" DisableToolbar="@DisableToolbar" Orientation="@Orientation" Color="@Color">
            <div class="mud-timepicker-hourminute mud-ltr">
                @if (TimeEditMode == TimeEditMode.Normal)
                {
                    <Button Variant="Variant.Text" Color="ThemeColor.Inherit" Class="@HoursButtonClass" OnClick="OnHourClick">@GetHourString()</Button>
                    <TextContent Typo="Typo.h2" Class="mud-timepicker-separator">:</TextContent>
                    <Button Variant="Variant.Text" Color="ThemeColor.Inherit" Class="@MinuteButtonClass" OnClick="OnMinutesClick">@GetMinuteString()</Button>
                }
                else
                {
                    <TextContent Typo="Typo.h2" Class="mud-timepicker-separator">@GetHourString():@GetMinuteString()</TextContent>
                }
            </div>
            @if (AmPm)
            {
                <div class="mud-timepicker-ampm">
                    <Button Variant="Variant.Text" Color="ThemeColor.Inherit" Class="@AmButtonClass" OnClick="OnAmClicked">AM</Button>
                    <Button Variant="Variant.Text" Color="ThemeColor.Inherit" Class="@PmButtonClass" OnClick="OnPmClicked">PM</Button>
                </div>
            }
        </PickerToolbar>
        <PickerContent>
            <div class="mud-picker-time-container">
                <div class="mud-picker-time-clock">
                    <div role="menu" tabindex="-1" class="mud-picker-time-clock-mask" @onmousedown="OnMouseDown" @onmouseup="OnMouseUp">
                        <div class="@GetClockPinColor()"></div>
                        <div class="@GetClockPointerColor()" style="height: @GetPointerHeight(); transform: @GetPointerRotation()">
                            <div class="@GetClockPointerThumbColor()"></div>
                        </div>
                        <div class="@HourDialClass">
                            @if (AmPm)
                            {
                                @*Hours from 1 to 12*@
                                for(int i = 1; i <= 12; ++i)
                                {
                                    var _i = i;
                                    var angle =  (6 - _i) * 30;
                                    <TextContent Class="@GetNumberColor(_i)" Style="@GetTransform(angle, 109, 0, 5)">@_i</TextContent>
                                }
                                for(int i = 1; i <= 12; ++i)
                                {
                                    var _i = i;
                                    <div class="mud-picker-stick mud-hour" style="@($"transform: rotateZ({_i * 30}deg);")" @onclick="(() => OnMouseClickHour(_i))" @onmouseover="(() => OnMouseOverHour(_i))" @onclick:stopPropagation="true"></div>
                                }
                            }
                            else
                            {
                                @*Hours from 13 to 24 (00)*@
                                for(int i = 1; i <= 12; ++i)
                                {
                                    var _i = i;
                                    var angle =  (6 - _i) * 30;
                                    <TextContent Class="@GetNumberColor((_i + 12) % 24)" Style="@GetTransform(angle, 109, 0, 5)">@(((_i + 12) % 24).ToString("D2"))</TextContent>
                                }
                                @*Hours from 1 to 12*@
                                for(int i = 1; i <= 12; ++i)
                                {
                                    var _i = i;
                                    var angle =  (6 - _i) * 30;
                                    <TextContent Class="@GetNumberColor(_i)" Typo="Typo.body2" Style="@GetTransform(angle, 74, 0, 40)">@(_i.ToString("D2"))</TextContent>
                                }
                                for(int i = 1; i <= 12; ++i)
                                {
                                    var _i = i;
                                    <div class="mud-picker-stick" style="@($"transform: rotateZ({_i * 30}deg);")">
                                        <div class="mud-picker-stick-inner mud-hour" @onclick="(() => OnMouseClickHour(_i))" @onmouseover="(() => OnMouseOverHour(_i))" @onclick:stopPropagation="true"></div>
                                        <div class="mud-picker-stick-outer mud-hour" @onclick="(() => OnMouseClickHour((_i + 12) % 24))" @onmouseover="(() => OnMouseOverHour((_i + 12) % 24))" @onclick:stopPropagation="true"></div>
                                    </div>
                                }
                            }
                        </div>
                        <div class="@MinuteDialClass">   
                            @*Minutes from 05 to 60 (00) - step 5*@                     
                            @for (int i = 0; i < 12; ++i)
                            {
                                var _i = i;
                                var angle =  (6 - _i) * 30;
                                <TextContent Class="@GetNumberColor(_i * 5)" Style="@GetTransform(angle, 109, 0, 5)">@((_i * 5).ToString("D2"))</TextContent>
                            }
                            @for (int i = 0; i < 60; ++i)
                            {
                                var _i = i;
                                <div class="mud-picker-stick mud-minute" style="@($"transform: rotateZ({_i * 6}deg);")" @onclick="(() => OnMouseClickMinute(_i))" @onmouseover="(() => OnMouseOverMinute(_i))" @onclick:stopPropagation="true"></div>
                            }
                        </div>
                    </div>
                </div>
            </div>
        </PickerContent>
    </CascadingValue>;
    
}