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

          if(!this.usertoken){
          this.goToLogin();
        }    

        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) {
        if(!this.usertoken){
          this.goToLogin();
        }       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() {
      

        $("#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>