import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14

import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1

import Storybook 1.0

SplitView {
    id: root

    orientation: Qt.Vertical

    QtObject {
        id: d
        //dummy data
        property real stepSize: 1000
        property real minStep: 12000
        property real maxStep: 22000

        property var graphTabsModel: [{text: "Price", enabled: true}, {text: "Balance", enabled: true}]
        property var timeRangeTabsModel: [{text: "1H", enabled: true},
            {text: "1D", enabled: true},{text: "7D", enabled: true},
            {text: "1M", enabled: true}, {text: "6M", enabled: true},
            {text: "1Y", enabled: true}, {text: "ALL", enabled: true}]

        property var simTimer: Timer {
            running: true
            interval: 3000
            repeat: true
            onTriggered: {
                d.generateData();
            }
        }

        function minutes(minutes = 0) {
            var newMinute = new Date(new Date().getTime() - (minutes * 60 * 1000)).toString();
            if (newMinute.slice(10,12) === "00") {
                var dateToday = new Date(Date.now()).toString();
                return dateToday.slice(4,7) + " " + dateToday.slice(8,10);
            }
            return newMinute.slice(10,16);
        }

        function hour(hours = 0) {
            var newHour = new Date(new Date().getTime() - (hours * 60 * 60 * 1000)).toString();
            if (newHour.slice(10,12) === "00") {
                var dateToday = new Date(Date.now()).toString();
                return dateToday.slice(4,7) + " " + dateToday.slice(8,10);
            }
            return newHour.slice(10,16);
        }

        function day(before = 0) {
            var newDay = new Date(Date.now() - before * 24 * 60 * 60 * 1000).toString();
            return newDay.slice(4,7) + " " + newDay.slice(8,10);
        }

        function month(before = 0) {
            var newMonth = new Date(Date.now() - before * 24 * 60 * 60 * 1000).toString();
            return newMonth.slice(4,7) + " '" + newMonth.slice(newMonth.indexOf("G")-3, newMonth.indexOf("G")-1);
        }

        property var timeRange: [
            {'1H': [minutes(60), minutes(55), minutes(50), minutes(45), minutes(40), minutes(35), minutes(30), minutes(25), minutes(20), minutes(15), minutes(10), minutes(5), minutes()]},
            {'1D': [hour(24), hour(23), hour(22), hour(21), hour(20), hour(19), hour(18), hour(17), hour(16), hour(15), hour(14), hour(13),
                    hour(12), hour(11), hour(10), hour(9), hour(8), hour(7), hour(6), hour(5), hour(4), hour(3), hour(2), hour(1), hour()]},
            {'7D': [day(6), day(5), day(4), day(3), day(2), day(1), day()]},
            {'1M': [day(30), day(28), day(26), day(24), day(22), day(20), day(18), day(16), day(14), day(12), day(10), day(8), day(6), day(4), day()]},
            {'6M': [month(150), month(120), month(90), month(60), month(30), month()]},
            {'1Y': [month(330), month(300), month(270), month(240), month(210), month(180), month(150), month(120), month(90), month(60), month(30), month()]},
            {'ALL': ['2016', '2017', '2018', '2019', '2020', '2021', '2022']}
        ]

        function generateData() {
            var result = [];
            for (var i = 0; i < timeRange[graphDetail.timeRangeTabBarIndex][graphDetail.selectedTimeRange].length; ++i) {
                result[i] = Math.random() * (maxStep - minStep) + minStep;
            }
            graphDetail.chart.chartData.datasets[0].data = result;
            graphDetail.chart.animateToNewData();
        }
    }

    Item {
        SplitView.fillWidth: true
        SplitView.fillHeight: true

        StatusChartPanel {
            id: graphDetail
            height: 290
            anchors.left: parent.left
            anchors.leftMargin: 24
            anchors.right: parent.right
            anchors.rightMargin: 24
            anchors.verticalCenter: parent.verticalCenter
            graphsModel: d.graphTabsModel
            timeRangeModel: d.timeRangeTabsModel
            onHeaderTabClicked: {
                //TODO
                //if time range tab
                d.generateData();
                //if graph bar
                //switch graph
            }
            chart.chartType: 'line'
            chart.chartData: {
                return {
                    labels: d.timeRange[graphDetail.timeRangeTabBarIndex][graphDetail.selectedTimeRange],
                    datasets: [{
                            label: 'Price',
                            xAxisId: 'x-axis-1',
                            yAxisId: 'y-axis-1',
                            backgroundColor: (Theme.palette.name === "dark") ? 'rgba(136, 176, 255, 0.2)' : 'rgba(67, 96, 223, 0.2)',
                            borderColor: (Theme.palette.name === "dark") ? 'rgba(136, 176, 255, 1)' : 'rgba(67, 96, 223, 1)',
                            borderWidth: 3,
                            pointRadius: 0,
                            //data: d.generateData()
                        }]
                }
            }

            chart.chartOptions: {
                return {
                    maintainAspectRatio: false,
                    responsive: true,
                    legend: {
                        display: false
                    },
                    //TODO enable zoom
                    //                zoom: {
                    //                    enabled: true,
                    //                    drag: true,
                    //                    speed: 0.1,
                    //                    threshold: 2
                    //                },
                    //                pan:{enabled:true,mode:'x'},
                    tooltips: {
                        intersect: false,
                        displayColors: false,
                        callbacks: {
                            footer: function(tooltipItem, data) { return 'Vol: $43,042,678,876'; },
                            label: function(tooltipItem, data) {
                                let label = data.datasets[tooltipItem.datasetIndex].label || '';
                                if (label) {
                                    label += ': ';
                                }
                                label += tooltipItem.yLabel.toFixed(2);
                                return label.slice(0,label.indexOf(":")+1)+ " $"+label.slice(label.indexOf(":")+2, label.length);
                            }
                        }
                    },
                    scales: {
                        xAxes: [{
                                id: 'x-axis-1',
                                position: 'bottom',
                                gridLines: {
                                    drawOnChartArea: false,
                                    drawBorder: false,
                                    drawTicks: false,
                                },
                                ticks: {
                                    fontSize: 10,
                                    fontColor: (Theme.palette.name === "dark") ? '#909090' : '#939BA1',
                                    padding: 16
                                }
                            }],
                        yAxes: [{
                                position: 'left',
                                id: 'y-axis-1',
                                gridLines: {
                                    borderDash: [8, 4],
                                    drawBorder: false,
                                    drawTicks: false,
                                    color: (Theme.palette.name === "dark") ? '#909090' : '#939BA1'
                                },
                                beforeDataLimits: (axis) => {
                                    axis.paddingTop = 25;
                                    axis.paddingBottom = 0;
                                },
                                ticks: {
                                    fontSize: 10,
                                    fontColor: (Theme.palette.name === "dark") ? '#909090' : '#939BA1',
                                    padding: 8,
                                    min: d.minStep,
                                    max: d.maxStep,
                                    stepSize: d.stepSize,
                                    callback: function(value, index, ticks) {
                                        return '$' + value;
                                    },
                                }
                            }]
                    }
                }
            }
        }
    }

    LogsAndControlsPanel {
        id: logsAndControlsPanel

        SplitView.minimumHeight: 100
        SplitView.preferredHeight: 150
    }
}

// category: Panels