<template>
  <v-container fluid class="body-color">
    <v-card flat class="elevation-0 transparent">
      <v-flex xs12>
        <v-layout>
          <v-flex lg2>
            <v-select
              :items="addclass"
              label="Select Class"
              v-model="selectStudents.classId"
              item-text="classNum"
              item-value="_id"
              name="Select Class"
              :rules="classRules"
              class="ml-4"
            ></v-select>
          </v-flex>
          <!-- <v-flex xs3>
            <v-select
              :items="addSection"
              label="Select Section"
              v-model="selectStudents.selectSection"
              item-text="name"
              item-value="_id"
              name="Select Section"
              :rules="sectionRules"
              class="px-2"
              required
            ></v-select>
          </v-flex>-->
          <v-flex xs3>
            <v-btn @click="createRoom()" round dark :loading="loading" class="add-button mt-3">Find</v-btn>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-card>
    <div id="jitsi-container"></div>
  </v-container>
</template>
<script>
import http from "@/Services/http.js";
import moment from "moment";

export default {
  data() {
    return {
      token: "",
      selectStudents: {},
      classRules: [v => !!v || " Class Name is required"],
      sectionRules: [v => !!v || " Section Name is required"],
      addclass: [],
      addSection: [],
      loading: false,
      room: "",
      username: "",
      roomPassword: ""
    };
  },
  methods: {
    startConference() {
      var _this = this;
      try {
        const domain = "meet.jit.si";
        const options = {
          audioInput: "<deviceLabel>",
          audioOutput: "<deviceLabel>",
          videoInput: "<deviceLabel>",
          roomName: this.room,
          height: 500,
          parentNode: document.getElementById("jitsi-container"),
          interfaceConfigOverwrite: {
            filmStripOnly: false,
            SHOW_JITSI_WATERMARK: false,
            TOOLBAR_BUTTONS: [
              "microphone",
              "camera",
              "closedcaptions",
              "desktop",
              "fullscreen",
              "fodeviceselection",
              "hangup",
              "profile",
              "info",
              "chat",
              // "recording",
              "livestreaming",
              "etherpad",
              "sharedvideo",
              "settings",
              "raisehand",
              "videoquality",
              "filmstrip",
              "invite",
              "feedback",
              "stats",
              "shortcuts",
              "tileview"
            ]
          },
          configOverwrite: {
            disableSimulcast: false
          },
          teacherName: "",
          romm: ""
        };

        this.api = new JitsiMeetExternalAPI(domain, options);
        this.api.addEventListener("videoConferenceJoined", () => {
          console.log("Local User Joined");

          _this.api.executeCommand("displayName", _this.username);
          _this.api.executeCommand("password", this.roomPassword);
        });
      } catch (error) {
        console.error("Failed to load Jitsi API", error);
      }
    },
    openRoom() {
      // verify the JitsiMeetExternalAPI constructor is added to the global..
      // if (this.teacherName != "" || this.room != "") {
      //   if (window.JitsiMeetExternalAPI) {
      //     // var person = prompt("Please enter your name:", "Rabie");
      //     if (person != null || person != "") this.username = this.teacherName;
      //     var room = prompt("Please enter your room:", "Test Room");
      //     if (room != null || room != "") this.room = this.room;
      //     this.startConference();
      //   } else alert("Jitsi Meet API script not loaded");
      // }
    },
    getClassData() {
      http()
        .get("/getClassesList", {
          headers: { Authorization: "Bearer " + this.token }
        })
        .then(response => {
          this.addclass = response.data.data;
        })
        .catch(error => {
          this.showLoader = false;
          if (error.response.status === 401) {
            this.$router.replace({ path: "/" });
            this.$store.dispatch("setToken", null);
            this.$store.dispatch("Id", null);
            this.$store.dispatch("Role", null);
          }
        });
    },
    createRoom() {
      this.showLoader = true;
      var classId = {
        classId: this.selectStudents.classId
      };
      http()
        .post("/createRoom", classId)
        .then(response => {
          // this.addSection = response.data.data;
          console.log("CREATE___ROOOM", response.data);
          this.room = response.data.data.roomName;
          this.username = response.data.data.teacherName;
          this.roomPassword = response.data.data.roomPassword;
          var this_ = this;
          if (this.username != "" || this.room != "") {
            if (window.JitsiMeetExternalAPI) {
              // var person = prompt("Please enter your name:", "Rabie");
              if (this_.username != null || this_.username != "") {
                this.username = this.username;
              }
              // var room = prompt("Please enter your room:", "Test Room");
              if (this_.room != null || this_.room != "") {
                this.room = this.room;
              }
              this.startConference();
            } else alert("Jitsi Meet API script not loaded");
          }
          this.showLoader = false;
        })
        .catch(err => {
          this.showLoader = false;
        });
    }
  },

  mounted() {
    this.token = this.$store.state.token;
    this.getClassData();
    // this.openRoom();
  }
};
</script>


<style>
#jitsi-container {
  height: 100vh;
}
</style>