import QtQuick 2.15

Item {
    id: root

    width: 40
    height: 40

    property double iconMarigns: 8
    property double iconHeight: width - iconMarigns * 2
    signal clicked()
    signal back()

    SystemPalette {
        id: palette
    }

    MouseArea {
        id: ma

        anchors.fill: parent
    }

    Rectangle {
        id: bar1
        x: root.iconMarigns
        y: root.iconMarigns + root.iconHeight / 6
        width: root.iconHeight
        height: root.iconHeight / 9
        antialiasing: true

        color: palette.button
    }

    Rectangle {
        id: bar2
        x: root.iconMarigns
        y: root.iconMarigns + root.iconHeight / 2 - height / 2
        width: root.iconHeight
        height: root.iconHeight / 9
        antialiasing: true

        color: palette.button
    }

    Rectangle {
        id: bar3
        x: root.iconMarigns
        y: root.iconMarigns + root.iconHeight / 2 + height * 2
        width: root.iconHeight
        height: root.iconHeight / 9
        antialiasing: true

        color: palette.button
    }

    property int animationDuration: 450

    state: "menu"
    states: [
        State {
            name: "menu"
            PropertyChanges { target: ma; onClicked: root.clicked() }
        },

        State {
            name: "back"
            PropertyChanges { target: root; rotation: 180 }
            PropertyChanges { target: bar1; rotation: 45; width: root.iconHeight / 3 * 2; x: root.iconMarigns + root.iconHeight / 2; y: root.iconMarigns + root.iconHeight / 4 }
            PropertyChanges { target: bar2; width: root.iconHeight / 6 * 5 + 1; x: root.iconMarigns + root.iconHeight / 9 }
            PropertyChanges { target: bar3; rotation: -45; width: root.iconHeight / 3 * 2; x: root.iconMarigns + root.iconHeight / 2; y: root.iconMarigns + root.iconHeight / 3 * 2 }
            PropertyChanges { target: ma; onClicked: root.back() }
        },

        State {
            name: "hidden"
            PropertyChanges { target: ma; enabled: false }
            PropertyChanges { target: root; opacity: 0 }
        }
    ]

    transitions: [
        Transition {
            from: "hidden"; to: "*"
            SequentialAnimation
            {
                PropertyAction { targets: [root, bar1, bar2, bar3]; properties: "rotation, width, x, y" }
                NumberAnimation { target: root; property: "opacity"; duration: animationDuration; easing.type: Easing.InOutQuad }
            }
        },

        Transition {
            from: "*"; to: "hidden"
            SequentialAnimation
            {
                NumberAnimation { target: root; property: "opacity"; duration: animationDuration; easing.type: Easing.InOutQuad }
                PropertyAction { targets: [root, bar1, bar2, bar3]; properties: "rotation, width, x, y" }
            }
        },

        Transition {
            from: "menu"; to: "back"
            RotationAnimation { target: root; direction: RotationAnimation.Clockwise; duration: animationDuration; easing.type: Easing.InOutQuad }
            PropertyAnimation { target: bar1; properties: "rotation, width, x, y"; duration: animationDuration; easing.type: Easing.InOutQuad }
            PropertyAnimation { target: bar2; properties: "rotation, width, x, y"; duration: animationDuration; easing.type: Easing.InOutQuad }
            PropertyAnimation { target: bar3; properties: "rotation, width, x, y"; duration: animationDuration; easing.type: Easing.InOutQuad }
        },

        Transition {
            from: "back"; to: "menu"
            RotationAnimation { target: root; direction: RotationAnimation.Counterclockwise; duration: animationDuration; easing.type: Easing.InOutQuad }
            PropertyAnimation { target: bar1; properties: "rotation, width, x, y"; duration: animationDuration; easing.type: Easing.InOutQuad }
            PropertyAnimation { target: bar2; properties: "rotation, width, x, y"; duration: animationDuration; easing.type: Easing.InOutQuad }
            PropertyAnimation { target: bar3; properties: "rotation, width, x, y"; duration: animationDuration; easing.type: Easing.InOutQuad }
        }
    ]
}