<template>
  <highcharts :options="chartOptions" />
</template>

<script>
import { setCategories } from './helpers';
import { Chart } from 'highcharts-vue';

export default {
  components: {
    highcharts: Chart,
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    timeScale: {
      type: String,
      default: 'hour',
    },
    warning: {
      type: Number,
      default: 70,
    },
    nonNormal: {
      type: Number,
      default: 70,
    },
    criticalStart: {
      type: Number,
      default: 70,
    },
  },
  computed: {
    metricData() {
      let filteredData = this.data.filter((metric) => {
        return metric.MetricValue !== 'nan';
      });

      let transform = filteredData.map((metric) => {
        let date = new Date(metric.Timestamp);
        let time =
          date.getHours() + ':' + String(date.getMinutes()).padStart(2, '0');
        return {
          ...metric,
          Timestamp: time,
          MetricValue: Math.round(metric.MetricValue),
        };
      });

      let group = transform.reduce(function (rv, x) {
        (rv[x['MetricProperty']] = rv[x['MetricProperty']] || []).push(x);
        return rv;
      }, {});

      let metricArr = Object.keys(group).map((key) => {
        let groupTime = group[key].reduce(function (rv, x) {
          (rv[x['Timestamp']] = rv[x['Timestamp']] || []).push(x);
          return rv;
        }, {});

        let arr = Object.keys(groupTime).map((key) => {
          const findAverage = (arr) => {
            const { length } = arr;
            return arr.reduce((acc, val) => {
              return Math.round(acc + val.MetricValue / length);
            }, 0);
          };
          return findAverage(groupTime[key]);
        });

        return {
          name: key,
          data: arr.slice(-60),
        };
      });

      return metricArr;
    },

    metricTime() {
      let filteredData = this.data.filter((metric) => {
        return metric.MetricValue !== 'nan';
      });

      let transform = filteredData.map((metric) => {
        let date = new Date(metric.Timestamp);
        let time =
          date.getHours() + ':' + String(date.getMinutes()).padStart(2, '0');
        return {
          ...metric,
          Timestamp: time,
          MetricValue: Math.round(metric.MetricValue),
        };
      });

      let timeGroup = transform.reduce(function (rv, x) {
        (rv[x['Timestamp']] = rv[x['Timestamp']] || []).push(x);
        return rv;
      }, {});

      let timeArr = Object.keys(timeGroup).slice(-60);

      return timeArr;
    },

    chartOptions() {
      return {
        chart: {
          type: 'line',
          margin: [12, 50, 32, 60],
          height: '320px',
        },
        title: null,
        xAxis: {
          categories: this.metricTime,
          title: null,
          labels: {
            step: 10,
          },
          minorGridLineColor: '#1A3E5B1A',
        },
        yAxis: {
          categories: setCategories(101, 'С°'),
          min: 0,
          max: 100,
          title: null,
          minTickInterval: 25,
          minorGridLineColor: '#1A3E5B1A',
          plotLines: [
            {
              color: '#E11717',
              dashStyle: 'solid',
              value: this.warning,
              zIndex: '1000',
              width: 2,
              label: {
                text: 'Пороговое значение предупреждения, С°',
                align: 'right',
                style: {
                  fontFamily: 'Inter, sans-serif',
                  fontSize: '12px',
                  fontStyle: 'normal',
                  fontWeight: '400',
                  lineHeight: '16px',
                  color: '#0C1C2999',
                },
              },
            },
          ],
          plotBands: [
            {
              color: '#F0AC0C1A',
              dashStyle: 'solid',
              from: this.nonNormal,
              to: this.criticalStart,
            },
            {
              color: '#FF41411A',
              dashStyle: 'solid',
              from: this.criticalStart,
              to: this.warning,
            },
          ],
        },
        series: this.metricData.map((item) => ({
          ...item,
          marker: {
            enabled: false,
          },
        })),
        legend: {
          enabled: false,
        },
        tooltip: {
          enabled: false,
          crosshairs: false,
        },
        plotOptions: {
          series: {
            showInLegend: true,
          },
        },
      };
    },
  },
};
</script>
<style lang="scss">
.highcharts-credits {
  display: none;
}

.highcharts-plot-line-label {
  transform: translate(-8px, 0) !important;
}
</style>
