import QtQuick 2.0

Item {
    id: root
    property int edgePosition: Qt.TopEdge
    property real controlWidth: 32

    MouseArea {
        id: ma
        hoverEnabled: true
        Rectangle {
            id: bg
            anchors {
                fill: parent
                margins: -controlWidth
            }
            color: "black"
            visible: parent.containsMouse
        }
    }

    onEdgePositionChanged: {
        if (!(edgePosition === Qt.TopEdge
              || edgePosition === Qt.BottomEdge
              || edgePosition === Qt.LeftEdge
              || edgePosition === Qt.RightEdge)) {
            console.warn("EdgeObject: Unsupported edgePosition.")
        }
    }

    states: [
        State {
            name: "top"
            when: root.edgePosition === Qt.TopEdge
            AnchorChanges {
                target: ma
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.right: parent.right
            }
            PropertyChanges {
                target: ma
                anchors.leftMargin: height
                anchors.rightMargin: height
                height: controlWidth
            }
            PropertyChanges {
                target: bg
                anchors.bottomMargin: 0
            }
        },
        State {
            name: "bottom"
            when: root.edgePosition === Qt.BottomEdge
            AnchorChanges {
                target: ma
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                anchors.right: parent.right
            }
            PropertyChanges {
                target: ma
                anchors.leftMargin: height
                anchors.rightMargin: height
                height: controlWidth
            }
            PropertyChanges {
                target: bg
                anchors.topMargin: 0
            }
        },
        State {
            name: "left"
            when: root.edgePosition === Qt.LeftEdge
            AnchorChanges {
                target: ma
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.left: parent.left
            }
            PropertyChanges {
                target: ma
                anchors.topMargin: width
                anchors.bottomMargin: width
                width: controlWidth
            }
            PropertyChanges {
                target: bg
                anchors.rightMargin: 0
            }
        },
        State {
            name: "right"
            when: root.edgePosition === Qt.RightEdge
            AnchorChanges {
                target: ma
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.right: parent.right
            }
            PropertyChanges {
                target: ma
                anchors.topMargin: width
                anchors.bottomMargin: width
                width: controlWidth
            }
            PropertyChanges {
                target: bg
                anchors.leftMargin: 0
            }
        }
    ]
}