<template>
  <q-toolbar class="fixed-bottom bg-primary">
    <q-btn
      icon="arrow_back"
      flat
      class="pad-5"
      :dense="$q.screen.lt.md"
      @click="changeQuestion(0)"
      :disabled="test.currentQuestionIndex<=0"
    >
      <q-tooltip
        content-class="bg-black"
        content-style="font-size: 16px"
        :offset="[10, 10]"
      >Previous</q-tooltip>
    </q-btn>
    <q-btn
      icon="arrow_forward"
      flat
      class="pad-5"
      :dense="$q.screen.lt.md"
      @click="changeQuestion(1)"
      :disabled=" test.currentQuestionIndex>=questions.length-1"
    >
      <q-tooltip content-class="bg-black" content-style="font-size: 16px" :offset="[10, 10]">Next</q-tooltip>
    </q-btn>

    <q-space />

    <q-btn
      icon="pause"
      flat
      class="pad-5"
      @click="toogleTimer()"
      v-if="isTimeLeft && !test.isPaused"
      :dense="$q.screen.lt.md"
    >
      <q-tooltip
        content-class="bg-black"
        content-style="font-size: 16px"
        :offset="[10, 10]"
      >Pause Test</q-tooltip>
    </q-btn>
    <q-btn
      icon="play_arrow"
      flat
      class="pad-5"
      @click="toogleTimer()"
      v-if="isTimeLeft && test.isPaused"
    >
      <q-tooltip
        content-class="bg-black"
        content-style="font-size: 16px"
        :offset="[10, 10]"
      >Resume Test</q-tooltip>
    </q-btn>
    <q-btn
      icon="stop"
      flat
      class="pad-5"
      v-if="isTimeLeft"
      @click="endTest"
      :dense="$q.screen.lt.md"
    >
      <q-tooltip
        content-class="bg-black"
        content-style="font-size: 16px"
        :offset="[10, 10]"
      >End Test</q-tooltip>
    </q-btn>

    <q-btn flat class="pad-5" v-if="test.isTimed">
      <q-badge
        class="text-subtitle2"
        :style="isTimeInExpiringZone ? 'color:red;':''"
        outline
        :label="remainingTimeText"
      />
      <q-tooltip content-class="bg-black" content-style="font-size: 16px" :offset="[10, 10]">Timer</q-tooltip>
    </q-btn>

    <q-dialog v-model="test.isPaused" persistent transition-show="scale" transition-hide="scale">
      <q-card class="bg-blue text-white" style="width: 300px">
        <q-card-section>
          <div class="text-h6">Test is Paused</div>
        </q-card-section>

        <q-card-section class="q-pt-none">To resume test click RESUME button.</q-card-section>

        <q-card-actions align="right" class="bg-white text-blue">
          <q-btn flat label="RESUME" @click="toogleTimer" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </q-toolbar>
</template>

<script>
import ConfirmDialogVue from "../../../components/ConfirmDialog.vue";
import AlertDialogVue from "../../../components/AlertDialog.vue";
export default {
  props: ["questions", "test"],
  data() {
    return {
      remainingTimeText: "",
      timer: "",
      isTimeInExpiringZone: false
    };
  },
  components: {},
  computed: {
    isTimeLeft() {
      if (this.test.isTestEnd || this.test.isTestExpired) {
        return false;
      }
      if (this.test.isTimed) {
        if (this.test.remainingTime.hours > 0) {
          return true;
        }
        if (this.test.remainingTime.minutes > 0) {
          return true;
        }
        if (this.test.remainingTime.seconds > 0) {
          return true;
        }
        return false;
      }
      return true;
    },
    questionOn: {
      get: function() {
        return this.test.currentQuestionIndex + 1;
      },
      // setter
      set: function(value) {
        var reg = /^\d+$/;
        if (reg.test(value) && value != 0) {
          if (value < 1) {
            this.test.currentQuestionIndex = 1;
          } else if (value > this.questions.length) {
            this.test.currentQuestionIndex = this.questions.length - 1;
          } else {
            this.test.currentQuestionIndex = value - 1;
          }
        } else {
          this.test.currentQuestionIndex = 0;
        }
      }
    },
    isPaused: {
      get: function() {
        return this.test.isPaused;
      },
      set: function(val) {}
    }
  },
  mounted() {
    if (
      this.test.isTimed &&
      !this.test.isPaused &&
      !this.test.isTestExpired &&
      !this.test.isTestEnd
    ) {
      if (
        this.test.remainingTime.hours != 0 ||
        this.test.remainingTime.minutes != 0 ||
        this.test.remainingTime.seconds != 0
      ) {
        this.startTimer();
      } else {
        this.remainingTimeText = "Test Time Expired";
        this.test.isTestEnd = true;
      }
    } else if (this.test.isPaused) {
      this.remainingTimeText = "Test Paused";
    } else if (this.test.isTestEnd) {
      this.remainingTimeText = "Test Ended";
    } else if (this.test.isTestExpired) {
      this.remainingTimeText = "Test Expired";
    }
  },
  created() {},
  methods: {
    startTimer() {
      let t = this;
      t.timer = setInterval(function() {
        let hr =
          t.test.remainingTime.hours < 10
            ? "0" + t.test.remainingTime.hours
            : t.test.remainingTime.hours;
        let min =
          t.test.remainingTime.minutes < 10
            ? "0" + t.test.remainingTime.minutes
            : t.test.remainingTime.minutes;
        let sec =
          t.test.remainingTime.seconds < 10
            ? "0" + t.test.remainingTime.seconds
            : t.test.remainingTime.seconds;
        if (
          t.test.remainingTime.minutes < 5 &&
          t.test.remainingTime.hours == 0 &&
          !t.isTimeInExpiringZone
        ) {
          t.isTimeInExpiringZone = true;
        }
        if (t.test.isTestTimeInHours) {
          t.remainingTimeText = hr + ":" + min + ":" + sec;
        } else {
          t.remainingTimeText = min + ":" + sec;
        }

        t.test.remainingTime.seconds--;
        if (t.test.remainingTime.seconds < 1) {
          t.test.remainingTime.minutes--;
          t.test.remainingTime.seconds = 59;
        }
        if (t.test.isTestTimeInHours) {
          if (
            t.test.remainingTime.minutes < 1 &&
            t.test.remainingTime.hours > 0
          ) {
            t.test.remainingTime.hours--;
            t.test.remainingTime.minutes = 59;
          }
          if (t.test.remainingTime.minutes < 0) {
            t.stopTimer();
          }
        } else if (t.test.remainingTime.minutes < 0) {
          t.stopTimer();
        }
      }, 1000);
    },
    stopTimer() {
      clearInterval(this.timer);
      this.test.remainingTime.seconds = 0;
      this.test.remainingTime.minutes = 0;
      if (this.test.isTestTimeInHours) {
        this.remainingTimeText = "00:00:00";
      } else {
        this.remainingTimeText = "00:00";
      }
      this.$q
        .dialog({
          component: AlertDialogVue,
          parent: this,
          titleText: "Redirecting...",
          msgText: "Test Time Expired.Redirecting to Dashboard in a moment...?",
          cancel: true,
          persistent: true
        })
        .onOk(() => {})
        .onCancel(() => {
          // console.log('>>>> Cancel')
        })
        .onDismiss(() => {
          // console.log('I am triggered on both OK and Cancel')
          this.$emit("updateTestStatus", "End");
        });
      let time = 3;
      let timeExpiredTimer = setInterval(() => {
        time--;
        if (time < 0) {
          clearInterval(timeExpiredTimer);
        }
        this.$emit("updateTestStatus", "End");
      }, 1000);
    },
    pauseTimer() {
      if (this.test.isTimed) {
        clearInterval(this.timer);
      }
    },
    resumeTimer() {
      this.startTimer();
    },
    toogleTimer() {
      if(!this.isTimeLeft){return;}
      if (this.test.isPaused) {
        if (this.test.isTimed) {
          if (this.test.showDetailedExplantion) {
            this.test.showDetailedExplantion = false;
          }
          this.resumeTimer();
        }
        this.$emit("updateTestStatus", "Running");
      } else {
        this.$q
          .dialog({
            component: ConfirmDialogVue,
            parent: this,
            titleText: "Confirm ?",
            msgText: "Would you like to pause your exam?",
            cancel: true,
            persistent: true
          })
          .onOk(() => {
            this.$emit("updateTestStatus", "Paused");
          })
          .onCancel(() => {
            // console.log('>>>> Cancel')
          })
          .onDismiss(() => {
            // console.log('I am triggered on both OK and Cancel')
          });
      }
    },
    endTest: function() {
      this.$q
        .dialog({
          component: ConfirmDialogVue,
          parent: this,
          titleText: "Confirm ?",
          msgText: "Would you like to end this exam?",
          cancel: true,
          persistent: true
        })
        .onOk(() => {
          if (this.test.isTimed) {
            clearInterval(this.timer);
          }
          this.$emit("updateTestStatus", "End");
        })
        .onCancel(() => {
          // console.log('>>>> Cancel')
        })
        .onDismiss(() => {
          // console.log('I am triggered on both OK and Cancel')
        });
    },
    changeQuestion: function(val) {
      if (val == 0) {
        this.test.currentQuestionIndex =
          this.test.currentQuestionIndex == 0
            ? 0
            : this.test.currentQuestionIndex - 1;
      } else if (val == 1) {
        this.test.currentQuestionIndex =
          this.test.currentQuestionIndex == this.questions.length - 1
            ? this.test.currentQuestionIndex
            : this.test.currentQuestionIndex + 1;
      }
    }
  },
  watch: {
    "test.isPaused": function(e) {
      this.remainingTimeText = "Test Paused";
      if (e) {
        this.pauseTimer();
      }
    }
  }
};
</script>


<style lang="css" scoped>
.pad-5 {
  padding: 5px;
}

.show {
  display: inline-block;
}

.hide {
  display: none;
}

.yellow {
  color: yellow;
}

#no-hover:hover {
  background: none !important;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
  .hide {
    display: block;
  }

  .show {
    display: none;
  }
}
</style>
