import QtQuick 2.0

GridView {
    id: grid
    width: 480
    height: 680
    objectName: "ChannelList"
    interactive: false
    implicitHeight: contentHeight

    cellHeight: 136
    cellWidth: (width) / columns
    focus: true

    property int spacing: 8

    property int columns: Math.max(1, Math.floor((width) / (136 + spacing)))

    readonly property int animationDuration: 500

    signal transitionFinished(string animationType)

    remove: Transition {
        SequentialAnimation {

            ParallelAnimation {
                NumberAnimation { property: "opacity"; to: 0; duration: grid.animationDuration }
                NumberAnimation { property: "scale"; to: 0; duration: grid.animationDuration }
            }
            ScriptAction {
                script: {
                    console.log('remove animation done')
                    grid.transitionFinished("remove")
                }
            }
        }
    }

    removeDisplaced: Transition {
        NumberAnimation { properties: "x,y"; duration: grid.animationDuration }
    }

    model: ListModel {
        id: listModel
        ListElement { name: "1" }
        ListElement { name: "2" }
        ListElement { name: "3" }
        ListElement { name: "4" }
        ListElement { name: "5" }
        ListElement { name: "6" }
        ListElement { name: "7" }
        ListElement { name: "8" }
        ListElement { name: "9" }
    }

    delegate: Rectangle {
        id: delegateComponent

        width: grid.cellWidth
        height: grid.cellHeight

        border.color: "black"
        border.width: 1
        color: Qt.rgba(155,155,155,0.2)

        Text {
            font.pixelSize: 30
            anchors.centerIn: parent
            text: name
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                listModel.remove(index)
            }
        }
    }
}