import QtQuick 2.0
import Ubuntu.Components 1.1

Item {
    id: circleContainer
    property double progress
    property int diameter
    property string text
    property string color
    width: diameter
    height: width

    Rectangle {
        id: circleOfTimeBG
        anchors.centerIn: parent
        // yes, really. The Rectangle.radius takes an absolute value and not a percentage...
        radius: diameter
        width: diameter
        height: width
        color: circleContainer.color
        gradient: circleContainer.gradient
    }

    Label {
        id: progressLabel
        anchors.centerIn: circleContainer
        text: circleContainer.text
    }

    Canvas {
        id: circleProgress
        anchors.fill: parent
        contextType: "2d"
        renderStrategy: Canvas.Immediate

        onPaint: {
            var ctx = getContext("2d")
            circleProgress.requestPaint()
            drawProgressCircle(ctx, progress)
        }

        function drawProgressCircle(ctx, progress) {

            var centreX    = width / 2
            var centreY    = width / 2
            var lineWidth  = diameter / 40
            // to start at top
            var startAngle = 1.5 * Math.PI

            ctx.beginPath()
            ctx.fillStyle = "black"
            ctx.lineWidth = lineWidth
            ctx.lineCap   = "round"
            ctx.moveTo(centreX, centreY - diameter / 2)
            // ctx.moveTo(centreX, 0);
            ctx.arc(centreX, centreY, diameter / 2 - lineWidth / 2, startAngle,
                    startAngle + 2 * progress * Math.PI, false)
            ctx.stroke()
            ctx.closePath()
        }
    }
}