import QtQuick
import QtQuick.Layouts
import QtQuick.Controls.Material

Page {
    id: page

    ColumnLayout {
        anchors.fill: parent

        ListView {
            id: listView
            Layout.fillWidth: true
            Layout.fillHeight: true
            focus: true
            clip: true

            model: mainModel

            // delegate: ListItemDelegate {}
            delegate: ExpandableItemDelegate {}
            // delegate: EditableItemDelegate {}
            delegateModelAccess: DelegateModel.ReadWrite

            header: bannercomponent
            footer: Rectangle {
                width: parent.width
                height: 30
                gradient: mainGradient
            }
        }
        Button {
            Layout.fillWidth: true
            text: "Undo: " + appUndoStack.undoText
            enabled: appUndoStack.canUndo
            onClicked: {
                appUndoStack.undo()
            }
        }
        Button {
            Layout.fillWidth: true
            text: "Redo: " + appUndoStack.redoText
            enabled: appUndoStack.canRedo
            onClicked: {
                appUndoStack.redo()
            }
        }
    }

    Component {
        //instantiated when header is processed
        id: bannercomponent
        Rectangle {
            id: banner
            width: parent.width
            height: 50
            gradient: mainGradient
            border {
                color: wccPurpleDark
                width: 2
            }
            Text {
                anchors.centerIn: parent
                text: window.title
                font.pixelSize: 32
                color: wccDarkLight
            }
        }
    }

    Gradient {
        id: mainGradient
        GradientStop {
            position: 0.0
            color: wccPurpleDefault
        }
        GradientStop {
            position: 0.66
            color: wccPurpleDark
        }
    }
}