pragma ComponentBehavior: Bound
import QtQuick

Item {
    id: root

    required property Theme theme
    property string label: ""
    property string value: ""
    property real fraction: 0
    property color barColor: theme ? theme.ui.accent : "white"
    property var ring: []
    property var ringDown: []
    property color barColorDown: theme ? theme.info : "#3ec5e3"
    property bool splitSpark: false
    property real sparkScaleMax: 0
    property bool showSpark: true

    width: parent ? parent.width : 0
    height: 24

    NuguText {
        id: labelText

        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        theme: root.theme
        variant: "meta"
        text: root.label
        width: 38
    }

    NuguText {
        id: valueText

        anchors.left: labelText.right
        anchors.leftMargin: 4
        anchors.verticalCenter: parent.verticalCenter
        theme: root.theme
        variant: "meta"
        text: root.value
        width: 132
    }

    Sparkline {
        id: spark

        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        theme: root.theme
        visible: root.showSpark
        values: root.ring
        valuesDown: root.ringDown
        split: root.splitSpark
        scaleMax: root.sparkScaleMax
        barColor: root.barColor
        barColorDown: root.barColorDown
        width: 176
        height: 24
    }

    Rectangle {
        anchors.left: valueText.right
        anchors.leftMargin: 8
        anchors.right: spark.left
        anchors.rightMargin: 8
        anchors.verticalCenter: parent.verticalCenter
        height: 6
        radius: 3
        color: root.theme ? root.theme.withAlpha(root.theme.ui.minor, 0.28) : "#333333"

        Rectangle {
            width: parent.width * Math.max(0, Math.min(1, root.fraction))
            height: parent.height
            radius: parent.radius
            color: root.barColor

            Behavior on width {
                NumberAnimation {
                    duration: root.theme && root.theme.lowPowerMode ? 0 : 160
                    easing.type: Easing.OutCubic
                }
            }
        }
    }
}