import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import TactileIPC 1.0

Item {
    id: root
    property int minValue: 0
    property int maxValue: 100
    property color colorLow: Qt.rgba(0.10, 0.75, 1.00, 1.0)
    property color colorMid: Qt.rgba(0.10, 0.95, 0.35, 1.0)
    property color colorHigh: Qt.rgba(1.00, 0.22, 0.10, 1.0)
    property int barWidth: 34
    property int barRadius: 8

    implicitWidth: barWidth + 48
    implicitHeight: 240

    ColumnLayout {
        anchors.fill: parent
        spacing: 6

        Label {
            text: root.maxValue
            font.pixelSize: 12
            opacity: 0.9
            Layout.alignment: Qt.AlignHCenter
        }

        Rectangle {
            Layout.alignment: Qt.AlignHCenter
            Layout.fillHeight: true
            width: root.barWidth
            radius: root.barRadius
            border.width: 1
            border.color: Qt.rgba(1, 1, 1, 0.18)

            gradient: Gradient {
                // must match shaders/dots.frag:dataColorRamp (high at top)
                GradientStop { position: 0.00; color: root.colorHigh }
                GradientStop { position: 0.50; color: root.colorMid }
                GradientStop { position: 1.00; color: root.colorLow }
            }
        }

        Label {
            text: root.minValue
            font.pixelSize: 12
            opacity: 0.9
            Layout.alignment: Qt.AlignHCenter
        }
    }
}