<template>
  <main class="landing-page">
    <div class="container-fluid episode-intro">
                <Header></Header>

      <!-- menu wrapper -->
      <div class="intro-startup">
       <!-- chat box -->
        <div class="bounce-board-wrp" id="cht_box_close">
          <div class="inner-wrp-bc">
            <div class="bc-top-head">
              <span class="bc-head">
                <img src="../assets/images/bounce-icon.svg" /> Bounce Board
              </span>
              <div class="action-sort">
             <!-- <span class="sort-by">SORT BY</span>
                <div class="btn-group">
                  <button
                    type="button"
                    class="bc-sort-list dropdown-toggle"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false"
                  >
                    BEST
                  </button>
                  <div class="dropdown-menu short_by">
                    <a class="dropdown-item" href=""
                      >BEST 1</a
                    >
                    <a class="dropdown-item" href=""
                      >BEST 2</a
                    >
                    <a class="dropdown-item" href=""
                      >BEST 3</a
                    >
                  </div>
                </div> -->
                <a
                  href=""
                  @click="chtbox_close"
                  class="close_chat_bx"
                  ><img src="../assets/images/close.png" alt="close" /></a
                ><!-- close -->
              </div>
              <!-- action sort -->
            </div>
            <!-- top head -->
            <div class="bounce-board-body">
              <!-- all user comments -->
              <ul class="bounced-user-comments">
                <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
                  <div class="bc_brd_l"></div>
                  <!-- border -->
                  <div class="parent-full-width" v-if="cmnt.comment">
                    <div class="full-width">
                      <div class="b-user-head">
                        <img :src="cmnt.user.profilePic" />
                        <span class="head-content">{{ cmnt.user.name }} </span>
                        <ul>
                          <li>
                            <span></span
                            ><img src="../assets/images/u-info-icon.png" />{{
                              cmnt.user.karmaPoints
                            }}pts
                          </li>
                          <li>
                            <span></span>{{ dateGenerator(cmnt.createdAt) }}
                          </li>
                        </ul>
                      </div>
                      <!-- header -->
                      <p>
                        {{ cmnt.comment }}
                      </p>
                      <div class="joined_wrapper">
                        <ul class="joined-info info_bc_spc">
                          <li>
                            <img
                              src="../assets/images/heart.svg"
                              v-if="cmnt.like == false"
                              @click="likeComment(true, cmnt._id)"
                              class="cursor-pointer"
                            />
                            <img
                              src="../assets/images/purple-heart.png"
                              v-if="cmnt.like == true"
                              @click="likeComment(false, cmnt._id)"
                              class="cursor-pointer"
                            />
                          </li>
                          <li>
                            <a href="">
                              {{ cmnt.likes.length }}</a
                            >
                          </li>
                          <li class="comment-spc">
                            <img src="../assets/images/purple-comment.png" />
                          </li>
                          <li>
                            <a href="">
                              {{ cmnt.children.length }}</a
                            >
                          </li>
                        </ul>
                        <div class="add_rply" v-if="!cmnt.childInput">
                          <input
                            type="text"
                            @click="eachRply(cmnt)"
                            class="add_Rply_C"
                            placeholder="Add your reply"
                          />
                        </div>
                        <!-- rly form -->
                      </div>
                      <!-- joined wrapper -->
                    </div>
                    <!-- full width -->
                  </div>
                  <div class="comments-footer each-ft" v-if="cmnt.childInput">
                    <textarea v-model="comment" id="childInput"></textarea>
                    <div class="comments-footer-wrp">
                      <a
                        @click="createChildComment(cmnt)"
                        href=""
                        class="add_comments_chat reply-Wdth"
                        >Reply</a
                      >
                      <a
                        href=""
                        class="discard_bt"
                        @click="discardRply(cmnt)"
                        ><img src="../assets/images/discard.svg"
                      /></a>
                    </div>
                  </div>
                  <!-- parent -->
                  <div
                    class="child-full-width"
                    v-for="(childCmnt, i) in cmnt.children"
                    :key="i"
                  >
                    <div class="full-width">
                      <div class="b-user-head">
                        <img :src="childCmnt.user.profilePic" />
                        <span class="head-content"
                          >{{ childCmnt.user.name }}
                        </span>
                        <ul>
                          <li>
                            <span></span
                            ><img src="../assets/images/u-info-icon.png" />{{
                              childCmnt.user.karmaPoints
                            }}pts
                          </li>
                          <li>
                            <span></span
                            >{{ dateGenerator(childCmnt.createdAt) }}
                          </li>
                        </ul>
                      </div>
                      <p>
                        {{ childCmnt.comment }}
                      </p>
                      <div class="joined_wrapper">
                        <ul class="joined-info info_bc_spc">
                          <li>
                            <img
                              src="../assets/images/heart.svg"
                              v-if="childCmnt.like == false"
                              @click="likeComment(true, childCmnt._id)"
                              class="cursor-pointer"
                            />
                            <img
                              src="../assets/images/purple-heart.png"
                              v-if="childCmnt.like == true"
                              @click="likeComment(false, childCmnt._id)"
                              class="cursor-pointer"
                            />
                          </li>
                          <li>
                            <a href="">
                              {{ childCmnt.likes.length }}</a
                            >
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <!-- eree -->

                  <!-- comments footer -->
                </li>
              </ul>
            </div>
            <!-- bounce board body -->
            <div class="comments-footer" v-if="parentInput">
              <textarea v-model="comment"></textarea>
              <div class="comments-footer-wrp">
                <a
                  href=""
                  class="add_comments_chat"
                  @click="createComment"
                  ><img src="../assets/images/add-comment.svg" /> Comment</a
                >
              </div>
            </div>
            <!-- comments footer -->
          </div>
        </div>
        <!-- bounceboard wrp -->
        <!-- chat box -->

        <div class="allMWrp">
          <div class="mobile-screen-one p-left">
            <div class="top-area-blank"></div>
            <!-- fixed area -->
            <div class="m-screen-comments">
              <div class="single-author-li-comments" v-if="commentExistCheck(0)">
                <div class="a-intro-comments">
                  <p>
                  {{commentList[0].comment}}
                </p>
                <ul class="rly-comment-set">
                  <!-- like/dislike -->
                  <li>
                    <img
                      src="../assets/images/heart.svg"
                      v-if="commentList[0].like == false"
                      @click="likeComment(true, commentList[0]._id)"
                      class="cursor-pointer"
                    />
                    <img
                      src="../assets/images/purple-heart.png"
                      v-if="commentList[0].like == true"
                      @click="likeComment(false, commentList[0]._id)"
                      class="cursor-pointer"
                    />
                    <a href="javascript:void(0);">{{
                      commentList[0].likes.length
                    }}</a>
                  </li>
                  <!-- like/dislike ends -->
                  <li>
                    <img src="../assets/images/rply.svg" />
                    <a href="javascript:void(0);" @click="reply_cht_box(0)"
                      >Reply</a
                    >
                  </li>
                </ul>
                </div>
                <!-- comments box -->
              </div>
              <!-- single author comments -->
              <div class="single-author-li-comments" v-if="commentExistCheck(1)">
                <div class="a-intro-comments">
                   <p>
                  {{commentList[1].comment}}
                </p>
                <ul class="rly-comment-set">
                  <!-- like/dislike -->
                  <li>
                    <img
                      src="../assets/images/heart.svg"
                      v-if="commentList[1].like == false"
                      @click="likeComment(true, commentList[1]._id)"
                      class="cursor-pointer"
                    />
                    <img
                      src="../assets/images/purple-heart.png"
                      v-if="commentList[1].like == true"
                      @click="likeComment(false, commentList[1]._id)"
                      class="cursor-pointer"
                    />
                    <a href="javascript:void(0);">{{
                      commentList[1].likes.length
                    }}</a>
                  </li>
                  <!-- like/dislike ends -->
                  <li>
                    <img src="../assets/images/rply.svg" />
                    <a href="javascript:void(0);" @click="reply_cht_box(1)"
                      >Reply</a
                    >
                  </li>
                </ul>
                </div>
                <!-- comments box -->
              </div>
              <!-- single author comments -->
            </div>
            <!-- comments -->
            <img
              :src="currentSlideData.payload.metaData.mobileImage1"
              class="m-screen"
            />
            <img
              :src="currentSlideData.payload.metaData.authorImage"
              class="user-photo-bottom"
            />
          </div>
          <!-- mobile screen one -->
          <div class="mobile-screen-one p-right">
            <div class="top-area-blank"></div>
            <!-- fixed area -->
            <div class="m-screen-right">
              <div class="single-author-li-comments" v-if="commentExistCheck(2)">
                <div class="a-intro-comments">
                 <p>
                  {{commentList[2].comment}}
                </p>
                <ul class="rly-comment-set">
                  <!-- like/dislike -->
                  <li>
                    <img
                      src="../assets/images/heart.svg"
                      v-if="commentList[2].like == false"
                      @click="likeComment(true, commentList[2]._id)"
                      class="cursor-pointer"
                    />
                    <img
                      src="../assets/images/purple-heart.png"
                      v-if="commentList[2].like == true"
                      @click="likeComment(false, commentList[2]._id)"
                      class="cursor-pointer"
                    />
                    <a href="javascript:void(0);">{{
                      commentList[2].likes.length
                    }}</a>
                  </li>
                  <!-- like/dislike ends -->
                  <li>
                    <img src="../assets/images/rply.svg" />
                    <a href="javascript:void(0);" @click="reply_cht_box(2)"
                      >Reply</a
                    >
                  </li>
                </ul>
                </div>
                <!-- comments box -->
              </div>
              <!-- single author comments -->
              <div class="single-author-li-comments" v-if="commentExistCheck(3)">
                <div class="a-intro-comments">
                  <p>
                  {{commentList[3].comment}}
                </p>
                <ul class="rly-comment-set">
                  <!-- like/dislike -->
                  <li>
                    <img
                      src="../assets/images/heart.svg"
                      v-if="commentList[3].like == false"
                      @click="likeComment(true, commentList[3]._id)"
                      class="cursor-pointer"
                    />
                    <img
                      src="../assets/images/purple-heart.png"
                      v-if="commentList[3].like == true"
                      @click="likeComment(false, commentList[3]._id)"
                      class="cursor-pointer"
                    />
                    <a href="javascript:void(0);">{{
                      commentList[3].likes.length
                    }}</a>
                  </li>
                  <!-- like/dislike ends -->
                  <li>
                    <img src="../assets/images/rply.svg" />
                    <a href="javascript:void(0);" @click="reply_cht_box(3)"
                      >Reply</a
                    >
                  </li>
                </ul>
                </div>
                <!-- comments box -->
              </div>
              <!-- single author comments -->
            </div>
            <!-- comments -->
            <img
              :src="currentSlideData.payload.metaData.mobileImage2"
              class="m-screen"
            />
            <img
              :src="currentSlideData.payload.metaData.authorImage"
              class="user-photo-bottom-r"
            />
          </div>
          <!-- mobile screen Two -->
        </div>

        <!-- single author comments -->
       <div class="footer-nav">
          <div class="footer-top white-bg">
            <div class="row">
              <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
                <div class="row h-100p">
                  <div
                    class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
                  >
                    <div class="ft-comments-group testi-photos-ct">
                      <div class="c-with-photos">
                        <span class="count-comments"
                          >{{ getLastcomment("count", commentList) }}+
                          Comments</span
                        ><!-- count commets -->
                        <ul class="comments-photos">
                          <!-- <li><img src="../assets/images/c-photo-1.png" /></li> -->
                          <!-- <li><img src="../assets/images/c-photo-2.png" /></li> -->
                          <!-- <li><img src="../assets/images/c-photo-3.png" /></li> -->
                        </ul>
                        <!-- comment photos -->
                      </div>
                      <div class="comments-detail all-c-space">
                        <span
                          >{{ getLastcomment("name", commentList) }}
                          <a href="javascript:void(0);" @click="open_ct_box"
                            >View All</a
                          ></span
                        >
                        <p>
                          <!-- I wonder what the difference between “Dunzo Assistant”
                          and “Pickup and Drop... -->
                          {{ getLastcomment("msg", commentList) }}
                        </p>
                      </div>
                      <!-- comments detail -->
                    </div>
                    <!-- comments Group -->
                  </div>
                </div>
              </div>
              <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
                <div class="comment-frm no-c-frm">
                  <div class="row">
                    <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
                      <div class="form-group frm-wdth addfrm-spc">
                        <input
                          type="text"
                          class="form-control"
                          placeholder="Something on your mind?"
                          id="open_ct_box"
                          v-model="comment"
                        />
                      </div>
                    </div>
                    <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
                      <a
                        href="javascript:void(0);"
                        @click="createComment"
                        class="add-comment"
                        ><img src="../assets/images/add-comment.svg" />
                        Comment</a
                      >
                    </div>
                  </div>
                  <!-- comment from -->
                </div>
              </div>
              <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                <ul class="top-intro-bt">
                  <li>
                    <a href="javascript:void(0);" @click="goBack"
                      ><img src="../assets/images/skip-prev.svg" /> Prev</a
                    >
                  </li>
                  <li>
                    <a href="javascript:void(0);" @click="goNext"
                      ><img src="../assets/images/skip-next.svg" /> Skip to next
                      slide</a
                    >
                  </li>
                </ul>
              </div>
              <!-- buttons list -->
            </div>
          </div>
          <!-- footer top -->
          <div class="footer-bottom">
            <ul>
              <li class="active"></li>
              <li></li>
            </ul>
          </div>
          <!-- footer top -->
        </div>
        <!-- footer -->
      </div>
      <!-- body wrapper -->
    </div>
    <!-- main wrapper -->
  </main>
</template>

<script>
import Vue from "vue";
import router from "../router";
import axios from "axios";
import moment from 'moment';
import Header from "./Header";

export default {
  components: {
    Header: Header,
  },
  name: "TwoScreenWithoutInsight",

  data() {
    return {
      allSlide: [],
      currentSlideIndex: null,
      currentSlideData: null,
      //
      usertoken: null,
      commentList: [],
      comment: null,
      parentInput: true,
    };
  },
  mounted() {
    var allSlideData = localStorage.getItem(
      "spotlight_slide" + this.$route.params.caseStudyId
    );
    if (allSlideData) {
      this.allSlide = JSON.parse(allSlideData);
      this.getCurrentSlideData();
    }
    var userdata = localStorage.getItem("spotlight_usertoken");
    if (userdata) {
      userdata = JSON.parse(userdata);
      this.usertoken = userdata.token;
      this.getComment();
    }
  },
  methods: {
    getCurrentSlideData() {
      var i = this.allSlide.findIndex(
        (slide_) => slide_.slideId == this.$route.params.slideId
      );
      this.currentSlideIndex = i;
      this.currentSlideData = this.allSlide[i];
      console.log(this.currentSlideData, "this.usertoken", this.usertoken);
      console.log("currentSlideData", this.currentSlideData);
    },
    goNext() {
      this.currentSlideIndex++;
      this.$router.push({
        name: this.allSlide[this.currentSlideIndex].ur,
        params: {
          caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
          slideId: this.allSlide[this.currentSlideIndex].slideId,
        },
      });
    },
    goBack() {
      this.currentSlideIndex--;
      this.$router.push({
        name: this.allSlide[this.currentSlideIndex].ur,
        params: {
          caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
          slideId: this.allSlide[this.currentSlideIndex].slideId,
        },
      });
    },

    createComment() {
      console.log("===", this.comment);
      var obj = {
        caseStudyId: this.currentSlideData.caseStudyId,
        slideId: this.currentSlideData.slideId,
        comment: this.comment,
       
      };
      axios
        .post("/bounceBoard/comment", obj, {
          headers: {
            Authorization: "Bearer " + this.usertoken,
          },
        })
        .then((response) => {
          this.comment = null;
          this.getComment();
          console.log(response);
        })
        .catch((error) => {
          if (error.response) {
            this.$toaster.error(error.response.data.message);
          }
        });
    },
  createChildComment(cmnt) {
      console.log(cmnt,"===", this.comment);
      var obj = {
        caseStudyId: this.currentSlideData.caseStudyId,
        slideId: this.currentSlideData.slideId,
        comment: this.comment,
        parentId: cmnt._id,
       
      };
      axios
        .post("/bounceBoard/comment", obj, {
          headers: {
            Authorization: "Bearer " + this.usertoken,
          },
        })
        .then((response) => {
          this.comment = null;
          this.discardRply(cmnt);
          this.getComment();
          console.log(response);
        })
        .catch((error) => {
          if (error.response) {
            this.$toaster.error(error.response.data.message);
          }
        });
    },
    getComment() {
      axios
        .get(
          `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
          {
            headers: {
              Authorization: "Bearer " + this.usertoken,
            },
          }
        )
        .then((response) => {
          console.log(response.data);
          var comments = [];
         var keys = Object.keys(response.data.data)
          response.data.data
          keys.forEach((key_) => {
            comments.push(response.data.data[key_])
          });
          comments.forEach((coment_)=>{
            coment_.childInput = false;
          });
          console.log("comments",comments)
          this.commentList = comments;
        })
        .catch((error) => console.log(error));
    },
    dateGenerator(curreDate){
       var todayDate = moment(new Date(), "DD.MM.YYYY");
        var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
        var result = todayDate.diff(endDate, 'days');
        return result;
    },
    goToLogin() {
      this.$router.push("/login");
    },
    goToSignUp() {
      this.$router.push("/");
    },
    chtbox_close() {
      $("#cht_box_close").removeClass("cht_close");
      $("#open_ct_box, .c_hide").show();
      $(".footer-top").addClass("white-bg");
    },
    open_ct_box() {
      $("#cht_box_close").addClass("cht_close");
      $("#open_ct_box, .c_hide").hide();
      $(".footer-top").removeClass("white-bg");
    },
    eachRply(cmnt) {
      cmnt.childInput = true;
      this.parentInput = false;
      this.comment = null;
       setTimeout(() => {
        document.getElementById("childInput").focus();
      }, 100);
    },
    discardRply(cmnt) {
      cmnt.childInput = false;
      this.parentInput = true;
      this.comment = null;
    },
    reply_cht_box(i) {
      console.log(this.commentList, "cmnt");
      $("#cht_box_close").addClass("cht_close");
      $("#open_ct_box, .c_hide").hide();
      $(".footer-top").removeClass("white-bg");
      this.commentList[i].childInput = true;
      this.parentInput = false;
      this.comment = null;
      setTimeout(() => {
        document.getElementById("childInput").focus();
      }, 100);
    },
    likeComment(status, id) {
      console.log("===", this.comment);
      var obj = {
        commentId: id,
        like: status,
      };
      axios
        .post("/bounceBoard/like", obj, {
          headers: {
            Authorization: "Bearer " + this.usertoken,
          },
        })
        .then((response) => {
          this.getComment();
          console.log(response);
        })
        .catch((error) => {
          if (error.response) {
            this.$toaster.error(error.response.data.message);
          }
        });
    },
    getLastcomment(flag, commentArray) {
      var finalComment = null;
      var totalMessage = 0;
      var name = null;
      commentArray.forEach((comment_) => {
        if (comment_.comment != null) {
          name = comment_.user.name;
          finalComment = comment_.comment;
          totalMessage++;
        }
      });
      if (flag == "count") {
        return (totalMessage = totalMessage == 1 ? 1 : totalMessage - 1);
      } else if (flag =="name") {
        return (name = name);
      } else {
        return finalComment;
      }
    },
    commentExistCheck(i) {
      console.log(this.commentList[i].comment);
      var returnValue = false;
      if (this.commentList[i].comment) {
        returnValue = true;
      }
      return returnValue;
    },
  },
};
//
</script>
