<template>
  <main class="landing-page">
    <div class="container-fluid episode-intro">
      <nav class="navbar navbar-expand-sm spotLight-nav">
        <a class="navbar-brand" href="javascript:void(0);"
          ><img src="../assets/images/logo.png"
        /></a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarsExample03"
          aria-controls="navbarsExample03"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
          <span class="navbar-toggler-icon"></span>
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="user-profile-photo insights-profile">
          <a href="javascript:void(0);"><img src="../assets/images/lock.svg" /></a>
        </div>
      </nav>
      <!-- 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="javasript:void(0);"
                      >BEST 1</a
                    >
                    <a class="dropdown-item" href="javasript:void(0);"
                      >BEST 2</a
                    >
                    <a class="dropdown-item" href="javasript:void(0);"
                      >BEST 3</a
                    >
                  </div>
                </div>
                <a
                  href="javasript:void(0);"
                  @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">
                    <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)}}days ago</li>
                        </ul>
                      </div>
                      <!-- header -->
                      <p>
                        {{ cmnt.comment }}
                      </p>
                      <div class="joined_wrapper">
                        <ul class="joined-info info_bc_spc">
                          <li>
                            <img src="../assets/images/purple-heart.png" />
                          </li>
                          <li><a href="javasript:void(0);"> 0</a></li>
                          <li class="comment-spc">
                            <img src="../assets/images/purple-comment.png" />
                          </li>
                          <li><a href="javasript:void(0);"> {{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"></textarea>
                    <div class="comments-footer-wrp">
                      <a
                        @click="createChildComment(cmnt)"
                        href="javasript:void(0);"
                        class="add_comments_chat reply-Wdth"
                        >Reply</a
                      >
                      <a href="javasript:void(0);" 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)}}days ago</li>
                        </ul>
                      </div>
                      <p>
                        {{childCmnt.comment}}
                      </p>
                      <div class="joined_wrapper">
                        <ul class="joined-info info_bc_spc">
                          <li>
                            <img src="../assets/images/purple-heart.png" />
                          </li>
                          <li><a href="javasript:void(0);"> {{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="javasript:void(0);"
                  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="single-author-comments">
          <!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> -->
          <div class="ct-l-400">
                 <div class="single-author-li-comments">
              <div class="a-intro-comments right-corner">
                <p>
                  {{currentSlideData.payload.comments[0].comment}}
                </p>
                <ul class="rly-comment-set">
                  <li>
                    <img src="../assets/images/color-heart.svg" />
                    <a href="javascript:void(0);">0</a>
                  </li>
                  <li>
                    <img src="../assets/images/rply.svg" />
                    <a href="javascript:void(0);" @click="open_ct_box">Reply</a>
                  </li>
                </ul>
              </div>
           
            </div>   <!-- comments box -->
              <div class="single-author-li-comments">
              <div class="a-intro-comments right-corner">
                <p>
                  {{currentSlideData.payload.comments[0].comment}}
                </p>
                <ul class="rly-comment-set">
                  <li>
                    <img src="../assets/images/color-heart.svg" />
                    <a href="javascript:void(0);">0</a>
                  </li>
                  <li>
                    <img src="../assets/images/rply.svg" />
                    <a href="javascript:void(0);" @click="open_ct_box">Reply</a>
                  </li>
                </ul>
              </div>
             
            </div> <!-- comments box -->
          </div>
          <img
            class="s-user-comments m-0"
            :src="currentSlideData.payload.metaData.authorImage"
          />
          <div class="comments-a-wrp ct-width">           
            <div class="single-author-li-comments ">
            <div class="a-intro-comments custom-selected-style custom-selected-style-2">
          
              <div class="top-wrp">
              {{currentSlideData.payload.insight.tag}}  Insight <a href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
              </div>
              <div class="top-head">{{currentSlideData.payload.insight.title}}</div>
               <p>{{currentSlideData.payload.insight.description}}
</p>
<div class="footer">
  <a href="javascript:void(0);" class="cit-16">{{currentSlideData.payload.insight.citations.length}} Citations</a>
  <a href="javascript:void(0);" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a>
  </div><!-- footer -->
            
                </div><!-- comments box -->
            </div><!-- single author comments -->
            <!-- single author comments -->
        
          </div>
        </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"
                          >{{ commentList.length - 1 }}+ 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
                          >{{ commentList[commentList.length - 1].user.name }}
                          <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... -->
                          {{ commentList[commentList.length - 1].comment }}
                        </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="Kathy, 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';
export default {
  name: "noscreenshotSingleautho",
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("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;
    },
    discardRply(cmnt) {
      cmnt.childInput = false;
      this.parentInput = true;

    },
  },
};
//
</script>