<template>
  <v-app id="login">
    <!-- LOADER -->
    <div class="loader" v-if="showLoader">
      <v-progress-circular indeterminate color="white"></v-progress-circular>
    </div>

    <!-- SNACKBAR -->
    <v-snackbar
      :timeout="timeout"
      :top="y === 'top'"
      :right="x === 'right'"
      :vertical="mode === 'vertical'"
      v-model="snackbar"
      :color="snackbarColor"
    >
      {{ text }}
      <v-spacer></v-spacer>
      <v-btn flat text @click="snackbar = false">X</v-btn>
    </v-snackbar>
    <v-container fluid fill-height>
      <v-layout>
        <v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5">
          <v-card flat class="Card-style pa-2" id="form">
            <v-layout>
              <v-flex xs12>
                <label class="title text-xs-center">Change Student</label>
              </v-flex>
            </v-layout>
            <v-card-text>
              <v-flex xs12 sm8 md8 lg8 offset-sm2>
                <v-form class="mt-3">
                  <v-select
                    :items="studentsData"
                    item-text="name"
                    item-value="_id"
                    v-model="changeStudent"
                    label="Students"
                  ></v-select>
                </v-form>
              </v-flex>
            </v-card-text>
            <v-card-actions>
              <v-flex text-xs-center>
                <v-btn round dark :loading="loading" @click="change" class="add-button">Change</v-btn>
              </v-flex>
            </v-card-actions>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</template>
<script>
import http from "@/Services/http.js";
import AllApiCalls from "@/Services/AllApiCalls.js";

export default {
  mixins: [AllApiCalls],
  data() {
    return {
      snackbar: false,
      y: "top",
      x: "right",
      mode: "",
      timeout: 4000,
      text: "",
      loading: false,
      valid: false,
      changeStudent: "",
      studentsData: [],
    };
  },
  mounted() {
    this.getparentStudents();
  },
  methods: {
    change() {
      localStorage.setItem("parentStudentId", this.changeStudent);
      /* Look for active student object */
      for(var i = 0; i < this.studentsData.length; i++){
        if(this.studentsData[i]._id == this.changeStudent){
          this.$store.dispatch("SET_ACTIVE_STUDENT",this.studentsData[i])
        }
      }
      this.$router.replace({ path: "/" });
    },
    getparentStudents() {
      this.showLoader = true;
      http()
        .get("/parentStudentsList")
        .then((response) => {
          //   console.log("students - ", response.data.data.students);
          /* prepare an array of false status students */
          var indexStatusFalse = [];
          for (var i = 0; i < response.data.data.students.length; i++) {
            if (response.data.data.students[i].status == false) {
              indexStatusFalse.push(i);
            }
          }
          /* introduce a property named disabled in response to make false staus students disbled */
          for (var i = 0; i < indexStatusFalse.length; i++) {
            response.data.data.students[indexStatusFalse[i]].disabled = true;
          }
          /* make an array of students to be displayed in select box */
          this.studentsData = response.data.data.students;
          /* counter to keep a track of number of students that are disabled or false */
          var counter = 0;
          /* if zero element of false students list is > 0 then make first student as defalut selected */
          if (indexStatusFalse[0] > 0) {
            this.changeStudent = response.data.data.students[0]._id;
          }
          //   console.log("indexStatusFalse - ", indexStatusFalse);
          /* if false student is the first one in the list then see if the next is also false */
          if (indexStatusFalse[0] == 0) {
            if (indexStatusFalse.length > 1) {
              for (var i = 1; i < indexStatusFalse.length; i++) {
                if (indexStatusFalse[i] == i) {
                  if (indexStatusFalse[i - 1] == i - 1) {
                    counter = i + 1;
                    continue;
                  }
                } else {
                  counter = i;
                  break;
                }
              }
            } else {
              counter = 1;
            }
          }
          //   console.log("counter - ", counter);
          if (counter == response.data.data.students.length) {
            this.seeSnackbar(
              "Your wards have been removed you will be logged out",
              "warning"
            );
            setTimeout(() => {
              this.$store.dispatch("setToken", null);
              this.$router.replace({ path: "/" });
              this.$store.dispatch("Id", null);
            }, 3000);
          } else {
            this.changeStudent = response.data.data.students[counter]._id;
          }

          localStorage.setItem("parentStudentId", this.changeStudent);
          localStorage.setItem(
            "parentClassId",
            response.data.data.students[0].classId
          );
          this.showLoader = false;
        })
        .catch((err) => {
          //   console.log("err====>", err);
          this.showLoader = false;
          this.snackbar = true;
          this.color = "error";
          this.text = error.response.data.message;
        });
    },
  },
  computed: {
    color() {
      return this.loading ? "success" : "error";
    },
  },
};
</script>
<style scoped>
img {
  position: absolute;
  top: 13px;
  left: 50px;
}
.v-btn--large {
  padding: 0px 74px;
}
@media screen and (max-width: 769px) {
  .v-btn--large {
    font-size: 14px;
    height: 44px;
    padding: 0 32px;
  }
}
</style>