<template>
    <div class="body-color">
      <!-- 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 grid-list-xl class="pt-0">
        <v-layout row wrap class="mt-1">

          <!-- if logged in user is parent -->

          <v-flex xs12 sm12 md9 v-if=" $store.state.role === 'PARENT' ">
            <v-layout column>
              <!-- HEADING -->
              <v-flex>

                <div
                  class="title side-bar-color font-weight-bold"
                >Live Online Classes - {{$route.query.chapterName}}</div>
                <div class="subheading grey--text lighten-1">{{startLiveSession}}</div>

                <div
                  class="subheading grey--text lighten-1"
                >The session started at 1:00 there is 1 moderator</div>
              </v-flex>
  
              <!-- JOIN OR END SESSION -->
              <v-flex>
                <div>
                  <v-btn round class="open-dialog-button" dark>Join Session</v-btn>
                </div>
              </v-flex>
  
              <!-- DATA TABLE -->

              <!-- <v-flex>

                <div>
                  <span class="subheading font-weight-bold">Recording</span>
                </div>
                <v-data-table
                  :headers="liveOnlineHeaders"
                  :items="liveOnlineHeaders"
                  :pagination.sync="pagination"
                  :search="search"
                  item-key="_id"
                >
                  <template slot="items" slot-scope="props">
                    <tr
                      class="tr"
                      @click="props.expanded = !props.expanded;courseDiscussionId = props.item._id;getDiscussionesThread(props.item._id)"
                    >
                      <td class="text-xs-center td td-row">
                        <v-btn round class="open-dialog-button" dark>Join Session</v-btn>
                      </td>
                      <td class="td td-row text-xs-center">{{ }}</td>
                      <td class="td td-row text-xs-center">{{ }}</td>
                      <td class="td td-row text-xs-center">-</td>
                      <td class="td td-row text-xs-center">{{ }}</td>
                    </tr>
                  </template>
                </v-data-table>

              </v-flex>-->

            </v-layout>
          </v-flex>

  
          <!-- if logged in user is teacher -->

          <v-flex xs12 sm12 md12 v-else>

            <v-layout column>
              <!-- HEADING -->
              <v-flex>

                <div
                  class="title side-bar-color font-weight-bold"
                >Live Online Classes - {{$route.query.chapterName}}</div>

                <div class="subheading grey--text lighten-1">{{startLiveSession}}</div>

                <div
                  class="subheading grey--text lighten-1"
                >The session started at 1:00 there is 1 moderator</div>
              </v-flex>
  
              <!-- JOIN OR END SESSION -->
              <v-flex>
                <div>

                  <v-btn
                    round
                    class="open-dialog-button"
                    dark
                    @click="createRoom($route.query.classId)"
                  >Start Session</v-btn>

                </div>
              </v-flex>
  
              <!-- DATA TABLE -->

              <!-- <v-flex>

                <div>
                  <span class="subheading font-weight-bold">Recording</span>
                </div>
                <v-data-table
                  :headers="liveOnlineHeaders"
                  :items="liveOnlineHeaders"
                  :pagination.sync="pagination"
                  :search="search"
                  item-key="_id"
                >
                  <template slot="items" slot-scope="props">
                    <tr
                      class="tr"
                      @click="props.expanded = !props.expanded;courseDiscussionId = props.item._id;getDiscussionesThread(props.item._id)"
                    >
                      <td class="text-xs-center td td-row">

                        <v-btn round class="open-dialog-button" dark>Start Session</v-btn>

                      </td>
                      <td class="td td-row text-xs-center">{{ }}</td>
                      <td class="td td-row text-xs-center">{{ }}</td>
                      <td class="td td-row text-xs-center">-</td>
                      <td class="td td-row text-xs-center">{{ }}</td>
                    </tr>
                  </template>
                </v-data-table>

              </v-flex>-->
  
              <v-flex>
                <div id="jitsi-container"></div>

              </v-flex>
            </v-layout>
          </v-flex>
  
          <v-spacer></v-spacer>

          <!-- COURSES SIDE BAR- positioned to the right of the page -->
          <v-flex xs3>

            <v-card class="elevation-0 card-border" height="100%">

              <CoursesSideBar></CoursesSideBar>

            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </div>
  </template>
  <script>
  import AllApiCalls from "@/Services/AllApiCalls.js";
  import http from "@/Services/http.js";
  import moment from "moment";

  import Meet from "@/pages/Meet/meet.vue";
  import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue";

  export default {
    mixins: [AllApiCalls],

    components: {
      CoursesSideBar
    },

    data() {
      return {

        startLiveSession: "",

  
        // DATA TABLE
        search: "",
        pagination: {
          rowsPerPage: 10
        },
        liveOnlineHeaders: [
          {
            text: "Playback",
            value: "attachementUrl",
            sortable: false,
            align: "center"
          },
          {
            text: "Meeting",
            align: "center",
            sortable: false,
            value: ""
          },
          {
            text: "Recording",
            value: "",
            sortable: false,
            align: "center"
          },
          {
            text: "Description Preview",
            value: "",
            sortable: false,
            align: "center"
          },
          { text: "Date", value: "", sortable: false, align: "center" },
          { text: "Duration", value: "", sortable: false, align: "center" },
          { text: "Toolbar", value: "", sortable: false, align: "center" }
        ],
        liveOnlineItems: [],

        // JITSI CONTAINER
        token: "",
        selectStudents: {},
        classRules: [v => !!v || " Class Name is required"],
        sectionRules: [v => !!v || " Section Name is required"],
        addclass: [],
        addSection: [],
        loading: false,
        room: "",
        username: "",
        roomPassword: ""

      };
    },
    methods: {

      // JITSI CONTAINER
      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");
        // }

      },

      createRoom(classId) {

        this.showLoader = true;

        var classId = {
          classId: classId

        };
        http()

          .post("/createLiveClasses", {
            classId: this.$route.query.classId,
            courseId: this.$route.query.courseId,
            chapterId: this.$route.query.chapterId

          })

          .then(response => {

            // this.addSection = response.data.data;
            console.log("CREATE___ROOOM", response.data);
            this.room = response.data.data.LiveClasses.roomName;
            this.username = response.data.data.LiveClasses.teacherName;
            this.roomPassword = response.data.data.LiveClasses.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;
    },

    async created() {

      /* getLiveClassesesList - To up date line under heading*/
      let response = await this.getLiveClassesesList({
        classId: this.$route.query.classId,
        courseId: this.$route.query.courseId,
        chapterId: this.$route.query.chapterId

      });

      console.log("response getLiveClassesesList- ", response);
      if (response.data.data.length == 0) {
        console.log("response of  - ", response);
        this.startLiveSession = "Start live session";
      }
  
      /* getStudentCourses - to get courseData - defined in GetApis.js*/
      if (this.$store.state.role === "PARENT") {
        await this.getStudentCourses({
          classId: localStorage.getItem("parentClassId"),
          studentId: localStorage.getItem("parentStudentId")
        });
      }

    }
  };
  </script>
  <style scoped>
  .side-bar-color {
    color: #827bfa !important;
    /* border-top-right-radius: 74px !important; */
  }
  .card-border {
    border: 1px #bdbdbd solid;
    border-radius: 3px;
  }
  .reply-desc {
    border: 1px solid #f2f2f2;
  }
  .open-dialog-button {
    background: #827bfa !important;
    border-color: #827bfa !important;
    text-transform: none !important;
  }
  
  .reply-btn {
    background: #feb83c !important;
    border-color: #feb83c !important;
    text-transform: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
  }

  #jitsi-container {
    height: 100vh;
  }

  </style>