<template>

<div class="Wrapper">
  <div class="Wrapper-content">
    <svg class="Vlt-icon Vlt-grey Nxd-search-icon">
      <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-search-full" />
    </svg>

    <div class="Nxd-search-input">
      <div class="Vlt-composite Vlt-composite--appendedicon">
        <div class="Vlt-composite__prepend Vlt-composite__prepend--icon">
          <svg><use xlink:href="/symbol/volta-icons.svg#Vlt-icon-search"/></svg>
        </div>
        <div class="Vlt-input">
          <input
            v-model="query"
            name="query"
            placeholder="Search"
            id="searchbox-test"
            type="text"
            autoComplete="off"
            v-on:keydown.esc="onEscDownHandler"
            v-on:input="onInputHandler"
            ></input>
        </div>
        <div class="Vlt-composite__append Vlt-composite__append--icon Nxd-search-close">
          <svg><use xlink:href="/symbol/volta-icons.svg#Vlt-icon-cross-bold"/></svg>
        </div>
      </div>
    </div>
  </div>

  <div v-show="showResults" class="Nxd-search">
    <div class="Nxd-search__wrapper">
      <div v-show="loading" class="spinner">
        <i class="icon icon-cog"></i>
      </div>
      <div v-show="!loading" class="Nxd-search__wrapper">
        <div class="Nxd-search__results" v-for="result in results" v-bind:key="result.index">
          <h3 class="Nx-search__title">
            {{ resultTitle(result.index) }}
          </h3>
          <div v-if="result.hits.length > 0" >
            <div v-if="isZendeskArticle(result)">
              <ZendeskArticle v-for="hit in result.hits" v-bind:hit="hit" v-bind:key="hitKey(result, hit)"/>
            </div>
            <div v-else-if="isNDPArticle(result)">
              <NDPArticle v-for="hit in result.hits" v-bind:hit="hit" v-bind:key="hitKey(result, hit)"/>
            </div>
          </div>
          <div v-else>
            <p class="Nxd-search--no-results"><i>No results</i></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</template> <script> import algoliasearch from 'algoliasearch' import debounce from 'lodash/debounce' import NDPArticle from './NDPArticle.vue'; import ZendeskArticle from './ZendeskArticle.vue';

export default {

data: function() {
  return {
    analyticsTriggered: false,
    client: undefined,
    expanded: false,
    loading: false,
    query: '',
    results: [],
    analyticsStrongIndicationOfReadingTimer: undefined,
  }
},
created: function() {
  this.client = algoliasearch(
    document.querySelector('meta[name=algolia_application_id]').getAttribute('content'),
    document.querySelector('meta[name=algolia_search_key]').getAttribute('content')
  );
},
mounted: function() {
  if (document.querySelector('.Nxd-template')) {
    document.querySelector('.Nxd-template').addEventListener('click', this.onClickOutside.bind(this));
  } else if (document.querySelector('.Adp-landing')) {
    document.querySelector('.Adp-landing .wrapper').addEventListener('click', this.onClickOutside.bind(this));
  }
  this.$el.querySelector('.Nxd-search-icon').addEventListener('click', this.handleSearchToggle.bind(this));
  this.$el.querySelector('.Nxd-search-close').addEventListener('click', this.handleSearchToggle.bind(this));
},
onDestroy: function() {
  if (document.querySelector('.Nxd-template')) {
    document.querySelector('.Nxd-template').removeEventListener('click', this.onClickOutside.bind(this));
  } else if (document.querySelector('.Adp-landing')) {
    document.querySelector('.Adp-landing .wrapper').removeEventListener('click', this.onClickOutside.bind(this));
  }
},
computed: {
  showResults: function() {
    return this.query != '';
  }
},
methods: {
  resultTitle: function(name) {
    if (name == 'zendesk_nexmo_articles') {
      return 'Knowledgebase';
    } else if (name.includes('nexmo_developer')) {
      return 'Nexmo Developer';
    }
  },
  isZendeskArticle: function(result) {
    return result.index == 'zendesk_nexmo_articles';
  },
  isNDPArticle: function(result) {
    return result.index.includes('nexmo_developer');
  },
  hitKey: function(result, hit) {
    return result.index + hit.objectID;
  },
  onClickOutside: function(event) {
    if (this.showResults) {
      this.reset();
    }
    if (this.expanded) {
      this.expanded = false;
    }
  },

  handleSearchToggle: function(event) {
    event.preventDefault();
    event.stopPropagation();

    this.toggleSearch();
  },

  toggleSearch: function(hide) {
    let search = this.$el.querySelector('.Nxd-search-input');
    if (hide === true || search.style.display == 'flex') {
      search.style.display = 'none';
    } else {
      search.style.display = 'flex';
    }
  },
  onEscDownHandler: function(event) {
    if (!this.analyticsTriggered && this.query !== '') {
      this.triggerAnalyticalSearch();
    }
    this.reset();
  },
  reset: function() {
    this.resetAnalyticsListeners();
    this.query = '';
    this.results = [];
    this.loading = false;
  },
  onInputHandler: function(event) {
    event.stopPropagation();
    if (this.query === '') {
      this.reset();
    } else {
      debounce(this.handleSearch.bind(this), 250)(event);
    }
  },
  handleSearch: function(event) {
    this.loading = this.query === '';
    this.analyticsTriggered = false;
    this.performSearch();

    this.resetAnalyticsListeners();
    this.analyticsStrongIndicationOfReadingTimer = setTimeout(this.triggerAnalyticalSearch, 2000);
    window.addEventListener('mousemove', this.triggerAnalyticalSearch);
  },
  performSearch: function(analytics = false) {
    const parameters = Array.from(document.querySelectorAll('meta[name=algolia_index]')).map((element) => {
      return {
        indexName: element.getAttribute('content'),
        query: this.query,
        params: {
          analytics: analytics,
          hitsPerPage: analytics ? 1 : 4
        }
      }
    })

    const searchPromise = this.client.search(parameters)

    if (!analytics) {
      searchPromise.then((response) => {
        this.results = response['results'];
        this.loading = false;
        this.toggleSearch(true);
      })
    }
  },
  resetAnalyticsListeners: function() {
    clearTimeout(this.analyticsStrongIndicationOfReadingTimer);
    window.removeEventListener('mousemove', this.triggerAnalyticalSearch);
  },
  triggerAnalyticalSearch: function() {
    this.performSearch(true);
    this.analyticsTriggered = true;
    this.resetAnalyticsListeners();
  }
},
components: {
  ZendeskArticle, NDPArticle
}

} </script> <style scoped> .Wrapper {

top: 55px;
right: 13px;
display: flex;
position: absolute;

} .Wrapper-content {

display: flex;
flex-direction: column;
align-items: flex-end;

} .Nxd-search-input {

display: none;
width: 756px;
padding: 20px 30px;
background: white;
height: 87px;
border-radius: 8px;
margin-top: 5px;
z-index: 10;

} .Vlt-composite {

width: 100%;

} .Nxd-search-icon {

margin-right: 10px;

} searchbox-test {

border: 1px solid white;

} </style>