<template>
  <div class="utility-chart-total" v-if="props.stats">
    <div class="heading">
      <h4>Total Utility Damage</h4>
    </div>
    <div id="utility-chart-total"></div>
    <hr>
  </div>
</template>

<script>
import * as echarts from 'echarts/core';
import {GridComponent, LegendComponent, TooltipComponent} from 'echarts/components';
import {BarChart} from 'echarts/charts';
import {CanvasRenderer} from 'echarts/renderers';
import {onMounted} from "vue";

export default {
  name: "FlashChart",
  props: {
    stats: {
      type: Object,
      required: true
    },
  },
  setup(props) {
    const checkStatEmpty = (stat) => {
      if (stat)
        return stat
      else
        return 0
    }

    const seriesArr = (stats) => {
      let arr = []
      for (let i = 0; i < stats.length; i++) {
        const sum = checkStatEmpty(stats[i].dmg.ud.flames) + checkStatEmpty(stats[i].dmg.ud.flash) + checkStatEmpty(stats[i].dmg.ud.he) + checkStatEmpty(stats[i].dmg.ud.smoke)

        if (sum !== 0) {
          arr.push({
            name: stats[i].player.name,
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [sum]
          })
        }
      }

      arr.sort((a, b) => parseFloat(b.data[0]) - parseFloat(a.data[0]))

      return arr
    }

    onMounted(() => {
      echarts.use([
        TooltipComponent,
        GridComponent,
        LegendComponent,
        BarChart,
        CanvasRenderer
      ]);

      let myChart = echarts.init(document.getElementById('utility-chart-total'), {}, {width: 800, height: 200});
      let option

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line'
          }
        },
        // color: ['#143147', '#39546c', '#617a94', '#89a2bd', '#b3cce8', '#eac65c', '#bd9d2c', '#917501', '#685000', '#412c00'],
        // color: ['#003470', '#005a9b', '#0982c7', '#4bace5', '#90d3fe', '#febf4a', '#d7931c', '#ac6a01', '#804400', '#572000'],
        // color: ['#888F98', '#10121A', '#1B2732', '#5F7892', '#C3A235'],
        legend: {
          textStyle: {
            color: 'white'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['Total']
        },
        aria: {
          enabled: true,
          show: true,
          decal: {
            show: true
          }
        },

        series: seriesArr(props.stats)
      };

      myChart.setOption(option);
    })

    return {props}
  }
}
</script>

<style lang="scss" scoped>
.utility-chart-total {
  .heading {
    display: flex;
    margin-top: 10px;
    margin-bottom: -30px;

    h4 {
      margin: 7px auto 0;
    }
  }

  p {
    padding-top: 40px;
    margin-bottom: -20px;
  }
}

#utility-chart-total {
  margin: 40px 0;
}
</style>
