import QtQuick 2.2
import Sailfish.Silica 1.0

// Riquadro di una lettura grande nella Home: titolo, valore, riga sotto e la
// barra di avanzamento (facoltativa). Toccabile: porta alle regolazioni.
//
// La barra c'e' sempre, anche quando non serve, e resta trasparente: cosi' i
// due riquadri affiancati hanno la stessa altezza senza vincoli circolari.
BackgroundItem {
    id: root

    property string title: ""
    property string value: ""
    property string subtitle: ""
    property real progress: 0
    property bool showBar: false
    property color valueColor: Theme.primaryColor

    signal tapped()

    height: content.height + 2 * Theme.paddingMedium

    onClicked: root.tapped()

    Column {
        id: content
        x: Theme.paddingMedium
        y: Theme.paddingMedium
        width: parent.width - 2 * Theme.paddingMedium
        spacing: Theme.paddingSmall

        Label {
            width: parent.width
            text: root.title
            color: Theme.secondaryColor
            font.pixelSize: Theme.fontSizeSmall
            elide: Text.ElideRight
        }

        Label {
            width: parent.width
            text: root.value
            color: root.valueColor
            font.pixelSize: Theme.fontSizeHuge
            elide: Text.ElideRight
        }

        Label {
            width: parent.width
            text: root.subtitle
            color: Theme.secondaryColor
            font.pixelSize: Theme.fontSizeExtraSmall
            wrapMode: Text.Wrap
        }

        ProgressBar {
            width: parent.width
            value: Math.max(0, Math.min(1, root.progress))
            opacity: root.showBar ? 1 : 0
        }
    }
}