import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtGraphs
import GraphsDemo

Window {
    id: window
    width: 800
    height: 600
    visible: true
    title: qsTr("Graphs Demo")

    ColumnLayout{
        spacing: 1
        anchors.fill: parent
        uniformCellSizes: true

        RowLayout{
            spacing: 1
            uniformCellSizes: true
            GraphsView {
                Layout.fillWidth: true
                Layout.fillHeight: true

                axisX: BarCategoryAxis {
                    id: catAxis
                    labelsAngle: -45
                    titleText: "Category"
                    titleFont.bold: true
                    titleColor: "orange"
                    gridVisible: false
                    subGridVisible: false
                }

                axisY: ValueAxis {
                    id: filmCountAxis
                    min: 0
                    titleText: "Total payment"
                    titleFont.bold: true
                    titleColor: "orange"
                    gridVisible: false
                    subGridVisible: false
                }

                BarSeries {
                    id: filmCountSeries
                    labelsVisible: true
                    labelsPosition: BarSeries.LabelsPosition.OutsideEnd
                    labelsPrecision: 0
                    barWidth: 1
                    seriesColors: FilmsByCategory.rainbowColors(filmCountSeries.count)
                    borderColors: seriesColors

                    barDelegate: Rectangle {
                        property int barIndex
                        property color barColor
                        property color barBorderColor
                        property real barBorderWidth
                        property string barLabel
                        property real barValue

                        color: barColor
                        border {
                            width: barBorderWidth
                            color: barBorderColor
                        }
                        radius: 4
                        Text {
                            text: barValue.toFixed(0)
                            color: parent.palette.windowText
                            anchors{
                                bottom: parent.top
                                bottomMargin: 5
                            }
                            width: parent.width
                            horizontalAlignment: Text.AlignHCenter
                        }
                        MouseArea {
                            anchors.fill: parent
                            onClicked: console.log(barLabel)
                        }
                    }
                }
            }

            GraphsView {
                id: pieView
                Layout.fillWidth: true
                Layout.fillHeight: true
                theme: GraphsTheme {
                    colorScheme: GraphsTheme.ColorScheme.Dark
                    colorStyle: GraphsTheme.ColorStyle.ObjectGradient
                    theme: GraphsTheme.Theme.MixSeries
                    labelTextColor: "white"
                }
                seriesList: []
            }
        }

        RowLayout {
            spacing: 1
            uniformCellSizes: true
            GraphsView {
                Layout.fillWidth: true
                Layout.fillHeight: true

                axisX: ValueAxis {
                    min: 0
                    max: 500
                }
                axisY: ValueAxis {
                    min: -1
                    max: 1
                }

                LineSeries {
                    id: staticSeries
                    color: "orange"
                    width: 2
                }
            }

            ColumnLayout {
                GraphsView {
                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    axisX: ValueAxis {
                        id: xAxis
                        min: 0
                        max: 10
                        gridVisible: false
                        subGridVisible: false
                    }
                    axisY: ValueAxis {
                        id: yAxis
                        min: -1.1
                        max: 1.1
                        gridVisible: false
                        tickInterval: 0.5
                    }

                    LineSeries {
                        id: realtimeSeries
                        color: "yellow"
                        // width: 2
                    }
                }
                RowLayout {
                    Layout.fillWidth: true
                    RoundButton {
                        id: pauseButton
                        text: checked ? "Resume" : "Pause"
                        radius: 4
                        checkable: true
                        onClicked: if(checked) DataProvider.stopRealtime()
                                    else DataProvider.startRealtime()
                    }
                    RoundButton {
                        id: stopButton
                        text: "Stop"
                        radius: 4
                        onClicked: {
                            DataProvider.stopRealtime()
                            realtimeSeries.clear()
                            pauseButton.checked = false
                        }
                    }
                }
            }
        }
    }

    Connections {
        target: FilmsByCategory
        function onChanged(bar){
            filmCountSeries.append(bar)
            catAxis.categories.push(bar.label)
        }
    }

    Connections {
        target: DataProvider

        function onStaticDataReady(dataset) {
            staticSeries.append(dataset)
        }

        function onNewRealtimePoint(point) {
            if(point.x===undefined || point.y===undefined) return;
            realtimeSeries.append(point)
            if(realtimeSeries.count > 100) {
                realtimeSeries.remove(0)
                xAxis.min = point.x - 10
                xAxis.max = point.x
            }
        }
    }

    Component.onCompleted: {
        // bar chart
        FilmsByCategory.getBarSetData()
        filmCountAxis.max = FilmsByCategory.maxCount*1.5

        // pie chart
        pieView.addSeries(FilmsByCategory.getPieSliceData())

        // line chart
        DataProvider.loadStaticData()
        DataProvider.startRealtime()
    }

    /* no more use. Change to C++ side */

    // function setSeriesColors() {
    //     let colors = []
    //     for(let i=0; i<filmCountSeries.count; i++){
    //         let c = Qt.hsla(i/filmCountSeries.count, 1, 0.5, 0.85)
    //         colors.push(c)
    //     }
    //     return colors
    // }
}