<template>
  <div>
    <div class="widget-container">
      <div :id="'highChart' + widgetId" style="display: flex; justify-content: center;"></div>
    </div>
    <full-screen-modal
      ref="madsModal"
      :visualProperties="visualProperties"
      :series="series"
      :timezone="timezone"
      :category="category"
      :title="title">
    </full-screen-modal>
  </div>
</template>

<script>

import Highcharts from 'highcharts'
import Exporting from 'highcharts/modules/exporting'
import StockInit from 'highcharts/modules/stock'
import hcMore from 'highcharts/highcharts-more'
import solidgauge from 'highcharts/modules/solid-gauge'
import Boost from 'highcharts/modules/boost'
import ExportData from 'highcharts/modules/export-data'
import NoData from 'highcharts/modules/no-data-to-display'
import FullScreenModal from './fullScreenModal.vue'

Exporting(Highcharts)
StockInit(Highcharts)
hcMore(Highcharts)
solidgauge(Highcharts)
Boost(Highcharts)
ExportData(Highcharts)
NoData(Highcharts)

Highcharts.theme = {
  'colors': ['#2980b9', '#2ecc71', '#f1c40f', '#2c3e50', '#7f8c8d'],
  'chart': {
    'style': {
      'fontFamily': 'Roboto',
      'color': '#666666'
    }
  },
  'title': {
    'align': 'left',
    'style': {
      'fontFamily': 'Roboto Condensed',
      'fontWeight': 'bold'
    }
  },
  'subtitle': {
    'align': 'left',
    'style': {
      'fontFamily': 'Roboto Condensed'
    }
  },
  'legend': {
    'align': 'right',
    'verticalAlign': 'bottom',
    'itemStyle': {
      'fontSize': '14px',
      'fontFamily': '"Nunito Sans", sans-serif',
      'font-weight': 'bold'
    }
  },
  'xAxis': {
    'gridLineWidth': 0,
    'labels': {
      'style': {
        'fontSize': '12px',
        'fontFamily': '"Nunito Sans", sans-serif'
      }
    },
    'title': {
      'style': {
        'fontSize': '14px',
        'fontFamily': '"Nunito Sans", sans-serif',
        'fontWeight': 'bold'
      }
    }
  },
  'yAxis': {
    'gridLineColor': '#F3F3F3',
    'lineColor': '#F3F3F3',
    'minorGridLineColor': '#F3F3F3',
    'tickColor': '#F3F3F3',
    'tickWidth': 1,
    'labels': {
      'style': {
        'fontSize': '12px',
        'fontFamily': '"Nunito Sans", sans-serif'
      }
    },
    'title': {
      'style': {
        'fontSize': '14px',
        'fontFamily': '"Nunito Sans", sans-serif',
        'font-weight': 'bold'
      }
    }
  },
  'plotOptions': {
    'line': {
      'marker': {
        'enabled': false
      }
    },
    'spline': {
      'marker': {
        'enabled': false
      }
    },
    'area': {
      'marker': {
        'enabled': false
      }
    },
    'areaspline': {
      'marker': {
        'enabled': false
      }
    },
    'arearange': {
      'marker': {
        'enabled': false
      }
    },
    'bubble': {
      'maxSize': '10%'
    }
  },
  'tooltip': {
    'style': {
      'fontSize': '12px',
      'fontFamily': '"Nunito Sans", sans-serif'
    }
  }
}

export default {
  components: {
    FullScreenModal
  },
  props: {
    visualProperties: {
      type: Object,
      required: true
    },
    series: {
      type: Array,
      required: true
    },
    widgetId: {
      type: String,
      required: true
    },
    category: {
      type: String,
      default: 'highchart'
    },
    page: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      required: true
    },
    height: {
      type: Number,
      required: true
    },
    timezone: {
      type: String
    },
    title: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      widget: null
    }
  },
  methods: {
    generateWidget () {
      let widgetOptions = this.$_.merge(
        this.visualProperties,
        {
          time: {
            timezone: this.timezone
          },
          caption: {
            text: ''
          },
          boost: {
            useGPUTranslations: true
          },
          plotOptions: {
            line: {
              marker: {
                enabled: false
              }
            },
            series: {
              showInNavigator: true
            }
          },
          rangeSelector: {
            enabled: false
          },
          title: {
            style: {
              display: 'none'
            }
          },
          subtitle: {
            style: {
              display: 'none'
            }
          },
          navigation: {
            buttonOptions: {
              enabled: false
            }
          },
          credits: {
            enabled: false
          },
          lang: {
            noData: 'No Data available'
          }
        }
      )

      let series = this.series
      this.$_.map(series, (serie) => {
        return this.$_.merge({}, serie, {
          data: this.$_.reverse(serie.data)
        })
      })

      widgetOptions = this.$_.assign(widgetOptions, {
        series: series
      })

      if (this.category === 'stock_chart') {
        this.widget = Highcharts.stockChart('highChart' + this.widgetId, widgetOptions)
      } else {
        this.widget = Highcharts.chart('highChart' + this.widgetId, widgetOptions)
      }

      Highcharts.setOptions(Highcharts.theme)
    },
    viewFullScreen () {
      this.$refs.madsModal.$refs.fullScreenModalRef.show()
    },
    downloadCSV () {
      this.widget.downloadCSV()
    },
    viewData () {
      this.widget.toggleDataTable()
    },
    downloadXLS () {
      this.widget.downloadXLS()
    },
    printChart () {
      this.widget.print()
    },
    downloadPNG () {
      this.widget.exportChart()
    },
    downloadJPEG () {
      this.widget.exportChart({
        type: 'image/jpeg'
      })
    },
    downloadPDF () {
      this.widget.exportChart({
        type: 'application/pdf'
      })
    },
    downloadSVG () {
      this.widget.exportChart({
        type: 'image/svg+xml'
      })
    },
    resizeWidget (width, height) {
      setTimeout(() => {
        this.widget.setSize(width, height)
      }, 10)
    },
    addDataPoint (point, index) {
      this.widget.series[index].addPoint(point, true, true)
    },
    updateSeriesData (data, index) {
      this.widget.series[index].update({
        data: data
      }, true)
    },
    getCardBackgroundColor () {
      return this.visualProperties.chart ? this.visualProperties.chart.backgroundColor : '#ffffff'
    },
    getSVG () {
      return this.widget.getSVG()
    }
  },
  watch: {
    series (value) {
      this.generateWidget()
      this.resizeWidget(this.width, this.height)
      // this.$_.forEach(this.series, (serie) => {
      //   this.widget.addSeries(serie, false)
      // })
      // this.widget.redraw()
    }
  },
  mounted () {
    this.generateWidget()
    this.resizeWidget(this.width, this.height)
  }
}
</script>

<style lang="scss" scoped>
.widget-container {
  position: relative;
  background-color: transparent;
  .centered-loader {
    position: absolute;
    top: 50%;
    left: 50%;
  }
}
</style>

<style lang="scss">
  .highcharts-background, .highcharts-plot-background {
    fill: none;
  }
  .highcharts-caption {
    background-color: #e0e0e0;
  }
  .highcharts-label.highcharts-data-label {
    .highcharts-label-box.highcharts-data-label-box {
      display: none;
    }
    text {
      font-size: 30px !important;
      font-family: 'Nunito Sans', sans-serif;
      .highcharts-text-outline {
        stroke: none;
        fill: none;
      }
    }

  }
</style>
