import QtQuick

// On/off button in the grab bar, highlighted while on.
// Child items form the icon and should use `foreground` as their color.
Item {
    id: toggle

    required property string label
    property bool checked: false
    readonly property color foreground: checked ? Theme.accentText : (tap.pressed ? Theme.text : Theme.handle)
    default property alias icon: iconArea.data
    signal toggled(bool checked)

    implicitWidth: 34
    implicitHeight: 22
    Accessible.role: Accessible.CheckBox
    Accessible.name: label
    Accessible.checked: checked

    Rectangle {
        anchors.centerIn: parent
        width: 30
        height: 20
        radius: 5
        color: Theme.accent
        visible: toggle.checked
    }

    Item {
        id: iconArea
        anchors.centerIn: parent
        width: 20
        height: 14
    }

    TapHandler {
        id: tap
        onTapped: toggle.toggled(!toggle.checked)
    }
}