<template>
  <div class="multi-line-widget-wrap h-100">
    <div class="widget-container">
      <div :id="'highChart' + widgetId"></div>
    </div>
    <div class="status-wrap" v-if="isDataAvailable() && this.visualProperties.bands.length">
      <span class="text">{{series[0].name}} Status</span>
      <span class="status" :style="statusStyles">{{statusText}}</span>
    </div>
  </div>
</template>

<script>
import Highcharts from 'highcharts'

const options = {
  chart: {
    type: 'spline',
    backgroundColor: 'transparent'
  },
  legend: {
    align: 'right'
  },
  title: {
    text: ''
  },
  xAxis: {
    type: 'datetime'
  },
  plotOptions: {
    spline: {
      marker: {
        enabled: false
      }
    }
  }
}

export default {
  data () {
    return {
      chartOptions: options,
      widget: null,
      statusText: '',
      statusStyles: null
    }
  },
  props: {
    visualProperties: {
      type: Object,
      required: true
    },
    series: {
      type: Array,
      required: true
    },
    widgetId: {
      type: String,
      required: true
    },
    timezone: {
      type: String
    },
    width: {
      type: Number,
      required: true
    },
    height: {
      type: Number,
      required: true
    }
  },
  methods: {
    createWidgetOptions () {
      let plotLines = this.visualProperties.threshold_lines
      let zones = this.visualProperties.bands

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

      this.chartOptions = this.$_.merge({}, this.chartOptions, {
        time: {
          timezone: this.timezone
        },
        yAxis: {
          plotLines: plotLines,
          title: {
            text: this.series[0].name
          }
        },
        plotOptions: {
          series: {
            zones: zones
          }
        },
        series: series
      })
    },
    loadChart () {
      this.widget = Highcharts.chart('highChart' + this.widgetId, this.chartOptions)
    },
    resizeWidget (width, height) {
      setTimeout(() => {
        this.widget.setSize(width, height - 50)
      }, 10)
    },
    addDataPoint (point, index) {
      this.widget.series[index].addPoint(point, true, true)
      this.statusText = this.getBandStatusByData(point[1])
      this.getStatusTexteStyle(this.statusText)
    },
    updateSeriesData (data, index) {
      this.widget.series[index].update({
        data: data
      }, true)
    },
    getBandStatusByData (data) {
      let statusText = ''
      this.$_.forEach(this.visualProperties.bands, (band) => {
        if (!statusText && data < band.value) {
          statusText = band.statusText
        }
      })
      return statusText
    },
    setStatusText () {
      if (this.series[0].data[0]) {
        const latestDataPoint = (this.series[0].data[0])[1]
        this.statusText = this.getBandStatusByData(latestDataPoint)
        this.getStatusTexteStyle(this.statusText)
      }
    },
    isDataAvailable () {
      return this.series[0] && this.series[0].data && this.series[0].data.length
    },
    getStatusTexteStyle (statusText) {
      let bands = this.visualProperties.bands.find(obj => obj.statusText === statusText)
      let style = bands.text_settings
      this.statusStyles = {
        color: style.fontColor,
        fontSize: style.fontSize,
        textAlign: style.align,
        fontWeight: style.decorations.isBold ? 'bold' : '',
        fontStyle: style.decorations.isItalic ? 'italic' : '',
        textDecoration: style.decorations.isUnderline ? 'underline' : ''
      }
    }
  },
  mounted () {
    this.setStatusText()
    this.createWidgetOptions()
    this.loadChart()
    this.resizeWidget(this.width, this.height)
  }
}
</script>

<style lang="scss" scoped>
  .multi-line-widget-wrap {
    .widget-container {
      background-color: transparent;
    }
    .status-wrap {
      .text {
        color: #454545;
        font-weight: bold;
      }
      .status {
        min-width: 60px;
        height: 30px;
        border-radius: 8px;
        padding: 10px;
        display: inline-block;
        background-color: #4EBF3C;
        border: 2px solid #38AE24;
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
</style>

<style lang="scss">
.highcharts-grid, .highcharts-contextbutton {
   display: none;
}

.highcharts-yaxis .highcharts-axis-line {
  stroke-width: 1px;
}

.highcharts-axis .highcharts-axis-line {
  stroke: rgba(143, 143, 143, 0.3);
}

.highcharts-credits {
  display: none;
}

</style>
