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

      <!-- profile -->
      <div class="popup-wrp" style="display: none">

        <div class="overlay" @click="hideDialog"></div>

        <div class="popup-set" id="add-profile" style="display: none">

          <div class="popup-header">

            <div class="user-photo common_color">

              <img :src="userData.profilePic" />

            </div>
            <!-- header user -->

            <ul>
              <li>

                <a href="javasript:void(0);"

                  ><img src="../assets/images/upload-cloud.svg" /><span

                    >Upload Avatar</span
                  ></a
                >

              </li>
              <li>

                <a href="javasript:void(0);" @click="getRandomAvatar()"

                  ><img src="../assets/images/randomise.svg" /><span

                    >Randomise Avatar</span
                  ></a
                >
              </li>
            </ul>
          </div>
          <!-- header -->
          <div class="popup-body">
            <form class="popup-forms">
              <div class="row">
                <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
                  <div class="form-group floating-label">
                    <input
                      type="text"
                      class="form-control"

                      v-model="userData.firstName"

                      placeholder=" "
                      id="fname"
                    />
                    <label for="fname">First Name</label>
                  </div>
                </div>
                <!-- input -->
                <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
                  <div class="form-group floating-label">
                    <input
                      type="text"
                      class="form-control"
                      value=""
                      placeholder=" "
                      id="lname"

                      v-model="userData.lastName"

                    />
                    <label for="lname" class="lname">Last Name</label>
                  </div>
                </div>
                <!-- input -->
                <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5">
                  <div class="form-group floating-label">
                    <input
                      type="text"
                      class="form-control"
                      value=""

                      v-model="userData.designation"

                      placeholder=" "
                      id="designation"
                    />
                    <label for="designation">Designation</label>
                  </div>
                </div>
                <!-- input -->
                <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">
                  <div class="form-group floating-label">
                    <input
                      type="text"
                      class="form-control"

                      v-model="userData.organisation"

                      id="company"

                      placeholder=" "

                    />
                    <label for="company">Company</label>
                  </div>
                </div>
                <!-- input -->
                <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                  <div class="form-group floating-label">
                    <textarea
                      type="text"
                      class="form-control"
                      value=""

                      v-model="userData.bio"

                      id="yourself"

                      placeholder=" "

                    ></textarea>
                    <label for="yourself"
                      >Tell others a little about yourself</label
                    >
                  </div>
                </div>
                <!-- input -->
                <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                  <p class="things">Three things that you talk more about</p>

                  <ul class="interests">

                    <li v-for="(interest, i) in userData.interests" :key="i">
                      <span>{{ interest }}</span>
                      <a
                        href="javascript:void(0);"
                        @click="removeInterest(i)"
                        class="cat-minus"

                        ><img src="../assets/images/minus.svg"
                      /></a>
                    </li>

                    <li>

                      <input
                        class=""
                        placeholder="Add interest"

                        v-on:keyup.enter="addInterest"

                        v-model="interestName"
                      />
                      <a href="javascript:void(0);" @click="addInterest()"

                        ><img src="../assets/images/plus-circle.svg"
                      /></a>
                    </li>
                  </ul>
                </div>
                <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                  <p class="things">Choose Background color</p>

                  <ul class="colors">

                    <li>
                      <a
                        href="javascript:void(0);"
                        id="#C4C4C4"
                        class="silver"
                        @click="changeColor('#C4C4C4')"
                      ></a>
                    </li>
                    <li>
                      <a
                        href="javascript:void(0);"
                        id="#FFF6D7"
                        class="milk-punch"
                        @click="changeColor('#FFF6D7')"
                      ></a>
                    </li>
                    <li>
                      <a
                        href="javascript:void(0);"
                        id="#BDDBFF"
                        class="french-pass"
                        @click="changeColor('#BDDBFF')"
                      ></a>
                    </li>
                    <li>
                      <a
                        href="javascript:void(0);"
                        id="#C0FAFE"
                        class="cyan-french-pass"
                        @click="changeColor('#C0FAFE')"
                      ></a>
                    </li>
                    <li>
                      <a
                        href="javascript:void(0);"
                        id="#FFDBDC"
                        class="cosmos"
                        @click="changeColor('#FFDBDC')"
                      ></a>
                    </li>
                    <li>
                      <a
                        href="javascript:void(0);"
                        id="#FEE6AC"
                        class="cape-Honey"
                        @click="changeColor('#FEE6AC')"
                      ></a>
                    </li>
                    <li>
                      <a
                        href="javascript:void(0);"
                        id="#E5DFF0"
                        class="snuff"
                        @click="changeColor('#E5DFF0')"
                      ></a>
                    </li>
                    <li>
                      <a
                        href="javascript:void(0);"
                        id="#DFE7EF"
                        class="catskillWhite"
                        @click="changeColor('#DFE7EF')"
                      ></a>
                    </li>
                    <li>
                      <a
                        href="javascript:void(0);"
                        id="#FFF"
                        class="white"
                        @click="changeColor('#FFF')"
                      ></a>
                    </li>

                  </ul>
                </div>

                <div class="col-lg-12 mt-50">
                  <p class="notifications">
                    Recieve notifications when you recieve a comment/ Upvote
                  </p>
                  <div class="switch-bt-wrp">
                    <label class="switch-btn">
                      <input type="checkbox" class="toggle-btn" />
                      <span class="rounded-toggle"></span>
                    </label>
                    <span class="onoff">on/off</span>
                  </div>
                </div>
                <div class="col-lg-12">
                  <p class="add-socail-ch">
                    Add your social Channels <span></span>
                  </p>
                </div>

  
                <div
                  class="row"
                  style="width: 100%"
                  v-for="(social, i) in selectedSocialLink"
                  :key="i"
                >
                  <div class="position-left col-sm-4 col-md-4 col-lg-4 col-xl-4">
                    <div class="form-group floating-label">
                      <select class="form-group">
                        <option value="Linkedin">{{ social.displayName }}</option>
                      </select>
                      <span class="select-arrow"
                        ><img src="../assets/images/chevron-down.svg"
                      /></span>
                    </div>

                  </div>

                  <!-- input -->
                  <div class="padding-right col-sm-7 col-md-7 col-lg-7 col-xl-7">
                    <div class="form-group floating-label">
                      <input
                        type="text"
                        class="form-control"
                        value=""
                        placeholder="Paste your profile URL here"
                        id=""
                        v-model="social.fieldValue"
                      />
                    </div>

                  </div>

                  <div class="col-sm-1 col-md-1 col-lg-1 col-xl-1">
                    <ul class="interests">
                      <li>
                        <a
                          @click="removeSocialLink(i)"
                          href="javascript:void(0);"
                          class="cat-minus"
                          ><img src="../assets/images/minus.svg"
                        /></a>
                      </li>
                    </ul>

                  </div>
                </div>
                <!-- input -->

                <!-- input -->

                <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">

                  <div class="form-group floating-label">

                    <select
                      class="form-group"
                      v-model="currentLink"
                      v-on:change="addSocialLink(currentLink)"
                    >
                      <option value="null">Add another</option>
                      <option
                        v-for="(social, i) in socialLink"
                        :key="i"
                        :value="social.fieldName"
                      >
                        {{ social.displayName }}
                      </option>

                    </select>
                    <span class="select-arrow"
                      ><img src="../assets/images/chevron-down.svg"
                    /></span>
                  </div>

                </div>

                <!-- input -->

              </div>

              <a href="javascript:void(0);" @click="saveProfile" class="next-bt"

                >Save</a
              >

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

        </div>
        <!-- add profile -->

      </div>
      <!-- profile -->
      <div class="container-fluid inner-wrp">

        <nav class="navbar navbar-expand-sm spotLight-nav">

          <a class="navbar-brand" href="javasript: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="collapse navbar-collapse" id="navbarsExample03">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">

                <a class="nav-link" href="javasript:void(0);">About</a>

              </li>
              <li class="nav-item">

                <a class="nav-link" href="javasript:void(0);">Masterclass</a>

              </li>
              <li class="nav-item">

                <a class="nav-link" href="javasript:void(0);">Stories</a>

              </li>
              <li class="nav-item">

                <a class="nav-link" href="javasript:void(0);">Library</a>

              </li>
            </ul>
          </div>

          <a

            v-if="this.userData.firstLogin"

            href="javasript:void(0);"

            @click="addProfileDialog"
            class="update_profile"
            ><span></span> Update Profile</a
          >

          <div class="">

            <a
              href="javascript:void(0);"
              class="user-profile-photo common_color"
              @click="userprofileshowDialog"
              ><img :src="userData.profilePic"
            /></a>

            <div class="sub-menu-user" id="userprofileshow" style="display: none">

              <ul>

                <li v-if="this.sameUser">

                  <a href="javascript:void(0);" @click="addProfileDialog"
                    >Edit Profile</a
                  >
                </li>

                <li><a href="javascript:void(0);" @click="logout">Log Out</a></li>

              </ul>
            </div>

          </div>

        </nav>

  
        <!-- <Header></Header> -->

        <!-- menu wrapper -->
        <div class="row profile-tab-spc-top">
          <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8">

            <div class="inner-profile-ps common_color">

              <img :src="userData.profilePic" class="" />

            </div>
            <!-- user profile -->

            <div class="user-profile">

              <h1>
                {{ userData.firstName }} {{ userData.lastName }}

                <span

                  href="javasript:void(0);"

                  class="tags no-cursor no-underline"
                  >{{ userData.role }}</span
                >

              </h1>

              <ul class="joined-info">
                <li>

                  <span v-if="this.sameUser">
                    <a
                      href="javascript:void(0);"
                      v-if="!userData.designation && !userData.organisation"
                      @click="addProfileDialog"
                      >Add your work</a
                    >
                  </span>

                  <a
                    class="no-cursor no-underline"
                    href="javascript:void(0);"

                    v-if="userData.designation"

                    >{{ userData.designation }}</a

                  >

                  <a
                    class="no-cursor no-underline"
                    href="javascript:void(0);"

                    v-if="userData.designation && userData.organisation"

                    >at</a
                  >

                  <a
                    class="no-cursor no-underline"
                    href="javascript:void(0);"

                    v-if="userData.organisation"

                    >{{ userData.organisation }}</a

                  >

                  <img src="../assets/images/u-info-icon.png" /> <span></span>
                </li>

                <li>

                  <a href="javasript:void(0);" content="Karma Points" v-tippy>

                    {{ userData.karmaPoints }} Karma</a
                  >
                  <span></span>

                </li>
                <li>

                  <a href="javasript:void(0);" class="no-cursor no-underline"

                    >Joined on

                    {{ moment(userData.createdAt).format("MMM YYYY") }}</a
                  >
                </li>

              </ul>

              <p>{{ userData.bio }}</p>

              <div class="talk-to-me-about" v-if="userData.interests.length != 0">
                <span>Talk to me about</span>
                <strong>{{ createString(userData.interests) }}</strong>
              </div>
              <!-- talk to me about -->

            </div>
          </div>
          <!-- user profile -->
          <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4">

            <div class="list-style-group" v-if="userData.awards.views != null">

              <p>Awards</p>
              <ul class="list-style">
                <li>

                  <a href="javascript:void(0);"
                    ><img src="../assets/images/icon-1.png"
                  /></a>

                </li>
              </ul>
            </div>
            <!-- list style -->
          </div>

        </div>

        <div class="clearfix"></div>
        <div class="row top-brd profile-tab-spc-top">

          <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">

            <ul class="profile-tab">

              <li class="active c-0">
                <a href="javascript:void(0);" @click="caseDialog"

                  >Case-studies({{ caseStudies.length }})</a

                >
              </li>
              <li class="rp-all">
                <a href="javascript:void(0);" @click="repliesDialog"

                  >Comments/Replies({{ this.userComments.length }})</a

                >
              </li>

            </ul>
          </div>

          <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5 social-link-right">

            <ul class="social-connects" v-if="selectedSocialLink.length > 0">

              <li><span>Follow</span></li>

              <li v-for="(social, i) in selectedSocialLink" :key="i">

                <a
                  href="javascript:void(0);"

                  @click="openUrl(social.fieldValue)"
                  class="cursor-pointer"
                  ><img :src="social.image"
                /></a>
              </li>
            </ul>

            <ul class="social-connects" v-if="selectedSocialLink.length == 0">

              <li v-if="this.sameUser">

                <a

                  href="javascript:void(0);"

                  @click="addProfileDialog"

                  class="active cursor-pointer"

                  ><img src="../assets/images/plus.png"
                /></a>
                <span class="connect-social-channel"
                  >Connect your social channels</span
                >
              </li>
            </ul>
          </div>
        </div>
        <!-- tab style -->
        <div class="profile-data-wrp">

          <div class="container-fluid data-wrp" id="case-study-0">

            <div class="row" v-if="caseStudies.length == 0">

              <div class="col-6 col-lg-6">
                <div class="full-w-height-profile ex-light seats_bg">
                  <a

                    href="javasript:void(0);"

                    class="profile-md-bt center-and-spc bt-spc-top"
                    @click="openUrl('https://www.productgrowth.org/spotlight')"
                    >Explore Spotlights</a
                  >
                  <p>Explore the spotlights others has put together</p>
                </div>
                <!-- full width -->
              </div>
              <!-- col 6 -->
              <div class="col-6 col-lg-6">
                <div class="full-w-height-profile ex-light spotlight_bg">
                  <img src="../assets/images/add-role.svg" class="add-role" />
                  <div class="clearfix"></div>
                  <!-- clearfix -->
                  <a

                    href="javasript:void(0);"

                    class="profile-md-bt center-and-spc"
                    @click="
                      openUrl(
                        'https://www.productgrowth.org/spotlight#typeform-spotlight'
                      )
                    "
                    >Publish Spotlight</a
                  >
                  <p>Share your own insights through Spotlight</p>
                </div>
                <!-- full width -->
              </div>
              <!-- col 6 -->

            </div>

  
            <div class="profile-data-wrp" v-if="caseStudies.length != 0">
              <div class="container-fluid data-wrp">
                <div class="row">
                  <div class="" v-for="(study, i) in caseStudies" :key="i">
                    <div class="card-warpper" @click="openStudy(study)">
                      <div class="company-detail">
                        <div class="c-logo">
                          <!-- <img src="../assets/images/image 46.png" /> -->
                          <img :src="study.intro.logoURL" />
                        </div>
                        <div class="c-tag">

                          <img
                            src="../assets/images/retake-blue.svg"
                            v-if="study.intro.type == 'Retake'"
                          />
                          <img
                            src="../assets/images/behind-blue.svg"
                            v-if="study.intro.type == 'Behind-the-scenes'"
                          />
                          <img
                            src="../assets/images/critique-blue.svg"
                            v-if="study.intro.type == 'Critique'"
                          />
                          <img
                            src="../assets/images/juxtapose-blue.svg"
                            v-if="study.intro.type == 'Juxtapose'"
                          />

                        </div>
                      </div>

                      <!-- company detail-->
                      <h1>{{ study.intro.name }}</h1>

                      <div class="user-views">
                        <ul>
                          <li>
                            <img src="../assets/images/eye-1.svg" class="spctp" />
                            {{ study.views }} Views
                          </li>
                          <li>
                            <img src="../assets/images/star-1.svg" />
                            {{ study.avgRating }}
                            <span v-if="!study.avgRating">0</span> Rating
                          </li>
                          <li>
                            <img src="../assets/images/calendar-1.svg" />
                            {{ moment(study.createdAt).format("DD MMM YYYY") }}
                          </li>
                        </ul>
                      </div>
                      <!-- user views -->

                      <div class="u-detail">
                        <img src="../assets/images/user-2.png" />
                        <h2 v-for="(name, j) in study.intro.authors" :key="j">
                          {{ name }}
                        </h2>
                      </div>
                      <!-- user detail -->
                      <p>
                        <span v-for="(area, j) in study.focusAreas" :key="j">
                          {{ area }}
                        </span>
                      </p>

                      <ul class="tags-list">

                        <li v-for="(tags, j) in study.insightTags" :key="j">

                          <a

                            href="javasript:void(0);"

                            class="insight-design"
                            v-if="tags == 'Design'"
                            >Design</a
                          >
                          <a

                            href="javasript:void(0);"

                            class="insight-product"
                            v-if="tags == 'Product'"
                            >Product</a
                          >
                          <a

                            href="javasript:void(0);"

                            class="insight-marketing"
                            v-if="tags == 'Marketing'"
                            >Marketing</a
                          >
                          <a

                            href="javasript:void(0);"

                            class="insight-pricing"
                            v-if="tags == 'Pricing'"
                            >Pricing</a
                          >
                          <a

                            href="javasript:void(0);"

                            class="insight-psychology"
                            v-if="tags == 'Psychology'"
                            >Psychology</a
                          >

                        </li>

                        <!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li>
                        <li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> -->

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

                      <a href="#" class="action-set">
                        <img src="../assets/images/arrow-right-action.svg" />
                      </a>
                      <div class="read-time">

                        <a href="#"
                          ><img src="../assets/images/clock.svg" />
                          {{ study.intro.readTime }} Min Read</a
                        >
                      </div>
                      <!-- read time -->

                    </div>
                    <!-- card wrpper -->
                    <!-- card wrpper -->
                  </div>
                  <!-- all card wrpper -->
                </div>
              </div>
            </div>
            <!-- data wrp -->

          </div>
          <!-- case study 0 -->
          <div
            class="container-fluid data-wrp"
            id="all-replies"
            style="display: none"
          >
            <div class="row">

              <div class="replies col-md-12">
                <div
                  class="replies-wrp"
                  v-for="(comments, j) in userComments"
                  :key="j"
                >
                  <h1>
                    {{ comments.casestudy.intro.name }}
                    <span>{{ comments.casestudy.intro.type }} </span>
                  </h1>

                  <ul class="joined-info">

                    <li>
                      <a href="javasript:void(0);"
                        >{{ dateGenerator(comments.createdAt) }} D</a
                      >
                      <span></span>
                    </li>

                    <li><img src="../assets/images/heart.png" /></li>

                    <li>
                      <a href="javasript:void(0);"> {{ comments.likes }}</a>
                    </li>

                    <li class="comment-spc">
                      <img src="../assets/images/comment.svg" />
                    </li>

                    <li>
                      <a href="javasript:void(0);"> {{ comments.replies }}</a>
                    </li>

                  </ul>
                  <p>

                    {{ comments.comment }}

                    <!-- I wonder what the difference between “<strong>

                      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>

                </div>
                <!-- replies wrapper -->
              </div>
              <!-- all card wrpper -->
            </div>
          </div>
          <!-- all Relpies -->

        </div>
        <!-- data wrp -->

        <!-- body wrapper -->
      </div>
    </main>
  </template>
  
  <script>

  import Vue from "vue";
  import router from "../router";
  import $ from "jquery";

  import axios from "axios";

  import Header from "./Header";

  import moment from "moment";

  export default {
    name: "Profile",

    components: {
      Header: Header,
    },

    data: () => ({
      loggedinFlag: false,
      usertoken: null,

      currentLink: null,

      userData: {

        socialMediaProfiles: {
          facebook: null,
          linkedin: null,
          medium: null,
          twitter: null,
          behance: null,
          dribble: null,
          github: null,
          stackoverflow: null,
          instagram: null,
        },
        awards: {
          views: null,
          likes: null,
          comments: null,
        },
        verified: true,
        phoneNo: null,
        bio: null,
        designation: null,
        organisation: null,

        bgColor: null,
        interests: [],
        karmaPoints: null,
        socialLogin: null,

        firstLogin: null,

        notification: null,
        profilePic: null,
        role: null,
        name: null,
        email: null,
        firstName: null,
        lastName: null,

      },
      caseStudies: [],
      interestName: null,
      oldId: null,

      currentSocialLinkName: null,
      showCompany: false,
      showDesignation: false,

      sameUser: false,

      socialLink: [
        {
          displayName: "Facebook",
          fieldName: "facebook",
          fieldValue: null,
          image: require(`../assets/images/facebook.png`),
        },
        {
          displayName: "Linkedin",
          fieldName: "linkedin",
          fieldValue: null,
          image: require(`../assets/images/linkedin.png`),
        },
        {
          displayName: "Medium",
          fieldName: "medium",
          fieldValue: null,
          image: require(`../assets/images/medium.png`),
        },
        {
          displayName: "Twitter",
          fieldName: "twitter",
          fieldValue: null,
          image: require(`../assets/images/twitter.png`),
        },
        {
          displayName: "Behance",
          fieldName: "behance",
          fieldValue: null,
          image: require(`../assets/images/behance.png`),
        },
        {
          displayName: "Dribble",
          fieldName: "dribble",
          fieldValue: null,

          image: require(`../assets/images/dribbble.png`),

        },
        {
          displayName: "Github",
          fieldName: "github",
          fieldValue: null,
          image: require(`../assets/images/github.png`),
        },
        {
          displayName: "Stackoverflow",
          fieldName: "stackoverflow",
          fieldValue: null,
          image: require(`../assets/images/stack overflow.png`),
        },
        {
          displayName: "Instagram",
          fieldName: "instagram",
          fieldValue: null,

          image: require(`../assets/images/instagram.png`),

        },
      ],
      selectedSocialLink: [],

      userComments: [],

    }),

    mounted() {

      this.userData = {};

      // this.socialLink = [];

      this.userData.interests = [];

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

      var userId = localStorage.getItem("spotlight_id");
      if (userId) {
        if (this.$route.params.id == userId) {
          this.sameUser = true;
        }
      }

      if (userdata) {
        userdata = JSON.parse(userdata);
        this.usertoken = userdata.token;

        // this.getProfile();
        if (this.sameUser) {
          this.getProfileById();
          this.getUserComments();
          this.getCaseStudies();
        }
      }
      if (!this.sameUser) {
        this.getProfileById();
        this.getCaseStudieById();
        this.getUserCommentsById();

      }

    },

    methods: {

      goToSignUp() {

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

      },
      goToReset() {
        this.$router.push("/reset");
      },

      logout() {

        localStorage.removeItem("spotlight_usertoken");

        localStorage.removeItem("spotlight_id");

        localStorage.removeItem("spotlight_email");

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

      },

      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;

      },

      prefillSocialLink(links) {
        var keys = [];
        keys = Object.keys(links);
        keys.forEach((link_) => {
          console.log(link_, ":", links[link_]);
          if (links[link_] != null) {
            var i = this.socialLink.findIndex(
              (links_) => links_.fieldName == link_
            );
            if (i != -1) {
              this.selectedSocialLink.push({
                displayName: this.socialLink[i].displayName,
                fieldName: this.socialLink[i].fieldName,
                image: this.socialLink[i].image,
                fieldValue: links[link_],
              });
            }
          }
        });
        console.log("links-- are--", links);
      },
      addSocialLink(id) {
        this.currentLink = null;
        var i = this.selectedSocialLink.findIndex(
          (link_) => link_.fieldName == id
        );
        var j = this.socialLink.findIndex((links_) => links_.fieldName == id);
        if (i == -1) {
          this.selectedSocialLink.push({
            displayName: this.socialLink[j].displayName,
            fieldName: this.socialLink[j].fieldName,

            image: this.socialLink[j].image,

            fieldValue: null,
          });
        } else {
          this.$toaster.info(this.socialLink[j].displayName + " Already Exist");
        }
      },
      removeSocialLink(i) {
        var name = this.selectedSocialLink[i].fieldName;
        this.userData.socialMediaProfiles[name] = null;
        this.selectedSocialLink.splice(i, 1);

      },

      addInterest() {
        console.log(this.userData.interests.length, "called", this.interestName);
        if (this.userData.interests.length <= 2) {
          this.userData.interests.push(this.interestName);
          this.interestName = null;
        } else {
          this.$toaster.info("Only 3 interest are allowed");
        }
      },
      removeInterest(i) {

        console.log("i", i);

        this.userData.interests.splice(i, 1);

        console.log(" this.userData", this.userData.interests);

      },
      assignClass() {
        var element = document.getElementById(this.userData.bgColor);
        element.classList.add("active");

        var cols = document.getElementsByClassName("common_color");

        for (var i = 0; i < cols.length; i++) {
          cols[i].style.backgroundColor = this.userData.bgColor;
        }

      },

      createString(list) {

        var name = "";

        list.forEach((element) => {
          name = name + "," + element;

        });

        console.log("name is", name);
        return name.substring(1);

      },

      changeColor(clr) {

        console.log(this.oldId, "clr", clr);

        var element = document.getElementById(clr);
        element.classList.add("active");
        var removeelement = document.getElementById(this.oldId);
        removeelement.classList.remove("active");
        this.oldId = clr;
        var cols = document.getElementsByClassName("common_color");
        for (var i = 0; i < cols.length; i++) {

          cols[i].style.backgroundColor = clr;

        }
        this.userData.bgColor = clr;

      },

  
      getProfileById() {
        axios
          .get("/userProfile?userId=" + this.$route.params.id, {})
          .then((response) => {
            if (!response.data.data.socialMediaProfiles) {
              this.userData.socialMediaProfiles = {};
            }
            this.userData = response.data.data;
  
            // this.userData = response.data.data;
            this.oldId = this.userData.bgColor;
            console.log(this.oldId, "this.userData.", this.userData);
            console.log("this.userData.firstLogin ", this.userData.firstLogin);
            this.prefillSocialLink(this.userData.socialMediaProfiles);
            if (this.userData.firstLogin == true) {
              this.addProfileDialog();
            }
            this.assignClass();
            console.log(response.data.data);
          })
          .catch((error) => console.log(error));
      },

      getProfile() {
        axios

          .get("/profile", {
            headers: {
              Authorization: "Bearer " + this.usertoken,
            },
          })
          .then((response) => {

            if (!response.data.data.socialMediaProfiles) {

              this.userData.socialMediaProfiles = {};

            }

            this.userData = response.data.data;

            // this.userData = response.data.data;

            this.oldId = this.userData.bgColor;

            console.log(this.oldId, "this.userData.", this.userData);

            console.log("this.userData.firstLogin ", this.userData.firstLogin);
            this.prefillSocialLink(this.userData.socialMediaProfiles);

            if (this.userData.firstLogin == true) {
              this.addProfileDialog();
            }

            this.assignClass();
            console.log(response.data.data);
          })
          .catch((error) => console.log(error));

      },

      getRandomAvatar() {
        axios
          .get("/randomAvatar", {
            headers: {
              Authorization: "Bearer " + this.usertoken,
            },
          })
          .then((response) => {

            this.userData.profilePic = response.data.imageURL;

            console.log(response.data.imageURL);
          })
          .catch((error) => console.log(error));
      },

      getUserCommentsById() {
        axios
          .get("/userProfile/comments?userId=" + this.$route.params.id, {})
          .then((response) => {
            this.userComments = response.data.data;
            console.log(response.data);
          })
          .catch((error) => console.log(error));
      },

      getUserComments() {
        axios
          .get("/profile/comments", {
            headers: {
              Authorization: "Bearer " + this.usertoken,
            },
          })
          .then((response) => {
            this.userComments = response.data.data;
            console.log(response.data);
          })
          .catch((error) => console.log(error));
      },

      getCaseStudieById() {
        axios
          .get("/profile/caseStudy?userId=" + this.$route.params.id)
          .then((response) => {
            console.log("----", response.data.data.caseStudies);
            this.caseStudies = response.data.data.caseStudies;
          })
          .catch((error) => console.log(error));
      },

      getCaseStudies() {
        axios
          .get("/caseStudy/all", {
            headers: {
              Authorization: "Bearer " + this.usertoken,
            },
          })
          .then((response) => {

            console.log("----", response.data.data.caseStudies);

            this.caseStudies = response.data.data.caseStudies;
          })
          .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.$router.push({
          name: "EpisodeIntro",
          params: {
            caseStudyId: finalSlides[0].caseStudyId,
            slideId: finalSlides[0].slideId,
          },
        });
      },
      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;
      },

      saveProfile() {

        var obj = {};

        if (this.userData.firstLogin == true) {
          this.userData.firstLogin = false;
        }

        this.userData.name =
          this.userData.firstName + " " + this.userData.lastName;

        obj = Object.assign(obj, this.userData);

        // if(!obj.socialMediaProfiles){
        //   obj.socialMediaProfiles = {};
        // }

        this.selectedSocialLink.forEach((element) => {
          var key = element.fieldName;
          obj.socialMediaProfiles[key] = element.fieldValue;
        });

        delete obj.createdAt;
        delete obj.email;
        delete obj.role;
        delete obj.verified;
        delete obj.updatedAt;
        delete obj.__v;
        delete obj._id;
        delete obj.karmaPoints;
        delete obj.awards;
        delete obj.socialLogin;

        delete obj.phoneNo;

        axios
          .put("/profile", obj, {

            headers: {
              Authorization: "Bearer " + this.usertoken,
            },
          })
          .then((response) => {
            // this.userData = response.data.data;

            this.$toaster.success("Profile Updated");

            this.closeDialog();

            console.log(response.data.data);
          })

          .catch((error) => {
            if (error.response) {
              this.$toaster.error(error.response.data.message);
            }
          });

      },

      addProfileDialog() {

        $(".inner-wrp").addClass("body-blur");

        $("#add-social-links").hide();

        $(".popup-wrp, #add-profile").show();

      },

      nextProfileDialog() {

        $("#add-profile").hide();
        $("#add-social-links").show();
        this.saveProfile();
      },
      closeDialog() {
        $(".popup-wrp").hide();
        $(".inner-wrp").removeClass("body-blur");

        // this.saveProfile();

      },

      hideDialog() {
        $(".popup-wrp").hide();
        $(".inner-wrp").removeClass("body-blur");
      },

      ///
      caseDialog() {
        $(".rp-all").removeClass("active");
        $(".c-0").addClass("active");
        $("#all-replies").hide();
        $("#case-study-0").show();
      },
      repliesDialog() {
        $(".c-0").removeClass("active");
        $(".rp-all").addClass("active");
        $("#case-study-0").hide();
        $("#all-replies").show();
      },

      userprofileshowDialog() {
        $("#userprofileshow").toggle();
      },

      openUrl(url) {

        window.open(url);
      },

    },
  };
  </script>

  <style>

  .no-cursor {

    cursor: default !important;
  }

  .no-underline {

    text-decoration: none !important;
  }

  .position-left {
    left: 15px !important;
  }
  .padding-right {
    padding-right: 0px !important;
  }

  
  .social-link-right {
    display: flex;
    flex-flow: column wrap;
    align-content: flex-end;
  }

  </style>