import QtQuick
import "../../../config"

Item {
    id: root

    property var values: []
    property color lineColor: Colors.primary
    property color fillColor: Qt.alpha(Colors.primary, 0.15)
    property int pointCount: 60
    property real minWidth: 120
    property real graphHeight: 30

    width: Math.max(minWidth, parent ? parent.width : minWidth)
    height: graphHeight

    Canvas {
        id: canvas
        anchors.fill: parent

        onPaint: {
            var ctx = getContext("2d")
            ctx.clearRect(0, 0, width, height)

            var data = root.values
            if (!data || data.length < 2) return

            var displayCount = Math.min(data.length, root.pointCount)
            var startIdx = data.length - displayCount
            var slice = data.slice(startIdx)

            var maxVal = 0
            for (var i = 0; i < slice.length; i++) {
                if (slice[i] > maxVal) maxVal = slice[i]
            }
            if (maxVal === 0) maxVal = 1

            var stepX = width / (slice.length - 1)
            var padY = 2
            var drawH = height - padY * 2

            ctx.beginPath()
            ctx.moveTo(0, height - padY - (slice[0] / maxVal) * drawH)
            for (var j = 1; j < slice.length; j++) {
                var x = j * stepX
                var y = height - padY - (slice[j] / maxVal) * drawH
                ctx.lineTo(x, y)
            }
            ctx.strokeStyle = root.lineColor
            ctx.lineWidth = 1.5
            ctx.stroke()

            ctx.lineTo(width, height)
            ctx.lineTo(0, height)
            ctx.closePath()
            ctx.fillStyle = root.fillColor
            ctx.fill()
        }

        Connections {
            target: root
            function onValuesChanged() { canvas.requestPaint() }
            function onWidthChanged() { canvas.requestPaint() }
            function onHeightChanged() { canvas.requestPaint() }
        }
    }
}