import QtQuick 2.6
import QtQuick.Controls.Nemo 1.0

Item{
    id: timePicker
    width: 400
    height: width

    property date date: new Date();

    Rectangle{
        anchors.fill: parent
        color: "black"
    }

    Canvas {
        id: canvas
        anchors.fill: parent
        onPaint: {
            var context = getContext("2d");

            var centerX = canvas.width / 2
            var centerY = canvas.height / 2

            var hour_radius = canvas.width/2*0.8 - 1.5*Theme.itemHeightExtraSmall/4 - Theme.itemHeightExtraSmall/5/2
            var hour_end_angle = getHourAngle()

            var minute_radius = canvas.width/2*0.8
            var minute_end_angle = getMinuteAngle();

/*Draw hours */
            context.beginPath();
            context.arc(centerX, centerY, hour_radius, -0.5*Math.PI, hour_end_angle, false);
            context.lineWidth = Theme.itemHeightExtraSmall/2;
            context.strokeStyle = Theme.accentColor;
            context.globalAlpha = 1;
            context.stroke();
/*Draw subhours if time AM*/
            context.beginPath();
            context.arc(centerX, centerY, hour_radius, 0, 2 * Math.PI, false);
            context.lineWidth = Theme.itemHeightExtraSmall/2;
            context.strokeStyle = Theme.accentColor;
            context.globalAlpha = 0.5;
            context.stroke();
/*Draw minute*/
            context.beginPath();
            context.arc(centerX, centerY, minute_radius, -0.5*Math.PI, minute_end_angle, false);
            context.lineWidth = Theme.itemHeightExtraSmall/5;
            context.strokeStyle = Theme.accentColor;
            context.globalAlpha = 0.5;
            context.stroke();
        }
    }

    Label{
        id: hourLabel
        text: timePicker.date.getHours()
        font.pixelSize: Theme.itemHeightExtraSmall/2
        font.bold: true
        x: canvas.width/2-hourLabel.contentWidth-Theme.itemHeightExtraSmall/10
        y: canvas.height/2-(canvas.width/2*0.8 - 1.5*Theme.itemHeightExtraSmall/4 - Theme.itemHeightExtraSmall/5/2) - Theme.itemHeightExtraSmall/4
    }

    Label{
        id: minuteLabel
        text: timePicker.date.getMinutes()
        font.pixelSize: Theme.itemHeightExtraSmall/5
        x: canvas.width/2-minuteLabel.contentWidth-Theme.itemHeightExtraSmall/10
        y: canvas.width/2-canvas.width/2*0.8-Theme.itemHeightExtraSmall/5/2
    }

    Component.onCompleted: console.log(date)

    function getHourAngle()
    {
        var hour = timePicker.date.getHours();
        if(hour > 12)
        {
            hour = hour-12
        }
        return 2*Math.PI/12*hour-0.5*Math.PI;
    }

    function getMinuteAngle()
    {
        var minute = timePicker.date.getMinutes()
        return 2*Math.PI/60*minute-0.5*Math.PI;
    }
}