<template>
  <v-card color="main_accent" outlined>
    <div>
      <p></p>
      <h3 align="center">Times by type PAID and BREAK</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
  },
  data: () => ({
    series: [0, 0],
    chartOptions: {
      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: 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;
          }
        }
      },
      colors: ["#0096ff", "#e21d1f", "#546E7A", "#E91E63", "#FF9800"],
      theme: {
        mode: "dark"
      },
      legend: {
        show: false,
        position: "left",
        offsetY: 40
      },

      responsive: [
        {
          breakpoint: 480,
          options: {
            chart: {
              width: 300
            },
            legend: {
              position: "bottom"
            }
          }
        }
      ]
    }
  }),
  created() {
    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",
      false
    );

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

    xhttp.send(null);

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

      if (type == "PAID") {
        paidTime += record.duration;
      } else {
        breakTime += record.duration;
      }
    }
    this.series[0] = paidTime;
    this.series[1] = breakTime;
  }
};
</script>


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