<template>

<div class="wrapper">
  <p class="content">{{ step.content }}</p>
  <br>

  <div v-if="step.email" class="Vlt-form__element">
    <label class="Vlt-label" for="email">Your Email <small class="Vlt-grey-dark">(optional)</small></label>
    <div class="Vlt-input">
      <input type="email" id="email" v-model="email"/>
    </div>
  </div>

  <div class="step-textarea Vlt-form__element" v-bind:class="{ 'Vlt-form__element--error': error }">
    <div class="Vlt-textarea" v-bind:class="{ 'step-textarea__no-content': step.content === undefined }">
      <label for="answer">{{ step.label }}</label>
      <textarea id="answer" :placeholder="step.placeholder" v-model="answer"></textarea>
    </div>
    <small v-if="error" class="Vlt-form__element__error">This field is required</small>
  </div>

  <button v-show="!lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--tertiary Vlt-modal__cancel" v-on:click="reset">Cancel</button>
  <button v-show="lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--secondary Vlt-modal__cancel" v-on:click="reset">Close</button>
  <button v-show="!lastStep" class="Vlt-btn Vlt-btn--app Vlt-btn--secondary" v-on:click="validate">Continue</button>
</div>

</template> <script>

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

export default {

props: ['step', 'lastStep'],
data: function() {
  return { answer: null, error: false, email: null };
},
methods: {
  resetFields: function() {
    this.answer = null;
    this.error = false;
  },
  reset: function() {
    eventHub.$emit('reset-modal');
  },
  validate: function() {
    if (this.answer === null || this.answer === '') {
      this.error = true;
    } else {
      this.error = false;
      if (this.email) {
        store.setEmail(this.email);
      }
      eventHub.$emit('next-step', this.answer);
    }
  }
},
mounted: function() {
  eventHub.$on('reset-modal', this.resetFields);
}

}

</script> <style scoped> .wrapper {

flex-direction: column;
max-width: 434px;

} .content {

white-space: pre-line;

} .step-textarea {

display: flex;
flex-direction: column;

} .step-textarea textarea {

resize: none;
max-width: 441px;
height: 73px;
margin-top: 11px;

} .step-textarea__no-content textarea {

height: 169px;
@media only screen and (min-width: 576px) {
  width: 450px;
};

} </style>