import QtQuick 2.0
import Sailfish.Silica 1.0
import org.nemomobile.time 1.0
import org.nemomobile.lipstick 0.1
import "../main"

Item {
    id: clock
    anchors.fill: parent

    property alias time: timeText.time
    property bool color: Theme.primaryColor
    property bool followPeekPosition
    property alias updatesEnabled: timeText.updatesEnabled

    Rectangle {
        id: rect
        width: 270; height: 270
        color: "#55000000"
        anchors {
            top: parent.top
            topMargin: Theme.paddingMedium
            horizontalCenter: parent.horizontalCenter
        }
        Drag.active: dragArea.drag.active

        ClockItem {
            id: timeText
            color: Theme.primaryColor
            anchors {
                top: rect.top
                horizontalCenter: rect.horizontalCenter
            }
            text: { updatesEnabled: timeText.time
                minimumPixelSize: 10
                fontPixelSize: 76
                fontSizeMode: Text.Fit
                Qt.formatTime(new Date(), "<b>hh</b>")
            }
        }
        Text {
            id: date
            color: Theme.primaryColor
            anchors {
                top: timeText.baseline
                topMargin: Theme.paddingSmall
                horizontalCenter: rect.horizontalCenter
            }
            text: { updatesEnabled: timeText.time
                minimumPixelSize: 10
                fontPixelSize: 76
                fontSizeMode: Text.Fit
                Qt.formatDate(new Date(), "ddd dd MMM")
            }
        }
        ClockItem {
            id: minutes
            color: Theme.primaryColor
            anchors {
                top: date.baseline
                topMargin: -Theme.paddingMedium
                horizontalCenter: rect.horizontalCenter
            }
            text: { updatesEnabled: timeText.time
                minimumPixelSize: 10
                fontPixelSize: 76
                fontSizeMode: Text.Fit
                Qt.formatTime(new Date(), "<b>mm</b>")
            }
        }

        MouseArea {
            id: dragArea
            anchors.fill: parent
            drag.target: rect
            drag.axis: Drag.XandYAxis
            drag.minimumX: 0
            drag.maximumX: 270
            drag.minimumY: -10
            drag.maximumY: 600

            onPressed: {
                rect.anchors.top = undefined
                rect.anchors.topMargin = undefined
                rect.anchors.horizontalCenter = undefined
            }
        }
    }
}