// Key repeat: when a held key starts repeating, and how fast it goes.
//
// Two settings, one question. As separate rows they read as unrelated numbers
// with units nobody converts between; together, under one explanation, the
// pair is the single thing somebody came to change.
//
// The sliders are ordinary SliderRows, so the debounced commit, the refusal
// fallback and the schema's own labels and units all come along unchanged.
// This only puts them side by side, and stacks them when the window is too
// narrow to hold both.

import QtQuick
import qs.config

Column {
    id: root

    property bool divider: true

    readonly property bool side: root.width >= 560
    readonly property int columnWidth: root.side ? (root.width - 24) / 2 : root.width

    width: parent ? parent.width : 620
    spacing: 0

    Item {
        width: parent.width
        height: copy.implicitHeight + 20

        Column {
            id: copy

            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            spacing: 3

            Text {
                width: parent.width
                text: "Key repeat"
                color: Theme.fg
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSize
                font.weight: Font.Medium
            }

            Text {
                width: parent.width
                text: "Hold a key: when repeating starts, and how fast it goes"
                color: Theme.fgDim
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSizeSmall
                wrapMode: Text.WordWrap
            }
        }
    }

    Flow {
        width: parent.width
        spacing: 24

        SliderRow {
            setting: "keyRepeatDelay"
            width: root.columnWidth
            divider: false
        }

        SliderRow {
            setting: "keyRepeatRate"
            width: root.columnWidth
            divider: false
        }
    }

    Item {
        width: parent.width
        height: 10
    }

    Rectangle {
        width: parent.width
        height: 1
        visible: root.divider
        color: Theme.alpha(Theme.fg, 0.065)
    }
}