import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Window {
    id: window
    width: 550
    height: 320
    visible: true
    title: qsTr("Hello Parallax")

    Rectangle {
        id: frame
        clip: true
        color: "black"
        anchors.fill: parent
        onWidthChanged: {
               console.log("width:" + width)

              // WORKING HACK (still jumps by 1 px)
              // hbar.stepSize = 0.000001
              // hbar.increase()
              // hbar.decrease()
        }

        Text {
            id: narrower
            text: "0123401234"
            color: "orange"
            font.pixelSize: 100
            readonly property real mul: narrower.width / wider.width
            x: width < frame.width ? frame.width / 2 - width / 2 : hbar.truePosition * -(narrower.width - frame.width)
            Rectangle { anchors.fill: parent; color: "green"; opacity: 0.25 }
        }

        Text {
            id: wider
            text: "01234567890123456789"
            color: "blue"
            anchors.top: narrower.bottom
            font.pixelSize: 100
            x: Math.min(0, Math.max(-hbar.position * wider.width, frame.width - wider.width))
            Rectangle { anchors.fill: parent; color: "cyan"; opacity: 0.25 }
        }

        ScrollBar {
            id: hbar
            readonly property real maxPosition: (1 - hbar.contentItem.width / hbar.width)
            readonly property real truePosition: position/maxPosition // [0..1) -0.001--0.002 error
            hoverEnabled: true
            active: hovered || pressed
            orientation: Qt.Horizontal
            size: frame.width / Math.max(narrower.width, wider.width)
            // size: ((frame.width % 2) === 0) ? 0.2 : 0.22
            onMinimumSizeChanged: console.log("minimum: " + minimumSize)
            onSizeChanged: { console.log("size: " + size) }
            onVisualSizeChanged: console.log("visual size:" + visualSize)
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            policy: Qt.ScrollBarAlwaysOn
        }
    }
}