import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14

import Storybook 1.0

Pane {
    id: root

    ListModel {
        id: imagesModel
    }

    Instantiator {
        model: 20

        delegate: Rectangle {
            parent: root

            width: 150
            height: 150

            color: 'whitesmoke'
            border.width: 1
            visible: false

            Label {
                anchors.centerIn: parent
                text: "image " + index
                font.pixelSize: 20
            }

            Image {
                id: keepUrlAlive
                visible: false
            }

            Component.onCompleted: {
                imagesModel.append({
                    imageLink: "",
                    rawLink: `raw link ${index}`
                })

                Qt.callLater(grabToImage, imageResult => {
                    keepUrlAlive.source = imageResult.url
                    imagesModel.setProperty(index, "imageLink",
                                            Qt.resolvedUrl(imageResult.url))
                })
            }
        }
    }

    ColumnLayout {
        anchors.fill: parent

        RowLayout {
            Layout.fillWidth: true

            CheckBox {
                id: selectableCheckBox

                Layout.alignment: Qt.AlignVCenter

                text: "selectable"
            }

            ToolSeparator {
                Layout.alignment: Qt.AlignVCenter
            }

            Label {
                id: selectionText

                Layout.fillWidth: true
                Layout.alignment: Qt.AlignVCenter

                property string selectionAsString: ""

                text: `selected indexes: [${selectionAsString}]`

                Connections {
                    target: grid.selection

                    function onSelectionChanged() {
                        const indexes = grid.selection.selectedIndexes
                        const rows = indexes.map(idx => idx.row)

                        selectionText.selectionAsString = rows.join(", ")
                    }
                }
            }

            Button {
                text: "Clear selection"

                onClicked: grid.selection.clear()
            }
        }

        ImagesGridView {
            id: grid

            Layout.fillWidth: true
            Layout.fillHeight: true

            selectable: selectableCheckBox.checked
            clip: true
            model: imagesModel
        }
    }
}