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

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QQEMLib 1.0

Item {
    id: mainView

    property alias effectManager: effectManager
    property alias outputView: outputView
    property alias outputEditorView: outputView.outputEditorView
    property alias nodeViewItem: nodeViewItem
    property alias propertyEditDialog: propertyEditDialog
    property alias currentEditorComponent: codeEditorView.currentEditorComponent
    property alias mainToolbar: mainToolbar
    property color highlightColor: "#2aafd3"
    property color backgroundColor1: "#1f1f1f"
    property color backgroundColor2: "#2e2f30"
    property color foregroundColor1: "#606060"
    property color foregroundColor2: "#dadada"
    property bool previewAnimationRunning: false
    // True = design mode, false = coding mode.
    property alias designMode: mainToolbar.designMode
    property alias designModeAnimated: mainToolbar.designModeAnimated
    property bool switchDesignModeInstantly: false
    // Initial sizes, can be adjusted by user
    property real designViewWidth: 0.3
    property real codeViewWidth: 0.6
    property real currentLeftViewWidth: designMode ? designViewWidth : codeViewWidth
    property bool showFindBar: false

    anchors.fill: parent

    function updateShaders(forceUpdate) {
        nodeViewItem.selectedNodeQmlCode = codeEditorView.qmlText;
        nodeViewItem.selectedNodeFragmentCode = codeEditorView.fragmentText;
        nodeViewItem.selectedNodeVertexCode = codeEditorView.vertexText;
        effectManager.updateQmlComponent();
        effectManager.bakeShaders(forceUpdate);
    }

    Behavior on currentLeftViewWidth {
        enabled: !mainSplitView.resizing && !switchDesignModeInstantly
        NumberAnimation {
            duration: 400
            easing.type: Easing.InOutQuad
        }
    }

    PropertyEditDialog {
        id: propertyEditDialog
    }

    EffectManager {
        id: effectManager
        nodeView: nodeViewItem
        vertexShader: outputEditorView.vertexEditor.text
        fragmentShader: outputEditorView.fragmentEditor.text
        onVertexShaderChanged: {
            outputEditorView.vertexEditor.text = effectManager.vertexShader
        }
        onFragmentShaderChanged: {
            outputEditorView.fragmentEditor.text = effectManager.fragmentShader
        }
        onQmlComponentStringChanged: {
            outputEditorView.qmlEditor.text = effectManager.qmlComponentString
        }

        Component.onCompleted: {
            // Initialize
            effectManager.bakeShaders(true);
        }
    }

    CustomSplitView {
        id: mainSplitView
        anchors.fill: parent
        orientation: Qt.Horizontal
        Item {
            SplitView.preferredWidth: mainView.width * currentLeftViewWidth
            SplitView.minimumWidth: mainView.width * 0.2
            SplitView.maximumWidth: mainView.width * 0.8
            clip: true
            onWidthChanged: {
                if (mainSplitView.resizing) {
                    // User is moving the SplitView separator, so store
                    // the updated width into current mode.
                    var newWidth = width / mainSplitView.width;
                    if (designMode)
                        designViewWidth = newWidth;
                    else
                        codeViewWidth = newWidth;
                }
            }

            MainToolbar {
                id: mainToolbar
                width: parent.width
                height: 50
                z: 2
            }

            NodeView {
                id: nodeViewItem
                anchors.top: mainToolbar.bottom
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                anchors.right: parent.right
                opacity: designModeAnimated
                visible: opacity && initialized
            }
            Item {
                anchors.top: mainToolbar.bottom
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                anchors.right: parent.right
                opacity: 1.0 - designModeAnimated
                visible: opacity
                EditorView {
                    id: codeEditorView
                    anchors.fill: parent
                    fragmentText: nodeViewItem.selectedNodeFragmentCode
                    onFragmentTextChanged: {
                        shaderUpdateTimer.restart();
                    }
                    vertexText: nodeViewItem.selectedNodeVertexCode
                    onVertexTextChanged: {
                        shaderUpdateTimer.restart();
                    }
                    qmlText: nodeViewItem.selectedNodeQmlCode
                    onQmlTextChanged: {
                        shaderUpdateTimer.restart();
                    }
                    visible: nodeViewItem.effectNodeSelected || nodeViewItem.mainNodeSelected
                    Timer {
                        id: shaderUpdateTimer
                        interval: 1
                        onTriggered: {
                            // Update with a small delay to synchronize vs & fs updates
                            updateShaders(false);
                        }
                    }
                }
                Text {
                    anchors.centerIn: parent
                    font.pixelSize: 14
                    color: mainView.foregroundColor1
                    text: "Select an effect node to see its code."
                    visible: !codeEditorView.visible
                }
            }
        }

        CustomSplitView {
            SplitView.fillWidth: true
            orientation: Qt.Vertical
            clip: true
            PropertiesView {
                id: propertiesView
                SplitView.preferredHeight: 200
            }
            OutputView {
                id: outputView
                SplitView.fillHeight: true
                SplitView.minimumHeight: 48
            }
        }
    }
}