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

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

    property bool isGridStyle: enableGrid.checked
    property int selectedIndex: 0

    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: "test3"
            color: "blue"
        }
        ListElement {
            name: "test1"
            color: "red"
        }
        ListElement {
            name: "test2"
            color: "green"
        }
        ListElement {
            name: "test3"
            color: "blue"
        }
        ListElement {
            name: "test1"
            color: "red"
        }
        ListElement {
            name: "test2"
            color: "green"
        }
        ListElement {
            name: "test3"
            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: "#00000000"
            border.width: 2
            border.color: model.index % 2 ? "lightgray" : "gray"
            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: 30
                height: 30
                anchors.margins: 2
            }
            Label {
                id: nameLabel
                anchors.margins: 2
                text: model.name
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    root.selectedIndex = model.index
                }
            }
        }
    }

    Rectangle {
        id: highlightBar
        width: viewLoader.item.currentItem.width
        height: viewLoader.item.currentItem.height
        color: "lightblue"
        y: viewLoader.item.currentItem.y
        x: viewLoader.item.currentItem.x
        Behavior on y { NumberAnimation { duration: 300 } }
        Behavior on x { NumberAnimation { duration: 300 } }
        Behavior on width { NumberAnimation { duration: 300 } }
        Behavior on height { NumberAnimation { duration: 300 } }
    }

    Component {
        id: listViewComponent
        ListView {
            anchors.fill: parent
            model: sourceModel
            delegate: cellComponent
            highlight: highlightBar
            highlightFollowsCurrentItem: false
            currentIndex: root.selectedIndex
        }
    }

    Component {
        id: gridViewComponent
        GridView {
            anchors.fill: parent
            model: sourceModel
            delegate: cellComponent
            highlight: highlightBar
            highlightFollowsCurrentItem: false
            currentIndex: root.selectedIndex
        }
    }

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

    }

}