<template>
    <main class="landing-page">

      <div class="container-fluid episode-intro">

              <Header></Header>

        <!-- menu wrapper -->

        <div class="intro-startup">
          <div class="thanks-wrapper">
            <div class="thanks-l-wrp">
              <div class="thanks-pay-wrp">
                <!-- <img src="../assets/images/thanks.svg" class="thanks-img" /> -->

                <img
                  :src="currentSlideData.payload.metaData.authorImage[0]"
                  class="thanks-img"
                />

                <div class="blacktext-wrp">
                  CHeck out other case studies here
                  <img src="../assets/images/arrow-bottom.svg" />
                </div>

                <ul class="">

                  <!-- <li v-for="(study, i) in caseStudies" :key="i">

                    <a href="">

                      <img :src="study.intro.logoURL" />
                      <span

                        ><img src="../assets/images/p-eye.svg" /> 0 Views</span

                      >
                    </a>

                  </li> -->

                  <!-- <li class="payments-spc-57">

                    <a href="">

                      <img src="../assets/images/g-pay.svg" />
                      <span
                        ><img src="../assets/images/p-eye.svg" /> 19.4k
                        Views</span
                      >
                    </a>
                  </li>

                  <li>

                    <a href="">

                      <img src="../assets/images/bb.svg" />
                      <span
                        ><img src="../assets/images/p-eye.svg" /> 19.4k
                        Views</span
                      >
                    </a>
                  </li> -->
                </ul>
                <!-- payments options -->
                <!-- <ul class="">
                  <li>

                    <a href="">

                      <img src="../assets/images/payment.svg" />
                      <span
                        ><img src="../assets/images/p-eye.svg" /> 19.4k
                        Views</span
                      >
                    </a>
                  </li>
                  <li class="payments-spc-57">

                    <a href="">

                      <img src="../assets/images/uc.svg" />
                      <span
                        ><img src="../assets/images/p-eye.svg" /> 19.4k
                        Views</span
                      >
                    </a>
                  </li>
                </ul> -->
                <!-- payments options -->
              </div>
              <!-- thanks pay wrp -->
              <img
                src="../assets/images/spot-light-bt.svg"
                class="payment-spot-light-bt"
              />
            </div>
            <!-- thanks left wrp -->
            <div class="thanks-r-section">
              <div class="logo-common-wrp">

                <a href=""

                  ><img src="../assets/images/ps-growth.svg" />
                  <span>Product Growth</span>
                </a>
              </div>
              <!-- logo wrp -->

              <div class="clearfix"></div>

              <p>
                Don’t forget to <strong> join the discussion </strong> by
                scrolling back and adding your comments!
              </p>
              <div class="clearfix"></div>

              <a href="" class="back-bt" @click="goHome">

                <span class="s1"></span>
                <span class="s2"></span>
                <span class="s3"></span>
                <span class="s4"></span>
                <img src="../assets/images/refresh.svg" /> Back to home
              </a>
              <ul class="rating-section">
                <li>
                  <p>
                    Excited to <strong> create case studies</strong> or help build
                    Product Growth?
                  </p>

                  <a href="" class="publish" @click="open()">Publish</a>

                </li>
                <li>
                  <p class="wdth">How would you rate this case study?</p>
                  <span class="rating-list">

                    <star-rating @rating-selected ="updateRating" v-bind:star-size="30" v-model="rating" active-color="#514da6">
                    </star-rating>

                    <!-- <a href=""

                      ><img src="../assets/images/f-review.svg"
                    /></a>

                    <a href=""

                      ><img src="../assets/images/f-review.svg"
                    /></a>

                    <a href=""

                      ><img src="../assets/images/e-review.svg"

                    /></a> -->

                  </span>
                </li>
              </ul>
              <div class="follow-us-py">
                <span>Follow us at</span>
                <ul class="p-follows">
                  <li>

                    <a href="">

                      <img src="../assets/images/p-rss.svg" />
                    </a>
                  </li>
                  <li>

                    <a href="">

                      <img src="../assets/images/p-linkedin.svg" />
                    </a>
                  </li>
                  <li>

                    <a href="">

                      <img src="../assets/images/p-twitter.svg" />
                    </a>
                  </li>
                </ul>
              </div>

              <!-- <star-rating v-model="rating"></star-rating> -->

              <!-- follow us -->
              <div class="p-users">
                <span>Author</span>

                <h1>{{ currentSlideData.payload.metaData.authors[0] }}</h1>

                <!-- <span>Author</span>
                <h1>Pramod</h1>
                <span>Author</span>
                <h1>Sarthak</h1> -->

                <span v-if="currentSlideData.payload.metaData.designer"
                  >Designer</span
                >
                <h1>{{ currentSlideData.payload.metaData.designer }}</h1>
                <span v-if="currentSlideData.payload.metaData.illustrations"
                  >Illustrations</span
                >
                <h1>{{ currentSlideData.payload.metaData.illustrations }}</h1>

              </div>
              <!-- users -->
            </div>
            <!-- thanks payment right section -->
          </div>
          <!--- thanks wrapper -->
          <div class="footer-nav">
            <div class="footer-top">
              <ul class="top-intro-bt ps_right">
                <li>

                  <a href="" @click="goBack"

                    ><img src="../assets/images/skip-prev.svg" /> Prev</a
                  >
                </li>
              </ul>
            </div>
            <!-- footer top -->
            <div class="footer-bottom">
              <ul>
                <li class="active"></li>
                <li class="active"></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 Header from "./Header";

  
  export default {

    components: {
      Header: Header,
    },

    name: "Outro",
  
    data() {

      return {
        caseStudies: [],
        allSlide: [],
        currentSlideIndex: null,
        currentSlideData: null,

        rating: 0,

      };
    },
    mounted() {
      var allSlideData = localStorage.getItem(
        "spotlight_slide" + this.$route.params.caseStudyId
      );
      if (allSlideData) {
        this.allSlide = JSON.parse(allSlideData);
        this.getCurrentSlideData();
        this.getCaseStudies();

      }else{

        this.generatecaseStudies();

      }

    },

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

      goHome() {
        this.currentSlideIndex--;
        this.$router.push({
          name: this.allSlide[0].ur,
          params: {
            caseStudyId: this.allSlide[0].caseStudyId,
            slideId: this.allSlide[0].slideId,
          },
        });
      },

  
      getCaseStudies() {
        var userdata = localStorage.getItem("spotlight_usertoken");
        if (userdata) {
          userdata = JSON.parse(userdata);
          axios
            .get("/caseStudy/all", {
              headers: {
                Authorization: "Bearer " + userdata.token,
              },
            })
            .then((response) => {
              console.log(response.data.data.caseStudies);
              this.caseStudies = response.data.data.caseStudies;
            })
            .catch((error) => console.log(error));
        }
      },

  
      getRating() {
        var userdata = localStorage.getItem("spotlight_usertoken");
        if (userdata) {
          userdata = JSON.parse(userdata);
          axios
            .get("/caseStudy/rating?caseStudyId="+this.$route.params.caseStudyId, {
              headers: {
                Authorization: "Bearer " + userdata.token,
              },
            })
            .then((response) => {
              this.rating = response.data.data.Avgrating;
            })
            .catch((error) => console.log(error));
        }
      },

      open(){
        window.open('https://www.productgrowth.org/spotlight#typeform-spotlight');
      },

      updateRating() {
        var userdata = localStorage.getItem("spotlight_usertoken");
        if (userdata) {
          userdata = JSON.parse(userdata);
          var obj = {
            "caseStudyId":this.$route.params.caseStudyId,
            "rating":this.rating
          }
          axios
            .post("/caseStudy/rating",obj, {
              headers: {
                Authorization: "Bearer " + userdata.token,
              },
            })
            .then((response) => {
              console.log("response",response)
              // this.rating = response.data.data.Avgrating;
            })
            .catch((error) => console.log(error));
        }
      },

      goToLogin() {

        this.$router.push("/login");

      },
      goToSignUp() {

        this.$router.push("/");

      },

      goToProfile() {
        this.$router.push("/profile");
      },

    },
  };
  </script>

  <style>
  .vue-star-rating-rating-text[data-v-fde73a0c] {
      margin-left: 7px;
      display: none;
  }
  </style>