import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

import StatusQ 0.1

import SortFilterProxyModel 0.2

Item {
    id: root

    ListModel {
        id: simpleSourceModel

        ListElement {
            name: "entry 0"
            position: 0
        }
        ListElement {
            name: "entry 1"
            position: 1
        }
        ListElement {
            name: "entry 2"
            position: 2
        }
        ListElement {
            name: "entry 3"
            position: 3
        }
        ListElement {
            name: "entry 4"
            position: 7
        }
        ListElement {
            name: "entry 5"
            position: 6
        }
        ListElement {
            name: "entry 6"
            position: 5
        }
        ListElement {
            name: "entry 7"
            position: 4
        }
    }

    SortFilterProxyModel {
        id: sorted

        sorters: RoleSorter {
            roleName: sortByPositionRadioButton.checked ? "position" : "name"
            sortOrder: descendingCheckBox.checked ? Qt.DescendingOrder
                                                  : Qt.AscendingOrder
        }

        sourceModel: simpleSourceModel
    }

    MovableModel {
        id: movableModel

        sourceModel: sorted
    }

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 10
        spacing: 5

        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true

            ColumnLayout {
                id: sourceColumn

                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                anchors.margins: 20
                spacing: 20

                width: parent.width / 3

                Label {
                    text: "SOURCE MODEL"

                    font.bold: true
                    font.pixelSize: 17
                }

                ListView {
                    id: sourceListView

                    spacing: 5
                    clip: true

                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    model: simpleSourceModel

                    ScrollBar.vertical: ScrollBar {}

                    delegate: Item {
                        id: sourceDelegateRoot

                        anchors {
                            left: parent ? parent.left : undefined
                            right: parent ? parent.right : undefined
                        }

                        height: sourceContent.implicitHeight

                        RowLayout {
                            id: sourceContent

                            Rectangle {
                                color: "lightgray"
                                Layout.fillHeight: true
                                Layout.preferredWidth: 40

                                Label {
                                    anchors.centerIn: parent
                                    text: "↕️"
                                }

                                MouseArea {
                                    id: sourceDragArea

                                    property bool held: false
                                    readonly property int idx: model.index

                                    anchors.fill: parent

                                    drag.target: held ? sourceContent : undefined
                                    drag.axis: Drag.YAxis

                                    onPressed: held = true
                                    onReleased: held = false
                                }
                            }

                            width: sourceDelegateRoot.width

                            Drag.active: sourceDragArea.held
                            Drag.source: sourceDragArea
                            Drag.hotSpot.x: width / 2
                            Drag.hotSpot.y: height / 2

                            states: State {
                                when: sourceDragArea.held

                                ParentChange {
                                    target: sourceContent
                                    parent: root
                                }

                                AnchorChanges {
                                    target: sourceContent
                                    anchors {
                                        horizontalCenter: undefined
                                        verticalCenter: undefined
                                    }
                                }
                            }

                            Label {
                                Layout.fillWidth: true

                                font.bold: true
                                text: model.name + ", position: " + model.position
                            }

                            RoundButton {
                                text: "❌"

                                onClicked: simpleSourceModel.remove(model.index)
                            }

                            RoundButton {
                                text: "✎"

                                onClicked: simpleSourceModel.setProperty(
                                               index, "name", simpleSourceModel.get(index).name + "_")
                            }
                        }

                        DropArea {
                            anchors { fill: parent; margins: 10 }

                            onEntered: {
                                const from = drag.source.idx
                                const to = sourceDragArea.idx

                                if (from === to)
                                    return

                                simpleSourceModel.move(from, to, 1)
                            }
                        }
                    }
                }
            }

            ColumnLayout {
                id: sfpmColumn

                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.left: sourceColumn.right
                anchors.margins: 20

                spacing: 20

                width: parent.width / 3

                Label {
                    text: "SFPM MODEL"

                    font.bold: true
                    font.pixelSize: 17
                }

                ListView {
                    id: sfpmListView

                    spacing: 5
                    clip: true

                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    model: sorted

                    ScrollBar.vertical: ScrollBar {}

                    delegate: RowLayout {
                        width: ListView.view.width

                        Label {
                            Layout.fillWidth: true

                            font.bold: true
                            text: model.name + ", position: " + model.position
                        }

                        // to keep the same delegate height as in other list views
                        RoundButton {
                            enabled: false
                            opacity: 0
                        }
                    }
                }
            }

            ColumnLayout {
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.left: sfpmColumn.right
                anchors.right: parent.right
                anchors.margins: 20

                spacing: 20

                Label {
                    text: "MOVABLE MODEL"
                    font.bold: true
                    font.pixelSize: 17
                }

                ListView {
                    id: transformedListView

                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    spacing: 5
                    clip: true

                    model: movableModel

                    ScrollBar.vertical: ScrollBar {}

                    delegate: Item {
                        id: delegateRoot

                        anchors {
                            left: parent ? parent.left : undefined
                            right: parent ? parent.right : undefined
                        }

                        height: content.implicitHeight

                        RowLayout {
                            id: content

                            Rectangle {

                                color: "lightgray"
                                Layout.fillHeight: true
                                Layout.preferredWidth: 40

                                Label {
                                    anchors.centerIn: parent
                                    text: "↕️"
                                }

                                MouseArea {
                                    id: dragArea

                                    property bool held: false
                                    readonly property int idx: model.index

                                    anchors.fill: parent

                                    drag.target: held ? content : undefined
                                    drag.axis: Drag.YAxis

                                    onPressed: held = true
                                    onReleased: held = false
                                }
                            }

                            width: delegateRoot.width

                            Drag.active: dragArea.held
                            Drag.source: dragArea
                            Drag.hotSpot.x: width / 2
                            Drag.hotSpot.y: height / 2

                            states: State {
                                when: dragArea.held

                                ParentChange {
                                    target: content
                                    parent: root
                                }

                                AnchorChanges {
                                    target: content
                                    anchors {
                                        horizontalCenter: undefined
                                        verticalCenter: undefined
                                    }
                                }
                            }

                            Label {
                                Layout.fillWidth: true

                                font.bold: true
                                text: model.name + ", position: " + model.position
                            }

                            RoundButton {
                                text: "⬆️"
                                enabled: index > 0

                                onClicked: movableModel.move(index, 0)
                            }
                            RoundButton {
                                text: "⬇️"
                                enabled: index < transformedListView.count - 1

                                onClicked: movableModel.move(
                                               index, transformedListView.count - 1)
                            }
                        }

                        DropArea {
                            anchors { fill: parent; margins: 10 }

                            onEntered: {
                                const from = drag.source.idx
                                const to = dragArea.idx

                                if (from === to)
                                    return

                                movableModel.move(from, to)
                            }
                        }
                    }
                }
            }

            Rectangle {
                width: 1
                color: "gray"
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.left: sourceColumn.right
                anchors.leftMargin: 10
            }

            Rectangle {
                width: 1
                color: "gray"
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.left: sfpmColumn.right
                anchors.leftMargin: 10
            }
        }

        Button {
            Layout.alignment: Qt.AlignHCenter

            text: "SAVE ORDER"
            font.pixelSize: 30

            onClicked: {
                const count = simpleSourceModel.count
                const newOrder = movableModel.order()
                const newOrderInverted = []
                const sourceIndexes = []

                for (let i = 0; i < count; i++)
                    newOrderInverted[newOrder[i]] = i

                for (let j = 0; j < count; j++)
                    sourceIndexes.push(sorted.mapToSource(j))

                for (let k = 0; k < count; k++)
                    simpleSourceModel.setProperty(sourceIndexes[k], "position",
                                                  newOrderInverted[k])
            }
        }

        RowLayout {
            Layout.fillHeight: false

            RadioButton {
                text: "Sort by name"
            }

            RadioButton {
                id: sortByPositionRadioButton

                text: "Sort by position"
                checked: true
            }

            CheckBox {
                id: descendingCheckBox
                text: "descending"
            }
        }

        RowLayout {
            Layout.fillHeight: false

            Button {
                text: "append to source model"

                onClicked: simpleSourceModel.append({ name: "X" })
            }

            Button {
                text: "detach order explicitely"

                onClicked: movableModel.detach()
            }

            Label {
                text: `Detached: <b>${movableModel.detached}</b>`
            }
        }
    }
}

// category: Models