import QtQuick 2.0

Item {
    id: root

    property bool isChecked: _switcher.state !== "off"

    Rectangle {
        id: _background
        anchors.fill: root
        color: "lightgreen"
    }

    Rectangle {
        id: _switcher

        width: root.width / 2

        anchors {
            top: root.top
            bottom: root.bottom
            left: root.left

            margins: 20
        }

        color: "blue"
        opacity: 0.5

        states: [
            State {
                name: "off"
                AnchorChanges {
                    target: _switcher
                    anchors.left: _background.left
                    anchors.right: undefined
                }
            },
            State {
                name: "on"
                AnchorChanges {
                    target: _switcher
                    anchors.right: _background.right
                    anchors.left: undefined
                }
            }
        ]

        transitions: Transition {
            AnchorAnimation { duration: 500 }
        }

        Component.onCompleted: {
            state = "off"
        }
    }

    MouseArea {
        anchors.fill: root
        onClicked: {
            _switcher.state = isChecked ? "off" : "on";
            console.log("Now isChecked = " + isChecked);
        }
    }
}