import QtQuick
import QtQuick.Layouts

Window {

    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    ColumnLayout {

        anchors.fill: parent

        Flipable {
            id: flip
            property bool flipped: false
            Layout.fillHeight: true
            Layout.fillWidth: true

            front: Rectangle {
                anchors.fill: parent
                color: mouseFront.containsMouse ? 'red' : 'green'

                MouseArea {
                    id: mouseFront
                    hoverEnabled: true
                    anchors.fill: parent
                }
            }



            back: Rectangle {
                anchors.fill: parent
                color: mouseBack.containsMouse ? 'red' : 'blue'

                MouseArea {
                    id: mouseBack
                    hoverEnabled: true
                    anchors.fill: parent
                }
            }

            transform: Rotation {
                id: rotation
                origin.x: flip.width/2
                origin.y: flip.height/2
                axis.x: 0; axis.y: 1; axis.z: 0     // set axis.y to 1 to rotate around y-axis
                angle: 0    // the default angle
            }

            states: State {
                name: "back"
                PropertyChanges { target: rotation; angle: 180 }
                when: flip.flipped
            }

            transitions: Transition {
                NumberAnimation {
                    target: rotation
                    property: "angle"
                    duration: 500
                    easing.type: Easing.OutQuad
                }
            }
        }

        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 100
            Text {
                anchors.centerIn: parent
                text: 'Flip'
            }
            MouseArea {
                anchors.fill: parent
                onClicked: flip.flipped = !flip.flipped
            }
        }
    }
}