import QtQuick 1.1

Rectangle {
    width: 800
    height: 600
    id: root

    // MODEL

    ListModel {
        id: leftModel
        ListElement {
            iColor: "red"
        }
        ListElement {
            iColor: "blue"
        }
        ListElement {
            iColor: "green"
        }
        ListElement {
            iColor: "yellow"
        }
        ListElement {
            iColor: "pink"
        }
        ListElement {
            iColor: "orange"
        }
        ListElement {
            iColor: "brown"
        }
        ListElement {
            iColor: "gray"
        }
    }

    // VIEW

    ListView {
        id: dataView
        model: leftModel
        delegate: activity
        height: leftModel.count * 50
        width: 100
        x: 200
        interactive: false

        Rectangle
        {
            id: dropPlaceholder
            color: "transparent"
            width: parent.width
            height: 50

            Rectangle
            {
                anchors.centerIn: parent
                width: parent.width * 0.8
                height: parent.height * 0.8
                border.width: 2
                border.color: "black"
            }

            opacity: 0.0
        }
    }

    // CONTROL

    MouseArea
    {
        anchors.fill: dataView
        hoverEnabled: true
        drag.axis: Drag.YAxis
        drag.target: null
        z: 10

        property bool mousePressed: false
        property int xPos: 0
        property int yPos: 0
        property int lastMouseX: 0
        property int lastMouseY: 0
        property int itemHeight: 0
        property int currentIndex: 0
        property Item currentItem: null

        onPressed:
        {
            mousePressed = true
            currentItem.z = 2

            // Make the dropplaceholder visible
            dropPlaceholder.x = xPos
            dropPlaceholder.y = yPos
            dropPlaceholder.opacity = 0.5
        }

        onReleased:
        {
            mousePressed = false

            currentItem.x = xPos
            currentItem.y = yPos
            currentItem.z = 1
            dropPlaceholder.opacity = 0.0
        }

        onPositionChanged:
        {
            // Get the current index based on the mouse position.
            var tempIndex = dataView.indexAt(mouseX, mouseY)


            if(!mousePressed)
            {
                console.log("X: " + mouseX + " Y: " + mouseY)


                // Set the current index in the ListView so that we can get the item that coresponds this index.
                currentIndex = tempIndex
                dataView.currentIndex = tempIndex

                // Get the item coresponding the index (yeah, quite a detour to get here)
                currentItem = dataView.currentItem
                dataView.currentIndex = -1

                // Store the default position. We restore this position when we release the mouse or leave the mousearea.
                xPos = currentItem.x
                yPos = currentItem.y
                itemHeight = currentItem.height

                // Set our current item as the drag target.
                drag.target = currentItem

                console.log(currentItem)
            }
            else
            {
                var halfOfObjHeight = Math.floor(currentItem.height / 2);
                var mouseLeftoverYPos = mouseY % itemHeight;
                var mouseDirection = 0; // 0 = down. 1 = up
                var updatePlaceholderElement = false;
                //console.log("Mouse leftover Y position: " + mouseLeftoverYPos)

                if(lastMouseY >= mouseY)
                {
                    // We're going up.
                    mouseDirection = 1
                }

                if(mouseDirection === 1 && mouseLeftoverYPos <= halfOfObjHeight)
                {
                    updatePlaceholderElement = true

                }
                else if(mouseDirection === 0 && mouseLeftoverYPos >= halfOfObjHeight)
                {
                    updatePlaceholderElement = true
                }


                //console.log("Index:" + currentIndex + " Hover Index: " + tempIndex)

                if(updatePlaceholderElement && currentIndex !== tempIndex)
                {
                    dataView.currentIndex = tempIndex
                    var subCurrentItem = dataView.currentItem
                    dataView.currentIndex = -1

                    dropPlaceholder.x = subCurrentItem.x
                    dropPlaceholder.y = subCurrentItem.y
                    console.log("Update placeholder...")
                }

            }

            lastMouseX = mouseX
            lastMouseY = mouseY

        }

    }

    Component {
        id: activity
        Rectangle
        {
            id: rect
            color: iColor
            width: 100
            height: 50
            z: 0
        }
    }
}