<template>
  <q-toolbar>
    <q-btn flat @click="toggleSideBarState" round dense icon="menu" />
    <div class="q-px-md" style="font-size:16px;line-height: 1.5;">
      <input
        type="text"
        v-model="questionOn"
        style="font-size:14px; border-radius: 5px;max-width: 36px;max-height:26px;"
      />
      / {{questions.length}}
    </div>
    <q-toolbar-title class="yellow q-px-none">
      {{ test.qbankName }}
      <q-tooltip
        content-class="bg-grey-3 text-grey-9"
        content-style="border:1px solid #d1d1d1;font-size: 16px"
        :offset="[10, 10]"
      >
       {{ test.qbankName }}
      </q-tooltip>
    </q-toolbar-title>

    <div class>
      <q-btn icon="create" flat class="pad-5 show" @click="showQuestionNote">
        <q-tooltip content-class="bg-black" content-style="font-size: 16px" :offset="[10, 10]">Notes</q-tooltip>
      </q-btn>

      <q-btn icon="flag" flat class="pad-5 show" @click="flagQuestion">
        <q-tooltip
          content-class="bg-black"
          content-style="font-size: 16px"
          :offset="[10, 10]"
        >Flag a question</q-tooltip>
      </q-btn>
      <q-btn icon="post_add" flat class="pad-5 show">
        <q-tooltip
          content-class="bg-black"
          content-style="font-size: 16px"
          :offset="[10, 10]"
        >Lab Values</q-tooltip>
      </q-btn>
      <q-btn icon="keyboard" flat class="pad-5 show" @click="toggleCalculator">
        <q-tooltip
          content-class="bg-black"
          content-style="font-size: 16px"
          :offset="[10, 10]"
        >Calculator</q-tooltip>
      </q-btn>
      <q-btn icon="brightness_medium" flat class="pad-5 show" @click="showReverse = !showReverse">
        <q-tooltip
          content-class="bg-black"
          content-style="font-size: 16px"
          :offset="[10, 10]"
        >Reverse Color</q-tooltip>
      </q-btn>
      <q-btn
        icon="format_size"
        flat
        class="pad-5 show"
        @click="showTextZoom = !showTextZoom"
        id="txtzoom"
      >
        <q-tooltip
          content-class="bg-black"
          content-style="font-size: 16px"
          :offset="[10, 10]"
        >Text Zoom</q-tooltip>
      </q-btn>
      <q-btn icon="dashboard" flat class="pad-5 show yellow" @click="validateNavigationToDashboard">
        <q-tooltip
          content-class="bg-black"
          content-style="font-size: 16px"
          :offset="[10, 10]"
        >Go to Dashboard</q-tooltip>
      </q-btn>

      <q-fab
        square
        flat
        text-color="white"
        class="hide"
        v-model="fab"
        label-position="left"
        label="Actions"
        vertical-actions-align="right"
        color="primary"
        icon="keyboard_arrow_down"
        direction="down"
      >
        <q-fab-action
          square
          color="primary"
          @click="showQuestionNote"
          icon="create"
          label-position="left"
          label="Notes"
        />
        <q-fab-action
          square
          color="primary"
          @click="flagQuestion"
          icon="flag"
          label-position="left"
          label="Flag a question"
        />
        <q-fab-action
          square
          color="primary"
          icon="post_add"
          label-position="left"
          label="Lab values"
        />
        <q-fab-action
          square
          color="primary"
          @click="toggleCalculator"
          icon="keyboard"
          label-position="left"
          label="Calculator"
        />
        <q-fab-action
          square
          color="primary"
          @click="showReverse = !showReverse"
          icon="brightness_medium"
          label-position="left"
          label="Reverse color"
        />
        <q-fab-action
          square
          color="primary"
          @click="showTextZoom = !showTextZoom"
          icon="format_size"
          label-position="left"
          label="Text Zoom"
        />
        <q-fab-action
          square
          color="primary"
          @click="validateNavigationToDashboard"
          icon="dashboard"
          label-position="left"
          label="Dashboard"
        />
        <q-fab-action
          square
          color="dark"
          @click="toggleReportDialog"
          icon="report"
          label-position="left"
          label="Report"
        />
      </q-fab>
      <q-dialog v-model="showReverse">
        <q-card style="width: 300px" class="q-px-sm q-pb-md">
          <q-card-section class="text-h6 text-center">
            <q-icon name="brightness_medium" />Reverse Color
          </q-card-section>

          <q-item dense class="flex-center">
            <q-btn
              class="q-ma-sm"
              @click="reverseWhite"
              color="white"
              text-color="dark"
              label="White"
            />
            <q-btn
              class="q-ma-sm"
              @click="reverseBlack"
              color="black"
              text-color="white"
              label="Black"
            />
          </q-item>
        </q-card>
      </q-dialog>

      <q-dialog v-model="showTextZoom">
        <q-card style="width: 300px" class="q-px-sm q-pb-md">
          <q-card-section class="text-h6 text-center">
            <q-icon name="format_size" />Text Zoom
          </q-card-section>

          <q-item dense>
            <q-btn class="q-ma-sm" @click="resizeFonts(-1)" color="dark" label="-" />
            <q-item-section>
              <q-btn class="q-ma-sm" @click="resetFontSize()" color="primary" label="Reset" />
            </q-item-section>
            <q-btn
              class="q-ma-sm"
              @click="resizeFonts(1)"
              color="white"
              text-color="dark"
              label="+"
            />
          </q-item>
        </q-card>
      </q-dialog>

      <q-dialog v-model="validateNoteVisibility">
        <q-card style="width: 600px" class="q-px-sm q-pb-md">
          <q-card-section class="text-h6 text-center">
            <q-icon name="create" />Notes
          </q-card-section>

          <q-item dense>
            <div class="q-pa-sm" style="min-width: 500px;">
              <q-input
                type="textarea"
                placeholder="Type your note here.."
                v-model="questions[test.currentQuestionIndex].questionNote"
                :disabled="questions[test.currentQuestionIndex].isSubmit || isTestInReviewMode"
              />
            </div>
          </q-item>
          <q-item dense class="flex-center" v-if="!isTestInReviewMode">
            <q-btn
              class="q-ma-sm"
              color="primary"
              text-color="white"
              label="Save & Close"
              @click="saveNote"
            />
            <q-btn
              class="q-ma-sm"
              color="negative"
              text-color="white"
              label="Delete & Close"
              @click="deleteNote"
            />
          </q-item>
        </q-card>
      </q-dialog>

      <q-dialog v-model="questions[test.currentQuestionIndex]. isCalculatorShow">
        <q-card style="width: 340px; height: 440px;">
          <q-card-section class="q-pa-none">
            <q-bar>
              <q-space />

              <q-btn dense flat icon="close" @click="toggleCalculator">
                <q-tooltip>Close</q-tooltip>
              </q-btn>
            </q-bar>
            <calculator class="hiddenn" />
          </q-card-section>
        </q-card>
      </q-dialog>
    </div>
  </q-toolbar>
</template>

<script>
import ConfirmDialogVue from "../../../components/ConfirmDialog.vue";
export default {
  props: ["isTestInReviewMode", "test", "currentQuestion", "questions"],
  data() {
    return {
      fab: false,
      showReverse: false,
      showTextZoom: false,
    };
  },
  components: {
    "side-bar": () => import("./Sidebar.vue"),
    calculator: () => import("./Calculator.vue")
  },
  computed: {
    validateNoteVisibility: {
      get: function() {
        let t = this;
        if (this.isTestInReviewMode) {
          if (
            this.questions[t.test.currentQuestionIndex].questionNote != "" &&
            this.questions[t.test.currentQuestionIndex].questionNote != null &&
            this.questions[t.test.currentQuestionIndex].isNoteShow
          ) {
            return true;
          }
          return false;
        }
        return this.questions[t.test.currentQuestionIndex].isNoteShow;
      },
      // setter
      set: function(newValue) {}
    },
    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;
        }
      }
    }
  },
  methods: {
    toggleReportDialog(){
      this.$emit('toogleReportDialog');
    },
    toggleSideBarState() {
      this.test.isOpenSideBar = !this.test.isOpenSideBar;
    },
    showQuestionNote: function() {
      let t = this;
      if (this.isTestInReviewMode) {
        if (
          t.questions[t.test.currentQuestionIndex].questionNote != "" &&
          t.questions[t.test.currentQuestionIndex].questionNote != null
        ) {
          t.questions[t.test.currentQuestionIndex].isNoteShow = !t.questions[
            t.test.currentQuestionIndex
          ].isNoteShow;
        } else {
          this.$q.notify({
            type: "error-notify",
            caption: "Sorry! New Notes ara not allowed in Review Mode."
          });
        }
        return;
      }
      if (!t.questions[t.test.currentQuestionIndex].isSubmit) {
        t.questions[t.test.currentQuestionIndex].isNoteShow = !t.questions[
          t.test.currentQuestionIndex
        ].isNoteShow;
        t.$emit("updateQuestion");
      } else {
        this.$q.notify({
          type: "error-notify",
          caption: "Sorry! Notes ara not allowed after submission of question."
        });
      }
    },
    saveNote: function() {
      this.questions[this.test.currentQuestionIndex].isNoteShow = false;
      this.$emit(
        "updateQuestion",
        { title: "Success", msg: "Note Saved Successfully!!" },
        [
          { key: "isNoteShow", value: true },
          {
            key: "questionNote",
            value: this.questions[this.test.currentQuestionIndex].questionNote
          }
        ]
      );
    },
    deleteNote: function() {
      let noteShow = this.questions[this.test.currentQuestionIndex].isNoteShow;
      let note = this.questions[this.test.currentQuestionIndex].questionNote;
      this.questions[this.test.currentQuestionIndex].questionNote = null;
      this.questions[this.test.currentQuestionIndex].isNoteShow = false;
      this.$emit(
        "updateQuestion",
        { title: "Success", msg: "Note Deleted Successfully!!" },
        [
          { key: "isNoteShow", value: noteShow },
          { key: "questionNote", value: note }
        ]
      );
    },
    toggleCalculator() {
      let t = this;
      t.questions[t.test.currentQuestionIndex].isCalculatorShow = !t.questions[
        t.test.currentQuestionIndex
      ].isCalculatorShow;
      if (!this.isTestInReviewMode) {
        t.$emit("updateQuestion");
      }
    },
    flagQuestion: function() {
      let t = this;
      if (t.test.isTestExpired || t.test.isTestEnd) {
        this.$q.notify({
          type: "error-notify",
          caption: "Sorry! You can not use this feature in Review Mode."
        });
      } else {
        let isFlagged = t.questions[t.test.currentQuestionIndex].isFlagged;
        let text = "";
        let type = "success-notify";

        if (!t.questions[t.test.currentQuestionIndex].isSubmit) {
          if (isFlagged) {
            t.questions[t.test.currentQuestionIndex].isFlagged = false;
            text =
              "Question (" +
              t.questions[t.test.currentQuestionIndex].ques_id +
              ") removed from flag!";
          } else {
            t.questions[t.test.currentQuestionIndex].isFlagged = true;
            text =
              "Question (" +
              t.questions[t.test.currentQuestionIndex].ques_id +
              ") has been flagged!";
          }
        } else {
          text = "Question can not Be unflagged after submission!";
          type = "error-notify";
          this.$q.notify({
            type: type,
            caption: text
          });
          return;
        }
        t.$emit("updateQuestion", { title: "Success", msg: text }, [
          {
            key: "isFlagged",
            value: !t.questions[t.test.currentQuestionIndex].isFlagged
          }
        ]);
      }
    },
    validateNavigationToDashboard: function() {
      if (this.test.isTestEnd || this.test.isTestExpired) {
        this.$router.push({
          name: "qbank-welcome"
        });
      } else {
        this.$q
          .dialog({
            component: ConfirmDialogVue,
            parent: this,
            titleText: "Go To Dashboard ?",
            msgText:
              "This action will pause your test and will redirect you to Qbank Dashbaord. Do you wish to  continue?",
            cancel: true,
            persistent: true
          })
          .onOk(() => { 
          this.$emit("redirectDashboard", true);
          this.$emit("updateTestStatus", "Paused");
          
          })
          .onCancel(() => {
            // console.log('>>>> Cancel')
          })
          .onDismiss(() => {
            // console.log('I am triggered on both OK and Cancel')
          });
      }
    },
    reverseBlack: function() {
      this.test.isBlack = true;
      document.body.style.background = "black";
      document.body.style.color = "white";
    },
    reverseWhite: function() {
      this.test.isBlack = false;
      document.body.style.background = "white";
      document.body.style.color = "black";
    },
    resetFontSize: function() {
      let fontSize = "16px";
      this.test.fontSize = fontSize;
    },
    resizeFonts: function(multiplier) {
      this.test.fontSize =
        parseFloat(this.test.fontSize) + multiplier * 0.9 + "px";
    }
  }
};
</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>
