<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/user.png" /></a>

          </div> -->
        <Header></Header>
  
        <!-- </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" 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="top-area-blank"></div>

            <!-- <img src="../assets/images/slide.png" class="slide-img" /> -->

            <img
              :src="currentSlideData.payload.metaData.mobileImage"
              class="m-screen"
            />

            <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>
                    I wonder what the difference between “
                    <strong>Dunzo Assistant </strong>” and “<strong
                      >Pickup and Drop </strong
                    >” are. If they are the same, there are two “call to actions”
                    for the same workflow
                  </p> -->

                  <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 two-screen-spc-top"
              v-if="commentExistCheck(2)"
            >

              <div class="single-author-li-comments">
                <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>

              <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>
            <!-- single mobile Right insight  -->
          </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: "SingleMobileScreenInsightTwo",

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

      var userdata = localStorage.getItem("spotlight_usertoken");

      if (allSlideData) {
        this.allSlide = JSON.parse(allSlideData);
        this.getCurrentSlideData();
      }

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

        var date = null;

        if (result == 0) {
          date = "Today";
        } else {
          date = result + " days ago";
        }
        return date;

      },

      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>