@using System.Threading;
@implements IDisposable

<RadzenRow Gap="2rem" RowGap="2rem" class="rz-p-0 rz-p-md-12">
    <RadzenColumn Size="12" SizeMD="6">
        <RadzenText TextStyle="TextStyle.H5" TagName="TagName.H3">Clock</RadzenText>
        <RadzenText TextStyle="TextStyle.Body1">
            Demonstrates using multiple pointers with RadzenRadialGauge.
        </RadzenText>
        <RadzenRadialGauge Style="width: 100%; height: 500px;">
            <RadzenRadialGaugeScale Step="1" Min="0" Max="12" StartAngle="0" EndAngle="360" ShowFirstTick="false"
                MinorStep=@minorStep
                TickLength="20"
                MinorTickLength="10"
                TickLabelOffset="40"
                TickPosition="GaugeTickPosition.Inside">
                <RadzenRadialGaugeScalePointer Value=@hours Length="0.6" ShowValue="false" />
                <RadzenRadialGaugeScalePointer Value=@seconds Length="0.9" Fill="red" Width="2" ShowValue="false" />
                <RadzenRadialGaugeScalePointer Value=@minutes Length="0.8" ShowValue="false" />
            </RadzenRadialGaugeScale>
        </RadzenRadialGauge>
    </RadzenColumn>
    <RadzenColumn Size="12" SizeMD="6">
        <RadzenText TextStyle="TextStyle.H5" TagName="TagName.H3">Activity</RadzenText>
        <RadzenText TextStyle="TextStyle.Body1">
            Shows how to use multiple scales with RadzenArcGauge
        </RadzenText>
        <RadzenArcGauge Style="width: 100%; height: 500px; background: #000">
            <RadzenArcGaugeScale Min="0" Max="520" StartAngle="0" EndAngle="360" Fill="rgba(249, 32, 99, 0.5)">
                <RadzenArcGaugeScaleValue Value=@move Fill="rgb(249, 32, 99)">
                    <Template>
                        <svg width="100%" viewBox="0 0 240 120" >
                            <text x="90" y="10" fill="#fff">
                                Move <tspan fill="rgb(249, 32, 99)">@(Math.Round(move/520 * 100))%</tspan>
                            </text>
                            <text x="90" y="28" fill="rgb(249, 32, 99)">
                                @move/520 cal 
                            </text>
                            <text x="90" y="50" fill="#fff">
                                Exercise <tspan fill="rgb(203, 255, 0)">@(Math.Round(exercise/30 * 100))%</tspan>
                            </text>
                            <text x="90" y="68" fill="rgb(203, 255, 0)">
                                @exercise/30 min 
                            </text>
                            <text x="90" y="88" fill="#fff">
                                Stand <tspan fill="rgb(0, 253, 234)">@(Math.Round(stand/12 * 100))%</tspan>
                            </text>
                            <text x="90" y="106" fill="rgb(0, 253, 234)">
                                @stand/12 hr 
                            </text>
                        </svg>
                    </Template>
                </RadzenArcGaugeScaleValue>
            </RadzenArcGaugeScale>
            <RadzenArcGaugeScale Min="0" Max="30" StartAngle="0" EndAngle="360" Radius="0.8" Fill="rgba(203, 255, 0, 0.5)">
                <RadzenArcGaugeScaleValue Value=@exercise Fill="rgb(203, 255, 0)" ShowValue="false" />
            </RadzenArcGaugeScale>
            <RadzenArcGaugeScale Min="0" Max="12" StartAngle="0" EndAngle="360" Radius="0.6" Fill="rgb(0, 253, 234, 0.5)">
                <RadzenArcGaugeScaleValue Value=@stand Fill="rgb(0, 253, 234)" ShowValue="false" />
            </RadzenArcGaugeScale>
        </RadzenArcGauge>
    </RadzenColumn>
</RadzenRow>

@code {
    Timer timer;
    double hours;
    double minutes;
    double seconds;

    double minorStep = 12 / 60.0;

    double move = 338;
    double exercise = 2;
    double stand = 8;

    protected override void OnInitialized()
    {
        timer = new Timer(state =>
        {
            var now = DateTime.Now;

            hours = now.Hour % 12 + now.Minute / 60.0;

            minutes = now.Minute * minorStep + now.Second * 12 / 3600.0;
            seconds = now.Second * minorStep;

            InvokeAsync(StateHasChanged);
        }, null, 0, 1000);
    }

    public void Dispose()
    {
        timer?.Dispose();
    }
}