<template>
    <v-container fluid class="body-color">
      <!-- ******ANNOUCEMNET DISCUSSION COMMENT ****** -->
      <v-layout>
        <v-flex xs12 v-for="(annoucementData,i) in annoucementData" :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="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>

          <!-- 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 annoucementData.discussionThread.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="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-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,
      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;

            this.snackbar = true;
            this.color = "error";
            this.text = error.response.data.message;

          });
      },
      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>