<template>
  <v-card color="main_accent" outlined>
    <div>
      <p></p>
      <h3 align="center">My last 30 Days</h3>
      <div id="chart">
        <apexchart class="ma-5" type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
      </div>
    </div>
  </v-card>
</template>


<script>
import VueApexCharts from "vue-apexcharts";
import { baseUri } from "../../variables.js";

export default {
  name: "MonthSummary",
  components: {
    apexchart: VueApexCharts
  },
  data() {
    return {
      series: [
        {
          name: "Working Hours",
          data: []
        },
        {
          name: "Pause Hours",
          data: []
        }
      ],
      chartOptions: {
        chart: {
          type: "bar",
          stacked: true,
          background: "#202020",
          toolbar: {
            show: true,
            offsetX: 0,
            offsetY: 0,
            tools: {
              download: true,
              selection: true,
              zoom: false,
              zoomin: false,
              zoomout: false,
              pan: false,
              reset: false,
              customIcons: []
            },
            autoSelected: "zoom"
          }
        },
        colors: ["#0096ff", "#e21d1f", "#546E7A", "#E91E63", "#FF9800"],
        theme: {
          mode: "dark"
        },
        dataLabels: {
          enabled: false
        },
        tooltip: {
          enabled: true,
          followCursor: true,
          x: {
            show: true
          },
          y: {
            formatter: function(value) {
              var decimalTimeString = value;
              var decimalTime = parseFloat(decimalTimeString);
              decimalTime = decimalTime * 60;
              var hours = Math.floor(decimalTime / (60 * 60));
              decimalTime = decimalTime - hours * 60 * 60;
              var minutes = Math.floor(decimalTime / 60);
              decimalTime = decimalTime - minutes * 60;
              var seconds = Math.round(decimalTime);
              if (hours < 10) {
                hours = "0" + hours;
              }
              if (minutes < 10) {
                minutes = "0" + minutes;
              }
              if (seconds < 10) {
                seconds = "0" + seconds;
              }
              return hours + ":" + minutes + ":" + seconds;
            }
          }
        },
        responsive: [
          {
            breakpoint: 480,
            options: {
              legend: {
                position: "bottom",
                offsetX: -10,
                offsetY: 0
              }
            }
          }
        ],
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: "50%"
          }
        },
        xaxis: {
          type: "datetime",
          categories: []
        },
        legend: {
          show: false,
          position: "left",
          offsetY: 40
        },
        fill: {
          opacity: 1
        }
      }
    };
  },
  created() {
    var daysToDisplay = 31;
    var xhttp = new XMLHttpRequest();
    var records;
    this.chartOptions.xaxis.categories = new Array(daysToDisplay);
    this.series[0].data = new Array(daysToDisplay);
    this.series[1].data = new Array(daysToDisplay);

    for (let index = 0; index < daysToDisplay; index++) {
      this.series[0].data[index] = 0;
      this.series[1].data[index] = 0;
    }
    var today = new Date();
    var dd = String(today.getDate()).padStart(2, "0");
    var mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
    var yyyy = today.getFullYear();

    for (let index = 0; index < daysToDisplay; index++) {
      var lastSeven = new Date();
      lastSeven.setDate(today.getDate() - index);
      var ddS = String(lastSeven.getDate()).padStart(2, "0");
      var mmS = String(lastSeven.getMonth() + 1).padStart(2, "0"); //January is 0!
      var yyyyS = lastSeven.getFullYear();
      this.chartOptions.xaxis.categories[index] = yyyyS + "-" + mmS + "-" + ddS;
    }
    today = yyyy + "-" + mm + "-" + dd;

    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var recordsDB = JSON.parse(xhttp.responseText);

        records = recordsDB._embedded.records;
      }
    };
    xhttp.open(
      "GET",
      baseUri +
        "/records/search/allBetweenAndUser?start=" +
        this.chartOptions.xaxis.categories[daysToDisplay - 1] +
        "T00:00:01" +
        "&end=" +
        today +
        "T00:00:01" +
        "&username=" +
        sessionStorage.getItem("username") +
        "&size=50",
      false
    );

    xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));

    xhttp.send(null);

    for (let index = 0; index < records.length; index++) {
      var record = records[index];

      for (let indexA = 0; indexA < daysToDisplay; indexA++) {
        if (record.startdate.split("T")[0] == this.chartOptions.xaxis.categories[indexA]) {
          if (record.type == "PAID") {
            this.series[0].data[indexA] += record.duration;
          } else {
            this.series[1].data[indexA] += record.duration;
          }
        }
      }
    }
    // Dirty fix for known bug from apexcharts
    this.series[0].data[daysToDisplay - 1] = 0;
    this.series[1].data[daysToDisplay - 1] = 0;
  }
};
</script>

<style scoped>
.v-card {
  border-radius: 20px !important;
}
</style>