<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="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" 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="javasript:void(0);">
                              {{ cmnt.likes.length }}</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" id="childInput"></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) }}
                          </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="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-mobileInsight">
           <div class="m-screen-hidden"> 
          <div class="top-area-blank"></div>
          <img :src="currentSlideData.payload.metaData.mobileImage" class="m-screen insight-two-img" />
          </div>
          <div class="single-left-Insight-comments">
            <div class="author-thoughts">
              
            <img
              src="../assets/images/thoughts-upper.svg"
              class="upper-th"
            />
              <img
              :src="currentSlideData.payload.metaData.authorImage"
              class="dynamic-thoughts"
            /> 
              </div><!-- user thoughts -->
            <div class="single-author-li-comments" v-if="commentExistCheck(0)">
              <div class="a-intro-comments custom-c-style">
                <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 custom-c-style">
               <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>
          <!-- single mobile Left insight  -->
          <div class="c-product-insight-wrp">
            <div class="single-author-li-comments">
              <div class="a-intro-comments custom-selected-style">
                <img src="../assets/images/rect.svg" class="rect" />
                <div class="top-wrp">
                  {{currentSlideData.payload.insight.tag}} Insight
                  <a @click="open(currentSlideData.payload.insight.furtherReading[0])"  href="javascript:void(0);"><img src="../assets/images/link-red.svg" /></a>
                </div>
                <!-- <div class="top-head">
                  Decide on using multiple call to action vs single call to
                  action depending on the stage of the user journey
                </div>
                <p>
                  Marketing 101 teaches us to use one single, call to action
                  (CTA) at the top of the funnel before the uer has shown
                  interest in the product. <br /><br />
                  When the user is already onboarded and is in the
                  <strong> engage stage </strong>, it may be better to use a
                  single CTA for each use case in order to
                  <strong> avoid ambiguity.</strong>
                </p> -->
                 <div class="top-head">{{currentSlideData.payload.insight.title}}</div>
               <p>{{currentSlideData.payload.insight.description}}
                <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 -->
          </div>
          <!-- single mobile Right insight  -->
        </div>
        <!-- Single Mobile Insight -->
       <!-- 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: "SingleMobileScreenInsightOne",

  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();
        }else{
      this.getCurrentSlideData();

    }
    var userdata = localStorage.getItem("spotlight_usertoken");
    if (userdata) {
      userdata = JSON.parse(userdata);
      this.usertoken = userdata.token;
      this.getComment();
    }else{
      this.getComment();
    }
  },
  methods: {

    generatecaseStudies(){
      axios
        .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, {
          headers: {
            Authorization: "Bearer " + this.usertoken,
          },
        })
        .then((response) => {
         
          console.log('response',response.data.data);
          this.openStudy(response.data.data);
        })
        .catch((error) => console.log(error));
    },



  openStudy(payload) {
      console.log("payload-", payload);
      payload.intro.date = payload.createdAt;
      payload.intro.focusPoint = payload.focusAreas;
      axios
        .get("/caseStudy/slides?caseStudyId=" + payload._id, {
          headers: {
            Authorization: "Bearer " + this.usertoken,
          },
        })
        .then((response) => {
          this.createSlide(payload, response.data.data);
        })
        .catch((error) => console.log(error));
    },

    createSlide(payload, slides) {
      var finalSlides = [];
      slides.forEach((slides_) => {
        var url = this.assignRoutes(slides_.templateId);
        var obj = {
          forward: true,
          backward: true,
          ur: url,
          slideId: slides_._id,
          caseStudyId: slides_.caseStudyId,
          payload: {
            metaData: slides_.metaData,
            comments: slides_.comments,
            insight: slides_.insight ? slides_.insight : null,
          },
        };
        // slides_
        finalSlides.push(obj);
      });
      console.log("payload", payload);
      // add first slide at begining
      finalSlides.unshift({
        forward: true,
        backward: false,
        ur: "EpisodeIntro",
        slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",
        caseStudyId: payload._id,
        payload: {
          metaData: payload.intro,
          comments: [],
        },
      });
      finalSlides.push({
        forward: true,
        backward: false,
        ur: "Outro",
        slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",
        caseStudyId: payload._id,
        payload: {
          metaData: payload.outro,
          comments: [],
        },
      });

      console.log(finalSlides);
      console.log("payload", payload);
      localStorage.setItem(
        "spotlight_slide" + payload._id,
        JSON.stringify(finalSlides)
      );
       this.allSlide = finalSlides;
      this.getCurrentSlideData();
    },
    assignRoutes(tempId) {
      // /episode-intro
      // /outro
      var routes = [
        {
          url: "AuthorIntro",
          tempId: "T1_RoeMG8130Xko1DvhC3Ou",
        },
        {
          url: "NoScreenshotSingleAuthor",
          tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
        },
        {
          url: "SingleMobileScreenInsightTwo",
          tempId: "T3_cqNIf7tuqL4jyON63dA7",
        },
        {
          url: "TwoScreenWithoutInsight",
          tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
        },
        {
          url: "noscreenshotSingleautho",
          tempId: "T5_za3c3sYgx7bVvtKz5r0e",
        },
        {
          url: "SingleMobileScreenInsightOne",
          tempId: "T6_za3c3sYgx7bVvtKz5sgf",
        },
        {
          url: "TwoScreenWithInsight",
          tempId: "T7_za3c3sYgx7bVvtKzasdf",
        },
        {
          url: "AuthorReadingNow",
          tempId: "T8_zb4d4fYgx7bVvtKzasdf",
        },
        {
          url: "AuthorReadingBreak",
          tempId: "T9_zb3e4fYgy7dVvfKdasdf",
        },
      ];
      var i = routes.findIndex((routes_) => routes_.tempId == tempId);
      return routes[i].url;
    },

    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");
      localStorage.setItem('previous_url_spotlight',JSON.stringify(this.currentSlideData));

    },
    goToSignUp() {
      this.$router.push("/");
    },
   open(url){
      window.open(url);
    },
    chtbox_close() {
      $("#cht_box_close").removeClass("cht_close");
      $("#open_ct_box, .c_hide").show();
      $(".footer-top").addClass("white-bg");
    },
     open_ct_box() {
      if(!this.usertoken){
        this.goToLogin();
      }
      $("#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) {
        if(!this.usertoken){
        this.goToLogin();
      }
      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) {
      if(!this.usertoken){
        this.goToLogin();
      }
      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>