<template>
  <v-container fluid class="body-color">
    <!-- ******COURSE DISCUSIION COMMENT ****** -->
    <v-layout>
      <v-flex xs12 v-for="(courseDiscussionData,i) in courseDiscussionData" :key="i">
        <!-- TOPIC HEADING -->
        <v-card class="elevation-0 grey lighten-3 pa-2" flat>
          <v-list two-line subheader>
            <v-list-tile>
              <v-list-tile-avatar>
                <v-avatar size="46">
                  <img
                    :src="courseDiscussionData.attachementUrl"
                    v-if="courseDiscussionData.attachementUrl"
                  />
                  <img src="/static/icon/user.png" v-else-if="!courseDiscussionData.attachementUrl" />
                </v-avatar>
              </v-list-tile-avatar>
              <v-list-tile-content>
                <v-list-tile-title>{{ courseDiscussionData.subject }}</v-list-tile-title>
                <v-list-tile-sub-title>
                  By
                  <span class="info--text">{{ courseDiscussionData.studentId.name }}</span>
                  - {{dates(courseDiscussionData.created ) }}
                </v-list-tile-sub-title>
              </v-list-tile-content>
              <v-list-tile-action>
                <div>
                  <v-btn flat round dark class="reply-btn" @click="showReplyBox = true">Reply</v-btn>
                </div>
              </v-list-tile-action>
            </v-list-tile>
          </v-list>
        </v-card>

        <!-- REPLY BOX -->
        <v-flex xs12 class="mt-4" v-show="showReplyBox">
          <v-textarea
            name="input-7-1"
            solo
            label="Label Text"
            multi-line
            v-model="replyDescription"
          ></v-textarea>
          <v-btn round dark class="open-dialog-button" flat @click="showReplyBox = false">Cancel</v-btn>
          <v-btn
            round
            dark
            :loading="loading"
            class="reply-btn"
            @click="replyThreadDiscussion()"
          >Submit</v-btn>
        </v-flex>

        <!-- REPLY THREAD -->
        <v-layout
          :class="['mt-4','pl-5','mx-auto',replyThread.teacherId?'justify-start':'justify-end']"
          v-for="(replyThread,i) in courseDiscussionData.forumThread.slice().reverse()"
          :key="i"
        >
          <v-flex xs12 md7>
            <v-card class="elevation-0 grey lighten-1" flat>
              <v-list two-line subheader class="grey lighten-1 pa-1">
                <v-list-tile>
                  <v-list-tile-avatar>
                    <v-avatar size="46">
                      <img
                        :src="courseDiscussionData.attachementUrl"
                        v-if="courseDiscussionData.attachementUrl"
                      />
                      <img
                        src="/static/icon/user.png"
                        v-else-if="!courseDiscussionData.attachementUrl"
                      />
                    </v-avatar>
                  </v-list-tile-avatar>
                  <v-list-tile-content>
                    <v-list-tile-title>Re: {{ courseDiscussionData.subject }}</v-list-tile-title>
                    <v-list-tile-sub-title>
                      By
                      <span
                        class="info--text"
                        v-if="replyThread.teacherId"
                      >{{ replyThread.teacherId.name }}</span>
                      <!-- message -->
                      <span
                        class="info--text"
                        v-if="replyThread.studentId"
                      >{{ replyThread.studentId.name }}</span>
                      - {{dates(replyThread.created ) }}
                    </v-list-tile-sub-title>
                  </v-list-tile-content>
                </v-list-tile>
              </v-list>
              <v-list class="pa-2 reply-desc">
                <v-list-tile-content>
                  <v-list-tile-title
                    v-show="replyThread.showDescriptionReplyThread"
                  >{{ replyThread.description }}</v-list-tile-title>
                  <v-flex xs12 sm12 md4 v-show="replyThread.showUpdateReplyThread == true">
                    <v-text-field v-model="replyThread.description"></v-text-field>
                    <v-btn
                      flat
                      round
                      dark
                      class="reply-btn right"
                      @click="updateRelpyThreadDiscussion(replyThread)"
                    >Save</v-btn>
                  </v-flex>
                </v-list-tile-content>
              </v-list>
              <v-list class="grey lighten-4 pa-0">
                <v-list-tile-action>
                  <v-spacer></v-spacer>
                  <div v-if="replyThread.teacherId && replyThread.teacherId._id == $store.state.id">
                    <v-btn
                      flat
                      round
                      dark
                      class="reply-btn"
                      @click="deleteRelpyThreadDiscussion(replyThread._id)"
                    >Delete</v-btn>
                    <v-btn
                      flat
                      round
                      dark
                      class="reply-btn mr-4"
                      @click="showUpdateReplyThreadDiscussion(replyThread)"
                    >Edit</v-btn>
                  </div>
                </v-list-tile-action>
              </v-list>
            </v-card>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
    <v-snackbar
      :timeout="timeout"
      :top="y === 'top'"
      :right="x === 'right'"
      :vertical="mode === 'vertical'"
      v-model="snackbar"
      color="success"
    >{{ text }}</v-snackbar>
    <div class="loader" v-if="showLoader">
      <v-progress-circular indeterminate color="white"></v-progress-circular>
    </div>
  </v-container>
</template>

<script>
import http from "@/Services/http.js";
import moment from "moment";

export default {
  data: () => ({
    localStorage: localStorage,
    snackbar: false,
    y: "top",
    x: "right",
    mode: "",
    timeout: 3000,
    text: "",
    showLoader: false,
    loading: false,
    date: null,
    token: "",
    role: "",
    schoolRole: "",
    menu: false,
    courseDiscussionData: {},
    showReplyBox: false,
    replyDescription: "",
    loginId: "",
    editedIndex: -1,
  }),
  methods: {
    dates: function (date) {
      return moment(date).format("MMMM DD, YYYY hh:mm A");
    },
    getDiscussionesThread() {
      // console.log("id", this.getSelectedData.courseId);
      this.showLoader = true;
      http()
        .get("/getParticularCourseDiscussion", {
          params: {
            courseDiscussionId: this.$route.params.discussionId,
          },
        })
        .then((response) => {
          //   console.log("response", response.data.data);
          this.courseDiscussionData = response.data.data;
          for (let i = 0; i < this.courseDiscussionData.length; i++) {
            for (
              let j = 0;
              j < this.courseDiscussionData[i].forumThread.length;
              j++
            ) {
              this.courseDiscussionData[i].forumThread[
                j
              ].showUpdateReplyThread = false;
              this.courseDiscussionData[i].forumThread[
                j
              ].showDescriptionReplyThread = true;
            }
          }
          this.showLoader = false;
          this.showReplyBox = false;
        })
        .catch((error) => {
          //   console.log("err====>", error);
          this.showLoader = false;
          this.snackbar = true;
          this.color = "error";
          this.text = error.response.data.message;
        });
    },
    replyThreadDiscussion() {
      this.showLoader = true;
      var payloadData = {
        courseDiscussionId: this.$route.params.discussionId,
        teacherId: this.loginId,
        description: this.replyDescription,
      };
      http()
        .put("/replyForumThread", payloadData)
        .then((response) => {
          //   console.log("response", response.data.data);
          this.showLoader = false;
          this.getDiscussionesThread();
        })
        .catch((error) => {
          this.showLoader = false;
        });
    },
    showUpdateReplyThreadDiscussion(item) {
      this.editedIndex = this.courseDiscussionData.indexOf(item);
      var editedItem = Object.assign({}, item);
      var arrayOfcourseDiscussionData = [];
      for (let i = 0; i < this.courseDiscussionData.length; i++) {
        for (
          let j = 0;
          j < this.courseDiscussionData[i].forumThread.length;
          j++
        ) {
          if (
            editedItem._id == this.courseDiscussionData[i].forumThread[j]._id
          ) {
            this.courseDiscussionData[i].forumThread[
              j
            ].showUpdateReplyThread = true;
            this.courseDiscussionData[i].forumThread[
              j
            ].showDescriptionReplyThread = false;
          }
        }
        arrayOfcourseDiscussionData.push(this.courseDiscussionData[i]);
      }
      this.courseDiscussionData = arrayOfcourseDiscussionData;
    },
    updateRelpyThreadDiscussion(replyThread) {
      this.showLoader = true;
      var payloadData = {
        forumThreadId: replyThread._id,
        courseDiscussionId: this.$route.params.discussionId,
        teacherId: this.loginId,
        description: replyThread.description,
      };
      http()
        .put("/updateForumThread", payloadData)
        .then((response) => {
          this.showLoader = false;
          this.getDiscussionesThread();
        })
        .catch((error) => {
          this.showLoader = false;
        });
    },
    deleteRelpyThreadDiscussion(id) {
      this.showLoader = true;
      var payloadData = {
        forumThreadId: id,
        courseDiscussionId: this.$route.params.discussionId,
      };
      http()
        .put(
          "/deleteForumThread",
          confirm("Are you sure you want to delete this?") && payloadData
        )
        .then((response) => {
          this.showLoader = false;
          this.getDiscussionesThread();
        })
        .catch((error) => {
          this.showLoader = false;
        });
    },
  },
  mounted() {
    // this.getStudentList();
    this.token = this.$store.state.token;
    this.role = this.$store.state.role;
    this.loginId = this.$store.state.id;
    this.getDiscussionesThread();
  },
};
</script>

<style>
.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;
}
</style>