import QtQuick 2.3
import QtQuick.Controls 2.3

ApplicationWindow {
    id: root
    visible: true

    ListModel {
        id: my_model
        dynamicRoles: true
        Component.onCompleted: {
            for (var i =0; i < 16; ++i) {
                append({"item": i})
            }
        }

        function get_item(index) {
            return get(index).item
        }

        function set_item(index, item) {
            set(index, {"item": item})
        }

        function replace(from_index, to_index) {
            var from_obj = get_item(from_index)
            var to_obj = get_item(to_index)
            set_item(to_index, from_obj)
            set_item(from_index, to_obj)
        }
    }



    ParallelAnimation {
        id: anim
        property Item toItem
        property Item fromItem
        property point fromPosition: Qt.point(0, 0)
        property point toPosition: Qt.point(0, 0)
        property int duration: 200

        function start_animation(from, to) {
            fromItem = from
            toItem = to
            fromPosition = Qt.point(from.x, from.y)
            toPosition = Qt.point(to.x, to.y)
            start()
        }

        NumberAnimation {
            target: anim.fromItem
            property: "x"
            duration: anim.duration
            from: anim.fromPosition.x
            to: anim.toPosition.x
            easing.type: Easing.InOutQuad
        }
        NumberAnimation {
            target: anim.fromItem
            property: "y"
            duration: anim.duration
            from: anim.fromPosition.y
            to: anim.toPosition.y
            easing.type: Easing.InOutQuad
        }
        onStopped: {
            fromItem.x = fromPosition.x
            fromItem.y = fromPosition.y
            my_model.replace(fromItem._index, toItem._index)
        }
    }

    property Item from: null

    function item_clicked(item) {
        if (from == null) {
            from = item
        } else {
            anim.start_animation(from, item)
            from = null
        }
    }

    Grid {
        columns: 4
        Repeater {
            id: repeater
            model: my_model
            Rectangle {
                id: root_item
                property int _index: index
                width: 20
                height: 20
                color: from === root_item ? "lightblue" : "lightgray"
                border.color: "black"
                border.width: 1
                Label {
                    anchors.centerIn: parent
                    text: model.item
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: root.item_clicked(root_item)
                }
            }
        }
    }
}