// Copyright (C) 2022 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only

import QtQuick
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Shapes
import QQEMLib 1.0

NodeViewItem {
    id: nodeViewItem

    property bool initialized: false
    readonly property color borderColor: Qt.lighter(mainView.backgroundColor1, 2.0)
    readonly property color connectorColor: "#80d0d040"

    function showAddNodeDialog(startNodeId, endNodeId) {
        addNodeDialog.reset();
        effectManager.updateAddNodeData();
        addNodeDialog.startNodeId = startNodeId;
        addNodeDialog.endNodeId = endNodeId;
        addNodeDialog.open();
    }

    function showRenameNodeDialog() {
        renameNodeDialog.open();
    }

    focus: true
    Component.onCompleted: {
        nodeViewItem.updateActiveNodesList();
        effectManager.initialize();
    }

    Timer {
        running: true
        interval: 1
        onTriggered: {
            // Do the layout when views have correct sizes
            layoutNodes(false);
            initialized = true;
        }
    }

    onDoubleClickNode: {
        mainToolbar.setDesignMode(false);
    }
    onOpenDeleteNodeDialog: {
        mainWindow.deleteNodeAction();
    }
    onOpenNodeContextMenu: {
        nodeContextMenu.popup();
    }

    RenameNodeDialog {
        id: renameNodeDialog
        x: mainWindow.width * 0.5 - width * 0.5
        y: mainWindow.height * 0.5 - height * 0.5
    }

    AddNodeDialog {
        id: addNodeDialog
        x: mainWindow.width * 0.5 - width * 0.5
        y: mainWindow.height * 0.5 - height * 0.5
    }

    Image {
        anchors.fill: parent
        source: "images/nodeview_background.jpg"
    }

    // Render nodes
    Repeater {
        model: nodeViewItem.nodesModel
        delegate: Rectangle {
            width: model.width
            height: model.height
            x: model.x
            y: model.y
            border.color: model.selected ? highlightColor : borderColor
            color: mainView.backgroundColor1
            opacity: model.disabled ? 0.4 : 1.0
            border.width: 2
            radius: model.type > 1 ? 6 : height * 0.5
            Text {
                anchors.centerIn: parent
                horizontalAlignment: Text.AlignHCenter
                width: model.width - 20
                elide: Text.ElideRight
                text: model.name
                font.pixelSize: 14
                opacity: model.disabled ? 0.5 : 1.0
                color: mainView.foregroundColor2
            }
            Image {
                id: disableIconButton
                anchors.top: parent.top
                anchors.topMargin: 2
                anchors.left: parent.left
                anchors.leftMargin: 6
                width: 16
                height: 16
                mipmap: true
                visible: model.type === 2
                source: model.disabled ? "images/icon_visibility_off.png" : "images/icon_visibility_on.png"
                opacity: model.disabled ? 1.0 : 0.2
                MouseArea {
                    anchors.fill: parent
                    anchors.margins: -4
                    onClicked: {
                        model.disabled = !model.disabled;
                        nodeViewItem.updateActiveNodesList();
                        effectManager.bakeShaders(true);
                    }
                }
            }

            // Connectors
            Rectangle {
                width: 10
                height: 10
                x: parent.width * 0.5 - width * 0.5
                y: -height * 0.5
                radius: width * 0.5
                visible: model.type !== 0
                border.width: 2
                border.color: connectorColor
                color: mainView.backgroundColor1
            }
            Rectangle {
                width: 10
                height: 10
                x: parent.width * 0.5 - width * 0.5
                y: parent.height - height * 0.5
                radius: width * 0.5
                visible: model.type !== 1
                border.width: 2
                border.color: connectorColor
                color: mainView.backgroundColor1
            }
        }
    }

    // Render arrows between nodes
    Repeater {
        model: nodeViewItem.arrowsModel
        delegate: Shape {
            anchors.fill: parent
            ShapePath {
                strokeWidth: 2
                strokeColor: connectorColor
                capStyle: ShapePath.RoundCap
                startX: model.startX
                startY: model.startY
                PathLine {
                    x: model.endX
                    y: model.endY
                }
            }
        }
    }

    // Render '+' into arrows
    Repeater {
        model: nodeViewItem.arrowsModel
        delegate: Rectangle {
            property real arrowWidth: Math.sqrt(Math.pow(model.endX - model.startX, 2) + Math.pow(model.endY - model.startY, 2))

            x: model.startX + (model.endX - model.startX) * 0.5 - width * 0.5
            y: model.startY + (model.endY - model.startY) * 0.5 - height * 0.5
            width: 20
            height: 20
            radius: width * 0.5
            border.width: 1
            color: mainView.backgroundColor1
            border.color: highlightColor
            visible: arrowWidth > 50
            Rectangle {
                width: 8
                height: 2
                anchors.centerIn: parent
                color: mainView.foregroundColor2
            }
            Rectangle {
                width: 2
                height: 8
                anchors.centerIn: parent
                color: mainView.foregroundColor2
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    nodeViewItem.showAddNodeDialog(model.startNodeId, model.endNodeId);
                }
            }
            Text {
                anchors.left: parent.right
                anchors.leftMargin: 10
                anchors.verticalCenter: parent.verticalCenter
                font.pixelSize: 16
                color: mainView.foregroundColor1
                visible: nodeViewItem.nodeGraphComplete && nodeViewItem.arrowsModel.rowCount === 1
                text: "Add Node"
            }
        }
    }

    // Add node button
    Rectangle {
        anchors.left: parent.left
        anchors.leftMargin: 20
        anchors.top: parent.top
        anchors.topMargin: 20
        width: 30
        height: 30
        radius: width * 0.5
        border.width: 2
        color: mainView.backgroundColor1
        border.color: borderColor
        Rectangle {
            width: 8
            height: 2
            anchors.centerIn: parent
            color: mainView.foregroundColor2
        }
        Rectangle {
            width: 2
            height: 8
            anchors.centerIn: parent
            color: mainView.foregroundColor2
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                nodeViewItem.showAddNodeDialog(-1, -1);
            }
        }
        Text {
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.right
            anchors.leftMargin: 10
            font.pixelSize: 16
            color: mainView.foregroundColor1
            text: "Add Node"
        }
    }

    // Active arrow user modifies
    Shape {
        anchors.fill: parent
        visible: nodeViewItem.activeArrowEnabled
        opacity: 0.4
        ShapePath {
            strokeWidth: 4
            strokeColor: connectorColor
            strokeStyle: ShapePath.DashLine
            dashPattern: [2, 2]
            capStyle: ShapePath.RoundCap
            startX: nodeViewItem.activeArrowStartPoint.x
            startY: nodeViewItem.activeArrowStartPoint.y
            PathLine {
                x: nodeViewItem.activeArrowEndPoint.x
                y: nodeViewItem.activeArrowEndPoint.y
            }
        }
    }
}