import QtQuick
import QtQuick.Controls

AbstractButton {
    id: toggle
    state: "normal"
    checkable: true
    height: 48
    width: 96
    property int selectedGrabberCircleXPos: toggle.width - grabberCircle.width
                                            - grabberCircle.distToOutline
    background: Rectangle {
        anchors.fill: parent
        radius: 40
        color: "green"
    }

    Item {
        anchors.fill: parent

        Rectangle {
            id: grabberCircle
            color: "white"
            width: 40
            height: 40
            radius: 20
            property int distToOutline: 6
            x: distToOutline
            y: 4
        }
    }

    states: [
        State {
            name: "disabled"
            when: !enabled
            PropertyChanges {
                target: grabberCircle
                x: grabberCircle.distToOutline
            }
        },
        State {
            name: "normal"
            when: !pressed && !checked
            PropertyChanges {
                target: grabberCircle
                x: grabberCircle.distToOutline
            }
        },
        State {
            name: "pressed"
            when: pressed && !checked
            PropertyChanges {
                target: grabberCircle
                x: grabberCircle.distToOutline
            }
        },
        State {
            name: "selected"
            when: !pressed && checked
            PropertyChanges {
                target: grabberCircle
                x: toggle.selectedGrabberCircleXPos
            }
        },
        State {
            name: "pressedSelected"
            when: pressed && checked
            PropertyChanges {
                target: grabberCircle
                x: toggle.selectedGrabberCircleXPos
            }
        }
    ]
}