<template>
  <main class="landing-page" v-if="currentSlideData">
   
    <div class="container-fluid episode-intro">
    <!-- <nav class="navbar navbar-expand-sm spotLight-nav">
        <a class="navbar-brand" href="javascript:void(0);"><img src="../assets/images/logo.png"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
          <span class="navbar-toggler-icon"></span>
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="user-profile-photo insights-profile">
          <a href="javascript:void(0);"><img src="../assets/images/lock.svg"></a>
        </div>
      </nav> -->
      <Header></Header>

      <!-- menu wrapper -->
      <div class="startup-wrp">

        <!-- <div class="compare-c">
          <div class="logo-1"><img src="../assets/images/logo-1.png" /></div>
           <div class="vs">vs</div>
            <div class="logo-2"><img src="../assets/images/logo-2.png" /></div>
          </div> -->
        <div class="compare-c">
          <div class="logo-2"><img :src="currentSlideData.payload.metaData.logoURL" /></div>
        </div>
          <!-- compare -->
<img src="../assets/images/spot-light.svg" class="epi-bg" />
    <div class="bottom-startup">
        <div class="logo-wrp">
            <a href="javascript:void(0);"><img src="../assets/images/ps-growth.svg" />
            <span>Product Growth</span> 
            </a>
            </div><!-- logo wrp -->
            <div class="title">{{currentSlideData.payload.metaData.name}}</div><!-- title -->
            <div class="author-sec">
              <div class="top">
                <span>Author</span>
                <span class="name">{{currentSlideData.payload.metaData.authors[0]}}</span>
              </div><!-- top section -->
              <div class="bottom">
             
                 <div class="right p-left-0">
                    <span>Last updated</span>
                  <span class="dt">{{ moment(currentSlideData.payload.metaData.date).format("DD.MM.YYYY") }}</span>
                   </div><!-- right -->
                </div><!-- bottom -->
              </div><!-- author section-->
                   <div class="author-sec">
              <div class="top">
                <span>App</span>
                <span class="name">{{currentSlideData.payload.metaData.app}}</span>
              </div><!-- top section -->
            <div class="top">
                <span>Focus</span>
                <span class="name ellipsis">{{createString(currentSlideData.payload.metaData.focusPoint)}}</span>
              </div><!-- top section -->
              </div><!-- app section-->
                         <div class="author-sec info">
              <div class="top">
                <span>Read</span>
                <span class="name">{{currentSlideData.payload.metaData.readTime}} min</span>
              </div><!-- top section -->
            <div class="top bt-brd">
                <span>Platform</span>
                <span class="name">{{currentSlideData.payload.metaData.platForm}}</span>
              </div><!-- top section -->
              </div><!-- info section-->
              <div class="u-img-info">
                <img src="../assets/images/retake-red.svg" v-if="currentSlideData.payload.metaData.type == 'Retake'"/>
                  <img src="../assets/images/behind-red.svg" v-if="currentSlideData.payload.metaData.type == 'Behind-the-scenes'"/>
                  <img src="../assets/images/critique-red.svg" v-if="currentSlideData.payload.metaData.type == 'Critique'"/>
                  <img src="../assets/images/jxtapose.svg" v-if="currentSlideData.payload.metaData.type == 'Juxtapose'"/>
              </div><!-- image info -->
              <div class="start">
                <a href="javascript:void(0);" @click="goNext">
                  <img src="../assets/images/arrow-right.svg" /> 
                  <span>Start</span>
                </a>
                </div><!-- start -->
        </div><!-- bottom startup -->
        
      </div>
      <!-- body wrapper -->
    </div>
    <!-- main wrapper -->
  </main>
</template>

<script>
import Vue from "vue";
import router from "../router";
import Header from "./Header";
import axios from "axios";

export default {
  name: "EpisodeIntro",
components: {
    Header: Header,
  },
  data() {
    return {
      allSlide:[],
      currentSlideIndex:null,
      currentSlideData:null,
    };
  },
  mounted() {
    var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId);
     if (allSlideData) {
      this.allSlide = JSON.parse(allSlideData);
      this.getCurrentSlideData();
     }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(){

    },
    goToLogin() {
      this.$router.push("/login");
    },
    goToSignUp() {
      this.$router.push("/");
    },

    createString(list){
      var name = "";
      list.forEach(element => {
        name = name+','+element;
      });

  console.log("name is",name);
      return name.substring(1);;
    }
    
  },
};
</script>
<style >
.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</style>