<template>
  <v-container fluid class="body-color">
    <!-- ******ANNOUCEMNET DISCUSSION COMMENT ****** -->
    <v-layout>
      <v-flex xs12 v-for="(annoucementData,i) in annoucementData" :key="i">
        <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="annoucementData.attachementUrl" v-if="annoucementData.attachementUrl" />
                  <img src="/static/icon/user.png" v-else-if="!annoucementData.attachementUrl" />
                </v-avatar>
              </v-list-tile-avatar>
              <v-list-tile-content>
                <v-list-tile-title>{{ annoucementData.discussionType }}</v-list-tile-title>
                <v-list-tile-sub-title>
                  By
                  <span class="info--text" v-if="annoucementData.studentId">{{ annoucementData.studentId.name }}</span>
                  <span class="info--text" v-if="annoucementData.teacherId">{{ annoucementData.teacherId.name }}</span>
                  - {{dates(annoucementData.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>
        <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>
        <v-flex
          xs12
          class="mt-4 pl-5 mx-auto"
          v-for="(replyThread,i) in annoucementData.discussionThread"
          :key="i"
        >
          <v-card class="elevation-0 grey lighten-3" flat>
            <v-list two-line subheader class="grey lighten-3 pa-1">
              <v-list-tile>
                <v-list-tile-avatar>
                  <v-avatar size="46">
                    <img
                      :src="annoucementData.attachementUrl"
                      v-if="annoucementData.attachementUrl"
                    />
                    <img src="/static/icon/user.png" v-else-if="!annoucementData.attachementUrl" />
                  </v-avatar>
                </v-list-tile-avatar>
                <v-list-tile-content>
                  <v-list-tile-title>Re: {{ annoucementData.discussionType }}</v-list-tile-title>
                  <v-list-tile-sub-title>
                    By
                    <span
                      class="info--text"
                      v-if="replyThread.teacherId"
                    >{{ replyThread.teacherId.name }}</span>
                    <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-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-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,
    annoucementData: {},
    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("/getParticularAnnoucement", {
          params: {
            annoucementId: this.$route.params.annoucementId
          }
        })
        .then(response => {
          //   console.log("response", response.data.data);
          this.annoucementData = response.data.data;
          // console.log("response", this.annoucementData);
          for (let i = 0; i < this.annoucementData.length; i++) {
            for (
              let j = 0;
              j < this.annoucementData[i].discussionThread.length;
              j++
            ) {
              if (this.annoucementData[i].discussionThread[j]) {
                this.annoucementData[i].discussionThread[
                  j
                ].showUpdateReplyThread = false;
                this.annoucementData[i].discussionThread[
                  j
                ].showDescriptionReplyThread = true;
              }
            }
          }
          this.showLoader = false;
          this.showReplyBox = false;
        })
        .catch(error => {
          console.log("err====>", error);
          this.showLoader = false;
        });
    },
    replyThreadDiscussion() {
      this.showLoader = true;
      var payloadData = {
        annoucementId: this.$route.params.annoucementId,
        teacherId: this.loginId,
        description: this.replyDescription
      };
      http()
        .put("/replyThread", payloadData)
        .then(response => {
          //   console.log("response", response.data.data);
          this.showLoader = false;
          this.getDiscussionesThread();
        })
        .catch(error => {
          this.showLoader = false;
        });
    },
    showUpdateReplyThreadDiscussion(item) {
      this.editedIndex = this.annoucementData.indexOf(item);
      var editedItem = Object.assign({}, item);
      var arrayOfannoucementData = [];
      for (let i = 0; i < this.annoucementData.length; i++) {
        for (
          let j = 0;
          j < this.annoucementData[i].discussionThread.length;
          j++
        ) {
          if (
            editedItem._id == this.annoucementData[i].discussionThread[j]._id
          ) {
            this.annoucementData[i].discussionThread[
              j
            ].showUpdateReplyThread = true;
            this.annoucementData[i].discussionThread[
              j
            ].showDescriptionReplyThread = false;
          }
        }
        arrayOfannoucementData.push(this.annoucementData[i]);
      }
      this.annoucementData = arrayOfannoucementData;
    },
    updateRelpyThreadDiscussion(replyThread) {
      this.showLoader = true;
      var payloadData = {
        discussionThreadId: replyThread._id,
        annoucementId: this.$route.params.annoucementId,
        teacherId: this.loginId,
        description: replyThread.description
      };
      http()
        .put("/updateThread", payloadData)
        .then(response => {
          this.showLoader = false;
          this.getDiscussionesThread();
        })
        .catch(error => {
          this.showLoader = false;
        });
    },
    deleteRelpyThreadDiscussion(id) {
      this.showLoader = true;
      var payloadData = {
        discussionThreadId: id,
        annoucementId: this.$route.params.annoucementId
      };
      http()
        .put(
          "/deleteThread",
          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>