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

    <!-- DIALOG TO ADD COURSE DISCUSSION FORUM -->
    <v-dialog v-model="addForumDialog" max-width="500" persistent>
      <v-card flat class="card-style pa-2" dark>
        <v-layout>
          <v-flex xs12>
            <label class="title text-xs-center">Add Forum</label>
            <v-icon size="24" class="right" @click="addForumDialog = false">cancel</v-icon>
          </v-flex>
        </v-layout>
        <v-container fluid>
          <v-layout align-center>
            <v-flex xs12>
              <v-flex xs12 sm12>
                <v-form ref="form" v-model="valid" lazy-validation>
                  <v-layout>
                    <v-flex
                      xs12
                      class="text-xs-center text-sm-center text-md-center text-lg-center"
                    >
                      <v-avatar size="100px" v-if="!imageUrl">
                        <img src="/static/icon/user.png" />
                      </v-avatar>
                      <input
                        type="file"
                        style="display: none"
                        ref="image"
                        accept="image/*"
                        @change="onFilePicked"
                      />
                      <img
                        :src="imageData.imageUrl"
                        height="150"
                        width="150"
                        v-if="imageUrl"
                        style="border-radius:50%; width:200px"
                      />
                    </v-flex>
                  </v-layout>

                  <v-layout wrap>
                    <!-- SUBJECT -->
                    <v-flex xs12 sm12>
                      <v-layout>
                        <v-flex xs4 sm4 class="pt-4 subheading">
                          <label class="right hidden-xs-only hidden-sm-only">Subject:</label>
                          <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
                        </v-flex>
                        <v-flex xs8 sm8 class="ml-3">
                          <v-text-field
                            v-model="addForumParams.subject"
                            placeholder="subject"
                            type="text"
                            :rules="cantBeEmpty"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <!-- DESCRIPTION -->
                    <v-flex xs12 sm12>
                      <v-layout>
                        <v-flex xs4 sm4 class="pt-4 subheading">
                          <label class="right hidden-xs-only hidden-sm-only">Description:</label>
                          <label
                            class="right hidden-lg-only hidden-md-only hidden-xl-only"
                          >Description:</label>
                        </v-flex>
                        <v-flex xs8 sm8 class="ml-3">
                          <v-text-field
                            v-model="addForumParams.description"
                            placeholder="Description"
                            type="text"
                            :rules="cantBeEmpty"
                            required
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                    <!-- UPLOAD IMAGE -->
                    <v-flex xs12 sm12>
                      <v-layout>
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
                          <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label>
                        </v-flex>
                        <v-flex xs8 class="ml-3">
                          <v-text-field
                            label="Select Image"
                            @click="pickFile"
                            v-model="imageName"
                            append-icon="attach_file"
                          ></v-text-field>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm12>
                      <v-layout class="right">
                        <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
                      </v-layout>
                    </v-flex>
                  </v-layout>
                </v-form>
              </v-flex>
            </v-flex>
          </v-layout>
        </v-container>
      </v-card>
    </v-dialog>

    <v-container grid-list-xl class="pt-0">
      <v-layout row class="mt-1">
        <v-flex xs8>
          <v-layout column>
            <!-- HEADING -->
            <v-flex>
              <div class="title side-bar-color font-weight-bold">Course Discussion Forum</div>
              <div class="subheading grey--text lighten-1">General news and announcements</div>
            </v-flex>

            <!-- ADD DISCUSSION FORUM BUTTON -->
            <v-flex>
              <div>
                <v-btn
                  fab
                  dark
                  class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
                  small
                  @click="addForumDialog = true"
                >
                  <v-icon dark>add</v-icon>
                </v-btn>
                <v-btn
                  round
                  class="open-dialog-button hidden-sm-only hidden-xs-only"
                  dark
                  @click="addForumDialog = true"
                >
                  <v-icon class="white--text pr-1" size="20">add</v-icon>Add A New Discussion Topic
                </v-btn>
              </div>
            </v-flex>

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

          <!-- NEXT CHAPTER -->
          <!-- <v-flex
            class="text-xs-right mt-5"
            v-if="indexSelectedChapter < chapterNames.length -1"
            @click="showSelectedChapter()"
          >
            <span style="cursor: pointer;" class="subheading font-weight-bold">
              {{chapterNames[indexSelectedChapter + 1]}}
              <v-icon class="black--text" style="position:relative; top: 4px;">chevron_right</v-icon>
            </span>
          </v-flex>-->
          <!-- <v-flex class="text-xs-right mt-5" v-else>
            <span class="subheading font-weight-bold">Return to chapter one</span>
          </v-flex>-->
        </v-flex>

        <v-spacer></v-spacer>

        <!-- COURSES - positioned to the right of the page -->
        <v-flex xs3>
          <v-card class="elevation-0 card-border" height="100%">
            <v-container class="pt-0">
              <div class="side-bar-color font-weight-bold title">Courses</div>

              <div v-for="(course,index) in courseData">
                <v-btn
                  flat
                  class="subheading text-xs-start justify-left"
                  style="cursor: pointer;"
                  block
                  @click="routeToCourseDetails(course._id)"
                >
                  <div style="width: 100%;text-align: left;">
                    <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
                    {{course.coursrName}}
                  </div>
                </v-btn>
              </div>
            </v-container>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>
<script>
import AllApiCalls from "@/Services/AllApiCalls.js";
import http from "@/Services/http.js";
export default {
  mixins: [AllApiCalls],
  data() {
    return {
      valid: true,
      addForumDialog: false,
      addForumParams: {},
      // UPLOAD IMAGE
      imageName: "",
      imageUrl: "",
      imageFile: "",
      imageData: {}
    };
  },
  methods: {
    /* UPLOAD IMAGE */
    pickFile() {
      this.$refs.image.click();
    },

    onFilePicked(e) {
      // console.log(e)
      const files = e.target.files;
      this.imageData.upload = e.target.files[0];
      if (files[0] !== undefined) {
        this.imageName = files[0].name;
        if (this.imageName.lastIndexOf(".") <= 0) {
          return;
        }
        const fr = new FileReader();
        fr.readAsDataURL(files[0]);
        fr.addEventListener("load", () => {
          this.imageUrl = fr.result;
          this.imageFile = files[0]; // this is an image file that can be sent to server...
          this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
        });
      } else {
        this.imageName = "";
        this.imageFile = "";
        this.imageUrl = "";
      }
    },
    submit() {
      if (this.$refs.form.validate()) {
        this.addForumParams.classId = localStorage.getItem("parentClassId");
        this.addForumParams.courseId = this.$route.query.courseId;
        this.addForumParams.studentId = localStorage.getItem("parentStudentId");

        if (this.imageUrl) {
          var str = this.imageUrl;
          const [baseUrl, imageUrl] = str.split(/,/);
          this.addForumParams.upload = imageUrl;
        }
        this.loading = true;
        http()
          .post("/createCourseDiscussion", this.addForumParams)
          .then(response => {
            this.snackbar = true;
            this.text = "Discussion added successfully";
            this.snackbarColor = "green";
            this.addForumDialog = false;
            this.clear();
            this.loading = false;
            console.log("response of createCourseDiscussion - ", response);
          })
          .catch(error => {
            this.snackbar = true;
            this.text = error.response.data.message;
            this.color = "error";
            this.loading = false;
          });
      }
    },
    clear() {
      this.$refs.form.reset();
      this.imageUrl = "";
    },
    async routeToCourseDetails(courseId) {
      /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
      let response = await this.getParticularCourseDetail(courseId);

      /* If the response is null then dont route */
      if (response.data.data.length > 0) {
        this.$router.push({
          name: "Course Details",
          query: { courseId: courseId }
        });
      } else {
        this.seeSnackbar("No Data Available", "warning");
      }
    }
  },
  async created() {
    /* getStudentCourses - to get courseData - defined in GetApis.js*/
    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;
}
</style>