import QtQuick 2.6
import QtQuick.Layouts 1.3
import QtQuick.Controls 1.4
import QtCharts 2.1

import "." as App

Rectangle {
    id: clock

    Layout.alignment: Qt.AlignTop
    Layout.preferredWidth: parent.width / 2
    Layout.preferredHeight: parent.height / 4
    Layout.minimumHeight: 200
    Layout.minimumWidth: 200

    property var current: new Date()

    ChartView {
        title: clock.current.toLocaleString(Qt.locale(), "hh:mm")
        legend.visible: false
        antialiasing: true
        animationOptions: ChartView.SeriesAnimations
        anchors.fill: parent
        backgroundColor: "transparent"

        margins {top: 0; right: 0; bottom: 0; left: 0}

        PieSeries {

            startAngle: -180
            endAngle: 90
            id: secondsSeries
            size: 1
            holeSize: .9
            PieSlice {
                id: secondsSlice
                color: "#bd0806"
                value: (clock.current.getSeconds() / 60) * 100
            }
            PieSlice {
                color: "#E6E6E6"
                value:  100 - secondsSlice.value
            }
        }

        PieSeries {
            id: minutesSeries
            size: .9
            holeSize: .7
            startAngle: -180
            endAngle: 90
            PieSlice {
                id: minutesSlice
                color: "#bd0806"
                value: (clock.current.getMinutes() / 60) * 100
            }
            PieSlice {
                color: "#A0A0A0"
                value:  100 - minutesSlice.value
            }
        }

        PieSeries {
            id: hoursSeries
            size: .7
            holeSize: .3
            startAngle: -180
            endAngle: 90
            PieSlice {
                id: hoursSlice
                color: "#bd0806"
                value: (clock.current.getHours() / 12) * 100
            }
            PieSlice {
                color: "#828282"
                value:  100 - hoursSlice.value
            }
        }
    }

    Timer {
        interval: 100
        running: true
        repeat: true
        onTriggered: clock.timeChanged()
    }

    function timeChanged() {
        current = new Date;
    }
}