
<template>
  <div>
    <div>
      <h1>Feedback</h1>
    </div>

    <div v-if="isSaved" class="notice notice-success is-dismissible">
      <p><strong>Successfully sent.</strong></p>
    </div>

    <div class="error" v-if="hasErrors()">
      <p v-for="error in errors">
        <strong>ERROR:</strong> {{error}}
      </p>
    </div>

    <form>
      <table class="form-table">
        <tbody>
          <tr>
            <th scope="row"><label :for="name">Name</label></th>
            <td>
              <input v-model="name" :name="name" :id="name" type="text" value="" class="regular-text"/>
            </td>
          </tr>
          <tr>
            <th scope="row"><label :for="emailfrom">Email from</label></th>
            <td>
              <input v-model="emailfrom" :name="emailfrom" :id="emailfrom" type="text" value="" class="regular-text"/>
            </td>
          </tr>
          <tr>
            <th scope="row"><label :for="emailto">Email to</label></th>
            <td>
              <input v-model="emailto" :name="emailto" :id="emailto" type="text" value="" class="regular-text" disabled/>
            </td>
          </tr>
        </tbody>
      </table>

      <div>
        <h2><label :for="message">Message</label></h2>
        <textarea v-model="message" :id="message" :name="message" class="large-text fotkipress-form-textarea"></textarea>
      </div>

      <div>
        <label :for="systeminfo">
          <input v-model="systeminfo" type="checkbox" name="systeminfo" id="systeminfo" value="systeminfo"/>
          Send system information
        </label>
      </div>

      <div class="submit">
        <input type="submit" name="send" id="send" class="button button-primary" value="Send" @click="send($event)"/>
      </div>
    </form>
  </div>
</template>


<script>
import API from './../api';

export default {
    data() {
        return {
            name: '',
            emailfrom: '',
            emailto: '',
            message: '',
            systeminfo: true,
            errors: [],
            isSending: false,
            isSaved: false
        }
    },

    created() {
        API.getFeedbackMailinfo().then((res) => {
            if (res.success) {
                this.name = res.data.name;
                this.emailfrom = res.data.emailfrom;
                this.emailto = res.data.emailto;
            }
        });
    },

    methods: {
        send(evt) {
            evt.preventDefault();

            if (this.isSending) {
                return;
            }

            var data = {
                username: this.name,
                emailfrom: this.emailfrom,
                message: this.message,
                systeminfo: this.systeminfo
            };

            this.isSending = true;

            API.sendFeedback(data).then((res) => {
                if (res.success) {
                    this.message = '';
                    this.showSuccessMessage();
                } else {
                    this.showErrorMessage(res.data);
                }

                this.isSending = false;
            });
        },

        hasErrors() {
            return this.errors.length > 0;
        },

        showSuccessMessage() {
            this.isSaved = true;
            this.errors = [];

            setTimeout(() => {
                this.isSaved = false;
            }, 5000);
        },

        showErrorMessage(errors) {
            this.isSaved = false;
            this.errors = errors || [];
        }
    }
}
</script>
