import QtQuick

// A labelled slider in the iOS style; value runs from `from` to 1.
Item {
    id: row

    required property string text
    property real from: 0
    property real value: 1
    signal moved(real value)

    implicitHeight: 52

    function moveTo(x) {
        const fraction = Math.max(0, Math.min(1, (x - knob.width / 2) / (track.width - knob.width)));
        row.moved(row.from + fraction * (1 - row.from));
    }

    Text {
        id: label
        anchors { left: parent.left; verticalCenter: parent.verticalCenter }
        width: Math.min(implicitWidth, parent.width / 3)
        text: row.text
        color: Theme.text
        font.pixelSize: 16
        elide: Text.ElideRight
    }

    Text {
        id: percent
        anchors { right: parent.right; verticalCenter: parent.verticalCenter }
        width: 44
        horizontalAlignment: Text.AlignRight
        text: Math.round(row.value * 100) + "%"
        color: Theme.secondaryText
        font.pixelSize: 14
    }

    Item {
        id: track
        anchors { left: label.right; leftMargin: 12; right: percent.left; rightMargin: 8 }
        height: parent.height

        readonly property real fraction: (row.value - row.from) / (1 - row.from)

        Rectangle {
            anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter }
            height: 4
            radius: 2
            color: Theme.functionKey

            Rectangle {
                width: knob.x + knob.width / 2
                height: parent.height
                radius: parent.radius
                color: Theme.accent
            }
        }

        Rectangle {
            id: knob
            x: track.fraction * (track.width - width)
            anchors.verticalCenter: parent.verticalCenter
            width: 26
            height: width
            radius: width / 2
            color: "#ffffff"
            border { color: Theme.keyShadow; width: 0.5 }
        }

        TapHandler {
            onTapped: eventPoint => row.moveTo(eventPoint.position.x)
        }
        DragHandler {
            target: null
            xAxis.enabled: true
            yAxis.enabled: false
            onCentroidChanged: if (active) row.moveTo(centroid.position.x)
        }
    }
}