import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQml.Models 2.12

ApplicationWindow {
    id: root
    width: 800
    height: 480
    visible: true
    title: qsTr("Hello World")

    property bool isGridStyle: enableGrid.checked

    header: ToolBar {
        ToolButton {
            id: enableGrid
            text: checked ? "To List" : "To Grid"
            checkable: true
        }
    }

    ListModel {
        id: sourceModel
        ListElement {
            name: "test1"
            color: "red"
        }
        ListElement {
            name: "test2"
            color: "green"
        }
        ListElement {
            name: "test1"
            color: "blue"
        }
    }

    Component {
        id: cellComponent
        Rectangle {
            id: cell
            width: root.isGridStyle ? 50 : 100
            height: root.isGridStyle ? 50 : 34

            Behavior on width {
                NumberAnimation { duration: 1000 }
            }
            Behavior on height {
                NumberAnimation { duration: 1000 }
            }
            Behavior on x {
                NumberAnimation { duration: 1000 }
            }
            Behavior on y {
                NumberAnimation { duration: 1000 }
            }

            color: model.index % 2 ? "lightgray" : "lightblue"
            function updateAnchors() {
                if (root.isGridStyle) {
                    colorRect.anchors.verticalCenter = undefined
                    colorRect.anchors.left = undefined
                    nameLabel.anchors.verticalCenter = undefined
                    nameLabel.anchors.left = undefined

                    colorRect.anchors.horizontalCenter = cell.horizontalCenter
                    colorRect.anchors.top = cell.top
                    nameLabel.anchors.horizontalCenter = cell.horizontalCenter
                    nameLabel.anchors.top = colorRect.bottom
                } else {
                    colorRect.anchors.horizontalCenter = undefined
                    colorRect.anchors.top.horizontalCenter = undefined
                    nameLabel.anchors.horizontalCenter = undefined
                    nameLabel.anchors.top = undefined

                    colorRect.anchors.verticalCenter = cell.verticalCenter
                    colorRect.anchors.left = cell.left
                    nameLabel.anchors.verticalCenter = cell.verticalCenter
                    nameLabel.anchors.left = colorRect.right
                }
            }
            Component.onCompleted: updateAnchors()
            Connections {
                target: root
                onIsGridStyleChanged: {
                    updateAnchors()
                }
            }
            Rectangle {
                id: colorRect
                color: model.color
                width: 32
                height: 32
                anchors.margins: 2
            }
            Label {
                id: nameLabel
                anchors.margins: 2
                text: model.name
            }

        }
    }

    DelegateModel {
        id: cellsModel
        model: sourceModel
        delegate: cellComponent
    }

    Component {
        id: listViewComponent
        ListView {
            model: cellsModel
        }
    }

    Component {
        id: gridViewComponent
        GridView {
            model: cellsModel
        }
    }

    Loader {
        anchors.fill: parent
        sourceComponent: isGridStyle ? gridViewComponent : listViewComponent
    }

}