import QtQuick
import qs.config

// One labelled slider: glyph, name and reading on top, the slider under them.
// Both rows of the controls panel are this.
//
// The glyph goes in `content`, so each row can bring its own — and, where the
// glyph does something when clicked (mute), say so with `iconClickable`.
Item {
    id: root

    property string label: ""
    property string valueText: ""
    property real value: 0
    property real stepSize: 0.05
    // Selected by the keyboard, which is what arrow keys move.
    property bool selected: false
    property bool iconClickable: false

    default property alias content: glyph.data

    signal moved(real value)
    signal iconClicked

    implicitHeight: header.height + slider.height

    function step(delta: real): void {
        slider.step(delta);
    }

    Item {
        id: header

        anchors {
            left: parent.left
            right: parent.right
            top: parent.top
        }
        height: Theme.iconSize

        Item {
            id: glyph

            anchors.verticalCenter: parent.verticalCenter
            width: childrenRect.width
            height: childrenRect.height
        }

        // Sibling of the glyph rather than a child of it: inside, it would be
        // part of the childrenRect the glyph sizes itself from.
        MouseArea {
            anchors.fill: glyph
            enabled: root.iconClickable
            cursorShape: Qt.PointingHandCursor
            onClicked: root.iconClicked()
        }

        Text {
            anchors {
                left: glyph.right
                right: reading.left
                leftMargin: Theme.padding
                rightMargin: Theme.padding
                verticalCenter: parent.verticalCenter
            }
            elide: Text.ElideRight
            text: root.label
            color: root.selected ? Theme.accent : Theme.text
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSize
            font.bold: true
        }

        Text {
            id: reading

            anchors {
                right: parent.right
                verticalCenter: parent.verticalCenter
            }
            text: root.valueText
            color: Theme.textDim
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSizeSmall
            font.bold: true
        }
    }

    Slider {
        id: slider

        anchors {
            left: parent.left
            right: parent.right
            top: header.bottom
        }
        value: root.value
        stepSize: root.stepSize

        onMoved: value => root.moved(value)
    }
}