<template>
  <v-card color="main_accent" outlined>
    <div>
      <p></p>
      <h3 align="center">Times by type PAID and TimetrackAccount</h3>
      <div id="chart">
        <apexchart class="ma-5" type="donut" width="100%" :options="chartOptions" :series="series"></apexchart>
      </div>
    </div>
  </v-card>
</template>

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

export default {
  components: {
    apexchart: VueApexCharts
  },
  computed: {
    chartOptions: function() {
      return{labels: ["Working hours", "Pause hours"],
      chart: {
        type: "donut",
        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"
        }
      },
      tooltip: {
        enabled: true,
        followCursor: true,
        fillSeriesColor: false,
        x: {
          show: false
        },
        y: {
          formatter: (value) => {
            var revenueTMP = 0;
            for (let index = 0; index < this.series.length; index++) {
              if (value == this.series[index]) {
                revenueTMP = this.revenue[index];
              }
            }
            revenueTMP = revenueTMP / 60 * value * 1.00;
            revenueTMP = Math.round(revenueTMP * 100) / 100;
            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 + " with " + revenueTMP + "$ revenue.";
          }
        }
      },
      colors: ["#0096ff", "#e21d1f", "#03ac13", "#800080", "#f9d71c", "ff1694"],
      theme: {
        mode: "dark"
      },
      legend: {
        show: false,
        position: "left",
        offsetY: 40
      },

      responsive: [
        {
          breakpoint: 480,
          options: {
            chart: {
              width: 300
            },
            legend: {
              position: "bottom"
            }
          }
        }
      ]
    }}
  },
  data: () => ({
    series: [0, 0],
    revenue: [0, 0],
  }),
  created() {
    // Get all Timetrack accounts for the current user
    var accounts;
    var timeTrackAccountsTMP;
    var accountxhttp = new XMLHttpRequest();
    accountxhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        accounts = JSON.parse(accountxhttp.responseText);
        timeTrackAccountsTMP = accounts._embedded.accounts;
      }
    };
    accountxhttp.open(
      "GET",
      baseUri +
        "/accounts/search/findByUsername?username=" +
        sessionStorage.getItem("username"),
      false
    );

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

    accountxhttp.send(null);

    this.chartOptions.labels = new Array(timeTrackAccountsTMP.length);

    this.series = new Array(timeTrackAccountsTMP.length);
    this.revenue = new Array(timeTrackAccountsTMP.length);
    for (let index = 0; index < this.series.length; index++) {
      this.series[index] = 0;
      this.revenue[index] = 0;
    }

    for (let index = 0; index < timeTrackAccountsTMP.length; index++) {
      this.chartOptions.labels[index] = timeTrackAccountsTMP[index].name;
      this.revenue[index] = timeTrackAccountsTMP[index].revenue;
    }

    // Get and sort all Records to the accounts
    var xhttp = new XMLHttpRequest();
    var records;
    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/allForUser?username=" +
        sessionStorage.getItem("username") +
        "&projection=overview" +
        "&size=1000",
      false
    );

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

    xhttp.send(null);

    for (let index = 0; index < records.length; index++) {
      var record = records[index];
      for (let indexAccs = 0; indexAccs < this.chartOptions.labels.length; indexAccs++) {
        if (record.account == this.chartOptions.labels[indexAccs] && record.type == "PAID") {
          this.series[indexAccs] += record.duration;
        }
      }
    }
  }
};
</script>


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