import "moment"
    import { Chart } from "chart.js"
    import "hammerjs"
    import "chartjs-plugin-annotation"
    import "chartjs-plugin-zoom"


    /// The main component of web-plots. The plot ties together sever chart
    /// objects from the chart.js module.
    export const Plot = class {

    constructor(props) {
        // initialize props
        this.props = props
        //global to keep track of rawlrv attributes from manager.js
        this.globlrv = null
        this.desirable= null
        // Initialize state variables
        this.charts = [] // maps ids to a chart
        this.root = document.createElement('ray-plot') // parent node of plot

        // constructs charts and applies properties
        const { plotData } = props
        plotData.forEach(chartData => this.addChart(chartData))
        props.plotData = this.charts.map(chart => {
            return {
                type: chart.type,
                data: chart.data,
                options: chart.options,
            }
        })

        props.backgroundColor.map((color, index) => this.changeBackgroundColor(index, color))

        this.title = props.plotTitle
    }

    set title(title) {
        this.charts[0].options.title.display = title? true: false
        this.charts[0].options.title.text = title
    }


    get title() {
        return this.charts[0].options.title.text
    }

    getProps(){
        return this.props
    }

    changeZoomPanEnabled(chartId, enabled){

        const chart = this.charts[chartId]
        chart.options.zoom.enabled = enabled
        chart.options.pan.enabled = enabled

    }

    changeZoom(chartId, mode){
        this.charts[chartId].options.zoom.mode = mode
        this.charts[chartId].options.pan.mode = mode
    }

    changeBackgroundColor(chartId, color){
        this.charts[chartId]
            .chart
            .canvas
            .parentNode
            .style
            .backgroundColor = color
    }

    changeGridLineColor(chartId, color){
        const scales = this.charts[chartId].scales
        Object.keys(scales)
            .map(key => scales[key])
            .forEach(axis => {
                axis.options.gridLines.color = color
                axis.originalOptions.gridLines.color = color
            })
    }

    changeGridLineDisplay(chartId, display){
        const scales = this.charts[chartId].scales
        Object.keys(scales)
            .map(key => scales[key])
            .forEach(axis => {
                axis.options.gridLines.display = display
                axis.originalOptions.gridLines.display = display
            })
    }

    changeFontColor(chartId, color){
        const chart = this.charts[chartId]
        const scales = chart.scales

        Object.keys(scales)
            .map(key => scales[key])
            .forEach(axis => {
                axis.originalOptions.scaleLabel.fontColor = color
                axis.originalOptions.ticks.fontColor = color
                axis.options.scaleLabel.fontColor = color
                axis.options.ticks.fontColor = color
            })
        chart.options.title.fontColor = color
        chart.options.legend.labels.fontColor = color
    }

    getXAxisMinimum(chartId){
        return this.charts[chartId]
            .options
            .scales
            .xAxes[0]
            .time
            .min
    }

    setXAxisMinimum(chartId, minimum){
        this.charts[chartId]
            .options
            .scales
            .xAxes[0]
            .time
            .min = minimum
    }

    getXAxisMaximum(chartId){
        return this.charts[chartId]
            .options
            .scales
            .xAxes[0]
            .time
            .max
    }

    setXAxisMaximum(chartId, maximum){
        this.charts[chartId]
            .options
            .scales
            .xAxes[0]
            .time
            .max = maximum
    }

    setXAxisLabel(chartId, dataset, title){
        const axis = this.charts[chartId].scales["x-axis-" + dataset]

        const scaleLabel = axis.options.scaleLabel
        scaleLabel.display = title? true:false
        scaleLabel.labelString = title

        const originalScaleLabel = axis.originalOptions.scaleLabel
        originalScaleLabel.display = title? true:false
        originalScaleLabel.labelString = title
    }

    setYAxisLabel(chartId, axisId, title){
        const axis = this.charts[chartId].scales[axisId]

        const scaleLabel = axis.options.scaleLabel
        scaleLabel.display = title? true:false
        scaleLabel.labelString = title

        const originalScaleLabel = axis.originalOptions.scaleLabel
        originalScaleLabel.display = title? true:false
        originalScaleLabel.labelString = title
    }

    getData(chartId, datasetId){
        return this.charts[chartId]
            .data
            .datasets[datasetId]
            .data
    }

    setData(chartId, datasetId, data){
        this.charts[chartId]
            .data
            .datasets[datasetId]
            .data = data
    }

    setPointColor(chartId, datasetId, pointColor){
        this.charts[chartId]
            .data
            .datasets[datasetId]
            .pointBorderColor = pointColor
    }

    getPointColor(chartId, datasetId){
        const dataset = this.charts[chartId]
            .data
            .datasets[datasetId]

        if(dataset.pointBorderColor === undefined){
            dataset.pointBorderColor = []
        }
        return dataset.pointBorderColor
    }

    getChartDatasetInfo(){
        return this.charts.map((chart, index) => [index, chart.data.datasets.length])
    }

    getThreshCallback(chartId, rawLrv){
            var plotOpt = this.charts[chartId].options
            var loRed = parseInt(rawLrv.lowerRedLimit)
            var loYellow = parseInt(rawLrv.lowerYellowLimit)
            var hiRed = parseInt(rawLrv.upperRedLimit)
            var hiYellow = parseInt(rawLrv.upperYellowLimit)
            plotOpt.annotation.annotations = []
            var min = parseInt(this.charts[chartId].scales["y-axis-0"].min)
            var max = parseInt(this.charts[chartId].scales["y-axis-0"].max)



    }

    update(chartId, lrv = null) {
        if(chartId === undefined){
            for(var x = 0; x<this.charts.length; x++){
                this.charts[x].update()
                    }
                }
            else {
            this.charts[chartId].update()

        }

    }

    changeLineSymbol(chartId, datasetId, symbol) {
        const dataset = this.charts[chartId]
            .data
            .datasets[datasetId]

        if(symbol){
            dataset.pointRadius = 6
            dataset.pointStyle = symbol
        } else {
            dataset.pointRadius = 0
        }
    }

    changeLineStyle(chartId, datasetId, style) {
        this.charts[chartId]
            .data
            .datasets[datasetId]
            .borderDash = style
    }

    getLineStyle(chartId, datasetId) {
        return this.charts[chartId]
            .data
            .datasets[datasetId]
            .borderDash
    }

    changeLineColor(chartId, datasetId, color) {
        const dataset = this
            .charts[chartId]
            .data
            .datasets[datasetId]

        dataset.borderColor = color.line
        dataset.backgroundColor = color.fill
    }

    addChart(chartData) {
        const ctx = document.createElement('canvas')
        const container = document.createElement('ray-chart')
        container.appendChild(ctx)


        var ds = chartData.data.datasets
        for(var a = 0;a<ds.length;a++){
        ds[a].borderColor ="rgba(0,255,0,1)"
        }


        const chart = new Chart (ctx, {
            type: chartData.type,
            data: chartData.data,
            options: chartData.options,
        })
        chart.options.annotation= {}



        //default annotations off
        chart.options.annotation.display = false



        container.addEventListener("dblclick", () => {
            if(chart.options.pan.enabled || chart.options.zoom.enabled){
                chart.resetZoom()
            }
        }, false)




        this.charts.push(chart)
        this.root.appendChild(container)
        this.layout()
    }

    // Remove a chart from the stack of charts in the plot.
    removeChart(chartId) {
        const chart = this.charts[chartId]
        this.charts.splice(chartId, 1)
        this.root.removeChild(chart.chart.canvas.parentNode)
        this.layout()
    }

    resetZoom(chartId) {
        const chart = this.charts[chartId]
        if(chart.options.pan.enabled || chart.options.zoom.enabled){
            chart.resetZoom()
        }
    }

    alarm(chartId, togle){
    const chart = this.charts[chartId]
    if(togle =='off'){
    chart.options.annotation = {
    display:false
    }
    chart.update()
    chart.options.annotation = {
    display:false
    }
    }else{
    chart.options.annotation.display = true
    if(this.globlrv !== null){
        this.getThreshCallback(chartId, this.globlrv)
        chart.update()
        this.getThreshCallback(chartId, this.globlrv)
    }
    }
    }

    // Calculates the new height of each chart in the plot and applies
    // the new style.
    layout() {
        const size = 1/this.root.childNodes.length * 100
        Array.from(this.root.childNodes).forEach((node) => {
            node.style.height = size + "%"
        })
    }

    staticPage() {
        const root = document.createElement("div")
        root.style.backgroundColor = this.root.style.backgroundColor
        root.style.position = "absolute"
        this.charts.map(chart => {
                let img = document.createElement("img")
                img.setAttribute("src", chart.toBase64Image())
                img.style.display = "block"
                img.style.backgroundColor = chart.chart.canvas.parentNode.style.backgroundColor
                return img
            })
            .forEach(item => root.appendChild(item))

        const body = document.createElement("body")
        body.appendChild(root)
        const html = document.createElement("html")
        html.appendChild(document.createElement("head"))
        html.appendChild(body)
        return html
    }
}