<template>
  <v-container fluid>
    <div v-bind:key="timeRecord._links.self.href" v-for="timeRecord in timeRecords">
      <TimeRecordItem
        v-bind:timeRecord="timeRecord"
        v-on:del-timeRecord="deleteTimeRecord"
        v-on:edit-timeRecord="editTimeRecord"
      />
    </div>
    <v-row>
      <v-col cols="5"></v-col>
       <v-col cols="1">
        <v-btn v-if="havePrevPage == true" @click="prevPage()">
          <v-icon>mdi-arrow-left</v-icon>
        </v-btn>
      </v-col>
      <v-col cols="1">
        <v-btn v-if="haveNextPage == true" @click="nextPage()">
          <v-icon>mdi-arrow-right</v-icon>
        </v-btn>
      </v-col>     
      <v-col cols="5"></v-col>
    </v-row>
    <v-row>
      <v-col cols="6"></v-col>
      <v-col cols="1">
        <v-btn  v-if="loggedIn == 'true'" fab color="primary" @click="createTimeRecord()">
          <v-icon>mdi-plus</v-icon>
        </v-btn>
      </v-col>

      <v-col cols="5"></v-col>
    </v-row>
  </v-container>
</template>

<script>
import TimeRecordItem from "./TimeRecordItem.vue";
import { baseUri } from "../variables.js";

export default {
  name: "TimeRecords",
  components: {
    TimeRecordItem
  },
  data() {
    return {
      timeRecords: "",
      page: sessionStorage.getItem("page"),
      haveNextPage: "",
      havePrevPage: "",
      loggedIn: sessionStorage.getItem("loggedin")
    };
  },
  methods: {
    deleteTimeRecord(selfLink) {
      var userxhttp = new XMLHttpRequest();
      userxhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 204) {
          location.reload();
        }
      };
      userxhttp.open("DELETE", selfLink, false);

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

      userxhttp.send(null);
    },
    editTimeRecord(selfLink, end) {
      if (end == "pending") {
        alert("It's not possible to edit a running track");
      } else {
        sessionStorage.setItem("timeRecordEditSelfLink", selfLink);

        this.$router.push("/edittimerecord");
      }
    },
    createTimeRecord(selfLink) {
      sessionStorage.setItem("timeRecordEditSelfLink", selfLink);

      this.$router.push("/createtimerecord");
    },
    nextPage() {
      var pageTMP = parseInt(this.page) + 1;
      sessionStorage.setItem("page", pageTMP);
      location.reload();
    },
    prevPage() {
      var pageTMP = parseInt(this.page) - 1;
      sessionStorage.setItem("page", pageTMP);
      location.reload();
    }
  },
  created() {
    var xhttp = new XMLHttpRequest();
    var records;
    var recordLinks;

    if (this.page == null) {
      this.page = 0;
    }
    sessionStorage.removeItem("page");
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var recordsDB = JSON.parse(xhttp.responseText);

        records = recordsDB._embedded.records;
        recordLinks = recordsDB._links;
      }
    };
    xhttp.open(
      "GET",
      baseUri +
        "/records/search/allForUser?username=" +
        sessionStorage.getItem("username") +
        "&sort=startdate,desc&page=" +
        this.page +
        "&projection=overview",
      false
    );

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

    xhttp.send(null);
    if (recordLinks.next != undefined) {
      this.haveNextPage = true;
    }
    if (recordLinks.prev != undefined) {
      this.havePrevPage = true;
    }

    for (let index = 0; index < records.length; index++) {
      var record = records[index];
      var time = record.duration;
      var hours = time / 60;
      hours = Math.floor(hours);

      var min = time % 60;
      record.duration = hours + "h " + min + "min";
      var start = record.startdate;
      records[index].completeStartDate = start;
      start = start.split("T");
      records[index].startdate = start[1];
      records[index].date = start[0];

      try {
        var end = record.enddate;
        end = end.split("T");
        records[index].enddate = end[1];
      } catch (e) {
        records[index].enddate = "pending";
      }
    }

    this.timeRecords = records;
  }
};
</script>

<style scoped>
</style>