<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(selectStudents.classId)"
                round
                dark
                :loading="loading"

                class="open-dialog-button"

              >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.intrack.in";

          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(classId) {

        this.showLoader = true;
        var classId = {

          classId: 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>