import QtQuick 2.0

Item{
    id: root

    width: 100
    height: 100

    property alias model: r_elements.model;
    property color backgroundColor:"#253544";
    property color fontColor: "#ffffff";
    property color nothingDataColor: "silver"
    property int titleHeight: 30
    property alias backgroundRole: middle.color;
    Item{
        id: fn;
        width: 100;
        height: 100;

        function drawPie(ctx, centerX, centerY, radius, startAngle, endAngle, color){

            ctx.beginPath();
            ctx.fillStyle = color;
            ctx.moveTo(centerX,centerY);
            ctx.arc(centerX, centerY, radius, Math.PI * (startAngle / 180), Math.PI * ( endAngle /180), false);
            ctx.lineTo(centerX, centerY);
            ctx.closePath();
            ctx.stroke();
            ctx.fill();

        }
        function getPieValue(total, part){
            return total === 0 ? 0 : ( part * 360 / total);
        }

        Repeater {
            id: r_elements
            delegate: r_serie;
        }
        Rectangle{
            id: nothingData
            width: parent.width - 10
            height: parent.height - 10
            color: nothingDataColor
            radius: width/2
            anchors.top: parent.top
            anchors.topMargin: 5
            anchors.horizontalCenter: parent.horizontalCenter

        }

        Rectangle{
            id: middle
            width: parent.width - 50
            height: parent.height - 50;
            radius: width/2
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter


            color: backgroundColor
        }

    }

    Component{
        id: r_serie
        Canvas{
            id: canvas
            width: parent.width -10
            height: parent.height -10
            anchors.top: parent.top
            anchors.topMargin: 5
            anchors.horizontalCenter: parent.horizontalCenter
            onPaint: {
                var ctx = canvas.getContext('2d');
                var center = canvas.width / 2;
                var radius = center;
                var mTotal = model.total;
                console.log("start: "+model.startPie+" ,end: "+model.endPie+" ,PAUSE: "+model.name);
                fn.drawPie(ctx, center, center, radius, fn.getPieValue(mTotal, model.startPie), fn.getPieValue(mTotal, model.endPie), model.color);
            }
            Connections{
                target: r_elements.model;
                onDataChanged:{
                    console.log("Repaint");
                    // canvas.update();
                    if (model.total !==0){
                        nothingData.visible = false
                         canvas.requestPaint();
                    }
                }
            }
        }
    }
}