<template>
  
      <q-drawer
        v-model="sideBarStatus"
        :width="250"
        :breakpoint="700"
        elevated
        content-class="bg-grey-1"
      >
        <q-scroll-area class="fit">
          <div class="sidebar-items">
            <ul>
              <li
                clickable
                v-for="(question, index) in questions"
                @click="selectQuestion(index)"
                :key="index"
                :class="[test.currentQuestionIndex==index ? 'selected' : '' ]"
              >
                <a target="_blank" rel="noopener noreferrer">
                  <q-icon
                    name="fiber_manual_record"
                    class="text-primary"
                    :style="questionAttempted(index)"
                  />
                  <span>{{ index+1 }}</span>
                  <q-icon
                    v-if="questions[index].questionNote!=null && questions[index].questionNote!=''"
                    name="create"
                    class="text-primary"
                  />
                  <q-icon v-if="questions[index].isFlagged==1" name="flag" class="text-primary" />
                  <q-icon
                    v-if="questions[index].isSubmit || test.isTestExpired || test.isTestEnd"
                    :name="validateAnswer(index)"
                  />
                  <q-icon
                    v-if="questions[index].isFavorited==1"
                    name="favorite"
                    class="text-primary"
                  />
                </a>
              </li>
            </ul>
          </div>
        </q-scroll-area>
      </q-drawer>
</template>

<script>
export default {
  props: ["questions", "test", "showSideBar"],
  computed:{
    sideBarStatus:{
     get(){
      return this.test.isOpenSideBar;
     },
     set(val){
       this.test.isOpenSideBar=val;
     }
    }
  },
  methods: {
    questionAttempted(index) {
      return this.questions[index].selectedAnswer ||
        this.questions[index].isSubmit
        ? { visibility: "hidden" }
        : { visibility: "visible" };
    },
    validateAnswer(index) {
      if (this.questions[index].selectedAnswer) {
        return this.questions[index].selectedAnswer ==
          this.questions[index].correctAnswer
          ? "fas fa-check-circle"
          : "fas fa-times-circle";
      }
      return "fas fa-times-circle";
    },
    selectQuestion(index) {
      this.currentQuestion = this.questions[index];
      this.test.currentQuestionIndex = index;
    },
    questionStatusColor(index) {
      if (this.questions[index].selectedAnswer) {
        return this.questions[index].selectedAnswer ==
          this.questions[index].correctAnswer
          ? "color: green;"
          : "color: red;";
      }
      return "color: red;";
    }
  }
};
</script>
<style >
.q-drawer{
  bottom:50px !important;
}
</style>

<style lang="css" scoped>
.sidebar-items ul {
  list-style: none;
  margin: 0;
  padding: 0 0px;
}
.sidebar-items ul li .q-icon {
  padding: 15px 10px;
  font-size: 16px;
}
.sidebar-items ul li {
  background: #fff;
  padding: 0 15px;
}
.sidebar-items ul li:link {
  background: red;
}
.sidebar-items ul li:visited {
  background: green;
}

.sidebar-items ul li:hover {
  background: #04b1ed;
}
.sidebar-items ul li:hover a span {
  color: white;
}
.sidebar-items ul li:active {
  background: #7cdeff;
}

.sidebar-items ul li {
  border-bottom: 1px dotted #d1d1d1;
  padding-bottom: 5px;
}
.sidebar-items li span {
  color: #04b1ed;
  padding: 10px;
}
.selected {
  background: #04b1ed !important;
}
.selected a span {
  color: white;
}

</style>