import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import "../components"

Item {
    id: page

    signal createRequested()
    signal editRequested(var data)

    Rectangle {
        anchors.fill: parent
        color: "#161628"
    }

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 8
        spacing: 8

        RowLayout {
            Layout.fillWidth: true
            Button { text: "\u2190 Назад"; onClicked: page.StackView.view.pop() }
            Label {
                Layout.fillWidth: true
                text: "Кнопки"
                font.bold: true
                font.pixelSize: 16
                color: "#ffffff"
                horizontalAlignment: Text.AlignHCenter
            }
            Button {
                text: "+ Добавить"
                onClicked: page.createRequested()
            }
        }

        Text {
            Layout.fillWidth: true
            text: "Удерживайте «≡» и перетащите для переупорядочивания"
            color: "#cccccc"
            font.pixelSize: 11
            horizontalAlignment: Text.AlignHCenter
        }

        ListView {
            id: btnList
            Layout.fillWidth: true
            Layout.fillHeight: true
            clip: true
            spacing: 4
            model: buttonsModel

            delegate: Item {
                id: row
                width: btnList.width
                height: 60

                Rectangle {
                    anchors.fill: parent
                    radius: 6
                    color: ma.drag.active
                           ? "#80ffd966"
                           : "#40222c58"
                    border.color: "#80ffffff"
                    border.width: 1

                    RowLayout {
                        anchors.fill: parent
                        anchors.margins: 6
                        spacing: 8

                        Image {
                            Layout.preferredWidth: 40
                            Layout.preferredHeight: 40
                            fillMode: Image.PreserveAspectFit
                            source: iconPath
                        }
                        ColumnLayout {
                            Layout.fillWidth: true
                            Text {
                                Layout.fillWidth: true
                                text: label
                                color: "#ffffff"
                                font.bold: true
                                elide: Text.ElideRight
                            }
                            Text {
                                Layout.fillWidth: true
                                text: actionType + ": " + actionUrl
                                color: "#cccccc"
                                font.pixelSize: 11
                                elide: Text.ElideRight
                            }
                        }
                        Rectangle {
                            Layout.preferredWidth: 18
                            Layout.preferredHeight: 18
                            radius: 9
                            color: btnColor || "#7b007b"
                            border.color: "#80ffffff"; border.width: 1
                        }
                        Button {
                            text: "\u270E"
                            onClicked: page.editRequested(buttonsModel.get(index))
                        }
                        Button {
                            text: "\u2715"
                            onClicked: btnController.removeButton(btnId)
                        }
                        Text {
                            text: "\u2261"
                            font.pixelSize: 22
                            color: "#666666"
                            Layout.preferredWidth: 24
                            horizontalAlignment: Text.AlignHCenter
                        }
                    }
                }

                MouseArea {
                    id: ma
                    anchors.right: parent.right
                    width: 30
                    height: parent.height
                    drag.target: row
                    drag.axis: Drag.YAxis
                    drag.minimumY: -row.height
                    drag.maximumY: btnList.height

                    onPressed: row.z = 2
                    onReleased: {
                        row.z = 0
                        var dy = row.y - index * (row.height + btnList.spacing)
                        var delta = Math.round(dy / (row.height + btnList.spacing))
                        var target = Math.max(0, Math.min(buttonsModel.count - 1, index + delta))
                        row.y = index * (row.height + btnList.spacing)
                        if (target !== index)
                            btnController.moveButton(index, target)
                    }
                }
            }
        }
    }
}