<template>

<div class="Vlt-modal__panel">
  <div class="Vlt-modal__dismiss" v-on:click="reset"></div>
  <div class="Vlt-modal__header" v-if="!showSteps">
    <span>Feedback</span>
    <h4 class="Vlt-modal__title">{{title}}</h4>
  </div>

  <div class="Vlt-modal__content">
    <feedback-path v-bind:feedback_path="selectedPath" v-if="showSteps"/>
    <div v-show="!showSteps" class="paths Vlt-form__element" v-bind:class="{ 'Vlt-form__element--error': hasError }">
      <div v-for="(path, index) in paths" class="radio-button Vlt-radio">
        <label :for=index>
          <span class="Vlt-radio__button">
            <input name="feedbackPath" type="radio" :id=index :value=index v-model="currentPathIndex">
            <span class="Vlt-radio__icon"></span>
          </span>
          {{path.question}}
        </label>
      </div>

      <small v-if="hasError" class="Vlt-form__element__error">This field is required</small>
      <button class="Vlt-btn Vlt-btn--app Vlt-btn--tertiary Vlt-modal__cancel" v-on:click="reset">Cancel</button>
      <button class="Vlt-btn Vlt-btn--app Vlt-btn--secondary" v-on:click="onPathSelection">Continue</button>
    </div>
  </div>
</div>

</template> <script>

import FeedbackPath from './FeedbackPath.vue'; import eventHub from './eventHub'; import store from './store';

export default {

props: ['paths', 'title', 'source', 'configId', 'codeLanguage'],
components: { FeedbackPath },
data: function() {
  return {
    currentPathIndex: null,
    selected: false,
    cancelText: 'Cancel',
    hasError: false,
    store: store,
    programmingLanguage: this.codeLanguage,
    programmingLanguageSelectedWhilstOnPage: null,
    programmingLanguageSetByUrl: !!this.codeLanguage
  }
},
computed: {
  showSteps: function() {
    return this.currentPathIndex !== null && this.selected;
  },
  selectedPath: function() {
    return this.paths[this.currentPathIndex];
  },
},
methods: {
  onPathSelection: function() {
    if (this.$el.querySelector('input[type="radio"][name="feedbackPath"]:checked') !== null) {
      this.hasError = false;
      this.selected = true;
      store.setPath(this.currentPathIndex);
      store.setSentiment(this.selectedPath.sentiment);
      this.createOrUpdateFeedback();
    } else {
      this.hasError = true;
    }
  },
  reset: function() {
    this.selected = false;
    this.hasError = false;
    this.currentPathIndex = null;
    this.createOrUpdateFeedback();
    store.clearState();

    Array.from(document.getElementsByClassName('Vlt-modal_visible'), function(modal) {
      modal.classList.remove('Vlt-modal_visible');
    })
    document.body.classList.remove('Vlt-body--modal-open');
    return false;
  },
  parameters: function() {
    return {
      feedback_feedback: Object.assign(
        store.toParam(),
        {
          code_language: this.programmingLanguage,
          code_language_selected_whilst_on_page: this.programmingLanguageSelectedWhilstOnPage,
          code_language_set_by_url: this.programmingLanguageSetByUrl,
        }
      ),
    };
  },
  createOrUpdateFeedback: function() {
    fetch('/feedback/feedbacks', {
      method: 'POST',
      credentials: 'same-origin',
      body: JSON.stringify(this.parameters()),
      headers: { 'Content-Type': 'application/json' }
    })
    .then((response) => {
      if (response.ok) { return response.json() }
      return Promise.reject({ message: 'Bad response from server', response })
    })
    .then((payload) => {
      if (this.selected) {
        store.setFeedbackId(payload.id);
      }
    })
    .catch((error) => {
      console.log(error)
    });
  },
  handleCodeLanguageChange: function(event) {
    this.programmingLanguage = event.detail.language;
    this.programmingLanguageSelectedWhilstOnPage = true;
    this.programmingLanguageSetByUrl = false;
  }
},
mounted: function() {
  document.addEventListener('codeLanguageChange', this.handleCodeLanguageChange);
  store.setSource(this.source);
  store.setConfigId(this.configId);
  eventHub.$on('reset-modal', this.reset);
},
beforeDestroy: function() {
  document.removeEventListener('codeLanguageChange', this.handleCodeLanguageChange.bind(this));
}

} </script> <style scoped> .radio-button {

margin-bottom: 11px;

} .Vlt-modal__panel {

padding: 0px;
width: auto;

} .Vlt-modal__header {

padding: 32px 32px 0 32px;

} .Vlt-modal__title {

margin: auto;
white-space: pre-line;

} .Vlt-modal__content {

padding: 0px;

} .paths {

padding: 32px;
@media only screen and (min-width: 575px) {
  min-width: 500px;
};

} </style>