// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Layouts
import QtGraphs
import QtQuick.Shapes

Window {
    id: mainWindow
    width: 1280
    height: 720
    visible: true

    RowLayout  {
        id: graphsRow

        readonly property real margin:  mainWindow.width * 0.02

        anchors.fill: parent
        anchors.margins: margin
        spacing: margin

        Rectangle {
            Layout.fillHeight: true
            Layout.fillWidth: true
            color: "#262626"
            border.color: "#4d4d4d"
            border.width: 1
            radius: graphsRow.margin

            //! [linegraph]
            GraphsView {
                id: graphsView
                anchors.fill: parent
                anchors.margins: 16
                theme: GraphsTheme {
                    readonly property color c1: "#DBEB00"
                    readonly property color c2: "#373F26"
                    readonly property color c3: Qt.lighter(c2, 1.5)
                    colorScheme: GraphsTheme.ColorScheme.Dark
                    seriesColors: ["#2CDE85", "#DBEB00"]
                    grid.mainColor: c3
                    grid.subColor: c2
                    axisX.mainColor: c3
                    axisY.mainColor: c3
                    axisX.subColor: c2
                    axisY.subColor: c2
                    axisX.labelTextColor: c1
                    axisY.labelTextColor: c1
                }
                axisX: ValueAxis {
                    max: 5
                    tickInterval: 1
                    subTickCount: 9
                    labelDecimals: 1
                }
                axisY: ValueAxis {
                    max: 10
                    tickInterval: 1
                    subTickCount: 4
                    labelDecimals: 1
                }
                //! [linegraph]

                //! [linemarker]
                component Marker : Rectangle {
                    width: 16
                    height: 16
                    color: "#ffffff"
                    radius: width * 0.5
                    border.width: 4
                    border.color: "#000000"
                }
                //! [linemarker]

                //! [lineseries1]
                LineSeries {
                    id: lineSeries1
                    width: 4
                    pointDelegate: Marker { }
                    XYPoint { x: 0; y: 0 }
                    XYPoint { x: 1; y: 2.1 }
                    XYPoint { x: 2; y: 3.3 }
                    XYPoint { x: 3; y: 2.1 }
                    XYPoint { x: 4; y: 4.9 }
                    XYPoint { x: 5; y: 3.0 }

                    selectable: true
                    onPressed: (point) => { console.log("lineSeries1, point pressed", point) }

                }
                //! [lineseries1]

                //! [lineseries2]
                LineSeries {
                    id: lineSeries2
                    width: 4
                    pointDelegate: Marker { }
                    XYPoint { x: 0; y: 5.0 }
                    XYPoint { x: 1; y: 3.3 }
                    XYPoint { x: 2; y: 7.1 }
                    XYPoint { x: 3; y: 7.5 }
                    XYPoint { x: 4; y: 6.1 }
                    XYPoint { x: 5; y: 3.2 }

                    selectable: true
                    onPressed: (point) => { console.log("lineSeries2, point pressed", point) }

                }
                //! [lineseries2]

                // MouseArea doesn't work here?
            }

            // MouseArea works here, but then pressing points isn't possible
            MouseArea {
                id: mouseArea

                property bool dragging: false

                x: graphsView.x + graphsView.plotArea.x
                y: graphsView.y + graphsView.plotArea.y
                width: graphsView.plotArea.width
                height: graphsView.plotArea.height

                hoverEnabled: true
                preventStealing: true

                onPressed: (mouse) => {
                               path.startX = mouse.x
                               path.startY = mouse.y
                               line.x = mouse.x
                               line.y = mouse.y
                               mouseArea.dragging = true
                               lineShape.visible = true
                           }

                onPositionChanged: (mouse) => {
                                       if (mouseArea.dragging && mouseArea.containsMouse) {
                                           line.x = mouse.x
                                           line.y = mouse.y
                                       }
                                   }
                onReleased: (mouse) => {
                                mouseArea.dragging = false
                            }

                Shape {
                    id: lineShape
                    anchors.fill: mouseArea
                    anchors.centerIn: parent
                    visible: false
                    ShapePath {
                        id: path
                        strokeWidth: 2
                        strokeColor: "red"
                        PathLine { id: line }
                    }
                }

                Rectangle {
                    anchors.fill: parent
                    color: "transparent"
                    border.width: 1
                    border.color: "red"
                    visible: mouseArea.containsMouse
                }
            }
        }
    }
}