<script>
import _ from 'underscore';
import dateFormat from 'dateformat';
import { mapState, mapGetters, mapActions } from 'vuex';
import GlLineChart from '@gitlab/ui/dist/components/charts/line/line';
import { __ } from '~/locale';
import ChartTooltip from './vulnerability_chart_tooltip.vue';
import ChartButtons from './vulnerability_chart_buttons.vue';
import { DAY_IN_MS, DAYS } from '../store/modules/vulnerabilities/constants';
import { SEVERITY_LEVELS } from '../store/constants';
import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';

export default {
  name: 'VulnerabilityChart',
  components: {
    GlLineChart,
    ChartTooltip,
    ChartButtons,
    ResizableChartContainer,
  },
  DAYS,
  data: () => ({
    tooltipTitle: '',
    tooltipEntries: [],
    lines: [
      {
        name: SEVERITY_LEVELS.critical,
        color: '#C0341D',
      },
      {
        name: SEVERITY_LEVELS.high,
        color: '#DE7E00',
      },
      {
        name: SEVERITY_LEVELS.medium,
        color: '#6E49CB',
      },
      {
        name: SEVERITY_LEVELS.low,
        color: '#4F4F4F',
      },
      {
        name: __('Total'),
        color: '#1F78D1',
      },
    ],
  }),
  computed: {
    ...mapState('vulnerabilities', [
      'vulnerabilitiesHistory',
      'vulnerabilitiesHistoryDayRange',
      'vulnerabilitiesHistoryMaxDayInterval',
    ]),
    ...mapGetters('vulnerabilities', ['getFilteredVulnerabilitiesHistory']),
    series() {
      return this.lines.map(line => {
        const { name, color } = line;
        const data = this.getFilteredVulnerabilitiesHistory(name);

        return {
          color,
          lineStyle: {
            color,
          },
          data,
          name,
        };
      });
    },
    options() {
      return {
        grid: {
          bottom: 70,
          left: 75,
          right: 15,
          top: 10,
        },
        tooltip: {
          formatter: this.renderTooltip,
          padding: 0,
          trigger: 'axis',
        },
        xAxis: {
          axisLabel: {
            color: '#707070',
            formatter: date => dateFormat(date, 'd mmm'),
            margin: 8,
          },
          maxInterval: DAY_IN_MS * this.vulnerabilitiesHistoryMaxDayInterval,
          min: Date.now() - DAY_IN_MS * this.vulnerabilitiesHistoryDayRange,
          name: 'Date',
          nameGap: 35,
          nameLocation: 'center',
          nameTextStyle: {
            color: '#2e2e2e',
            fontWeight: 'bold',
          },
          type: 'time',
        },
        yAxis: {
          axisLabel: {
            color: '#707070',
          },
          boundaryGap: [0, '5%'],
          name: 'Vulnerabilities',
          nameGap: 42,
          nameLocation: 'center',
          nameRotation: 90,
          nameTextStyle: {
            color: '#2e2e2e',
            fontWeight: 'bold',
          },
          minInterval: 1,
          type: 'value',
        },
      };
    },
    days() {
      const { $options } = this;
      return [$options.DAYS.THIRTY, $options.DAYS.SIXTY, $options.DAYS.NINETY];
    },
  },
  methods: {
    ...mapActions('vulnerabilities', ['setVulnerabilitiesHistoryDayRange']),
    noop: _.noop, // Used to tell line-chart to render external tooltip
    renderTooltip(params) {
      this.tooltipTitle = dateFormat(params[0].axisValue, 'd mmmm');
      this.tooltipEntries = params;
      return ' ';
    },
  },
};
</script>

<template>
  <div>
    <div class="d-flex justify-content-between">
      <h4 class="my-4">{{ __('Vulnerability Chart') }}</h4>

      <div class="align-self-center">
        <chart-buttons
          :days="days"
          :active-day="vulnerabilitiesHistoryDayRange"
          @click="setVulnerabilitiesHistoryDayRange"
        />
      </div>
    </div>

    <div class="vulnerabilities-chart">
      <div class="vulnerabilities-chart-wrapper">
        <resizable-chart-container>
          <gl-line-chart
            slot-scope="{ width }"
            :width="width"
            :option="options"
            :data="series"
            :format-tooltip-text="noop"
            :include-legend-avg-max="false"
          >
            <span slot="tooltipTitle">{{ tooltipTitle }}</span>
            <chart-tooltip slot="tooltipContent" :entries="tooltipEntries" />
          </gl-line-chart>
        </resizable-chart-container>
      </div>
    </div>
  </div>
</template>
