import { Component } from 'react'

import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'
import PropTypes from 'prop-types'

import { Queue } from '../../utils/Queue'

let statusDone = false
let statusClosed = false

export function setStatusDone () {
  statusDone = true
}

export function setStatusClosed () {
  statusClosed = true
}

export function isStatusDone () {
  return statusDone
}

export function isStatusClosed () {
  return statusClosed
}

class Graph extends Component {
  pointList = new Queue()

  addPointToQueue = (id, point) => {
    this.pointList.enqueue(point)
  }

  constructor (props) {
    super(props)
    const datapoint = props.datapoint
    const pointList = this.pointList
    let myInterval = null
    this.state = {
      options: {
        accessibility: {
          enabled: false
        },
        chart: {
          events: {
            load: function () {
              // set up the updating of the chart each second
              const chart = this
              const series = this.series[0]
              const starttime = Date.now()

              function addPoints () {
                while (!pointList.isEmpty()) {
                  if (statusClosed) {
                    clearInterval(myInterval)
                    return
                  }
                  const xmax = chart.xAxis[0].max
                  const xmin = chart.xAxis[0].min
                  const xshift = (xmax - xmin) * 0.2
                  const point = pointList.peek()
                  const x = parseFloat(point[0])
                  if (x > xmax) {
                    chart.xAxis[0].update({
                      max: xmax + xshift,
                      min: xmin + xshift
                    })
                  }
                  const timediff = starttime + x * 1000 - Date.now()
                  if (timediff > 0) {
                    chart.redraw()
                    return
                  }
                  series.addPoint(point)
                  pointList.dequeue()
                }
                chart.redraw()
                if ((pointList.isEmpty() && statusDone) || statusClosed) {
                  clearInterval(myInterval)
                }
              }
              statusDone = false
              statusClosed = false
              myInterval = setInterval(addPoints, 450)
            }
          },
          type: datapoint.datapointType,
          showAxes: true,
          animation: false,
          zoomType: 'xy',
          options3d: {
            enabled: true,
            alpha: datapoint.datapointAlpha,
            beta: datapoint.datapointBeta,
            depth: 100,
            viewDistance: 100,
            frame: {
              bottom: {
                size: 0,
                color: '#FFFFFF'
              },
              back: {
                size: 0,
                color: '#FFFFFF'
              },
              side: {
                size: 0,
                color: '#FFFFFF'
              }
            }
          }
        },
        colorAxis: {
          dataClasses: datapoint.datapointDataClasses
        },
        lang: {
          noData: 'No data to display'
        },
        legend: {
          enabled: false
        },
        plotOptions: {
          marker: {
            enabled: false
          },
          column: {
            pointPlacement: 0,
            pointRange: datapoint.datapointPointRange
          },
          series: {
            lineWidth: datapoint.datapointLineWidth,
            pointWidth: datapoint.datapointPointWidth,
            enableMouseTracking: false,
            states: {
              hover: {
                lineWidth: datapoint.datapointLineWidth
              }
            }
          },
          scatter: {
            marker: {
              radius: datapoint.datapointRadius,
              states: {
                hover: {
                  enabled: true,
                  lineColor: 'rgb(100,100,100)'
                }
              }
            }
          }
        },
        series: [
          {
            data: []
          }
        ],
        title: {
          text: datapoint.datapointTitle
        },
        tooltip: {
          enabled: false
        },
        xAxis: {
          title: {
            style: {
              fontWeight: 'bold',
              fontSize: '15px'
            },
            text: 'x'
          },
          gridLineWidth: 1,
          startOnTick: true,
          endOnTick: true,
          showLastLabel: true,
          min: parseFloat(datapoint.datapointXMin),
          max: parseFloat(datapoint.datapointXMax)
        },
        yAxis: {
          tickInterval: (datapoint.datapointYMax - datapoint.datapointYMin) / 4,
          title: {
            rotation: 0,
            style: {
              fontWeight: 'bold',
              fontSize: '15px'
            },
            text: 'y'
          },
          gridLineWidth: 1,
          min: parseFloat(datapoint.datapointYMin),
          max: parseFloat(datapoint.datapointYMax),
          plotLines: [
            {
              width: 2,
              color: '#808080'
            }
          ]
        },
        zAxis: {
          title: {
            rotation: 300,
            margin: -30,
            style: {
              fontWeight: 'bold',
              fontSize: '15px'
            },
            text: 'z'
          },
          gridLineWidth: 1,
          min: parseFloat(datapoint.datapointZMin),
          max: parseFloat(datapoint.datapointZMax)
        }
      }
    }
  }

  render () {
    return (
      <div>
        <HighchartsReact highcharts={Highcharts} options={this.state.options} />
      </div>
    )
  }
}

Graph.propTypes = {
  datapoint: PropTypes.object
}

export default Graph