pragma ComponentBehavior: Bound
import QtQuick

// An on/off switch built from primitives.
Item {
    id: toggle

    property bool checked: false
    property alias text: label.text
    signal toggled(bool checked)

    function flip() {
        toggle.toggled(!toggle.checked)
    }

    implicitWidth: track.width + 10 + label.implicitWidth
    implicitHeight: Math.max(22, label.implicitHeight)
    activeFocusOnTab: true

    Accessible.role: Accessible.CheckBox
    Accessible.name: label.text
    Accessible.checked: toggle.checked
    Accessible.onToggleAction: toggle.flip()

    Rectangle {
        id: track
        anchors.verticalCenter: parent.verticalCenter
        width: 40
        height: 22
        radius: 11
        color: toggle.checked ? "#4d7ea8" : "#cfc9c0"
        border.width: toggle.activeFocus ? 2 : 0
        border.color: "#2f5f85"
        antialiasing: true

        Behavior on color { ColorAnimation { duration: 150 } }

        Rectangle {
            y: 3
            x: toggle.checked ? track.width - width - 3 : 3
            width: 16
            height: 16
            radius: 8
            color: "white"
            antialiasing: true

            Behavior on x { NumberAnimation { duration: 150; easing.type: Easing.OutQuad } }
        }
    }

    Text {
        id: label
        anchors.left: track.right
        anchors.leftMargin: 10
        anchors.verticalCenter: parent.verticalCenter
        width: Math.max(0, toggle.width - track.width - 10)
        elide: Text.ElideRight
        color: "#2f2a36"
        font.pixelSize: 13
    }

    TapHandler {
        onTapped: toggle.flip()
    }

    Keys.onPressed: function(event) {
        if (event.key === Qt.Key_Space || event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
            toggle.flip()
            event.accepted = true
        }
    }
}