<template>
  <div>
    <b-button type="is-primary"
              icon-left="fas fa-comment"
              @click="showFeedback()">
      Feedback
    </b-button>
    <b-modal has-modal-card
             :active.sync="showFeedbackDialog">
      <div class="modal-card">

        <section class="modal-card-body">
          <p class="modal-card-title">User Feedback</p>
          <br />

          <div v-if="hasRecipientOptions">
            <p class="block">
              Comments welcome!&nbsp; Just let us know who they should go to.
            </p>
            <b-field label="Who To Notify?"
                     :type="recipient ? null : 'is-danger'">
              <b-select v-model="recipient">
                <option v-for="option in allRecipientOptions"
                        :key="option.value"
                        :value="option.value">
                  {{ option.label }}
                </option>
              </b-select>
            </b-field>
          </div>

          <div v-if="!hasRecipientOptions">
            <p>
              Questions, suggestions, comments, complaints, etc. regarding this
              website are welcome and may be submitted below.
            </p>

            <b-field label="Referring URL">
              <div class="control">
                {{ referringURL }}
              </div>
            </b-field>
          </div>

          <b-field label="Your Name"
                   v-show="!userUUID">
                   <!-- v-show="!user"> -->
            <b-input v-model="userName"></b-input>
          </b-field>

          <b-field label="Message">
            <b-input v-model="message"
                     type="textarea">
            </b-input>
          </b-field>

          <div class="buttons">
            <b-button @click="cancelFeedback()">
              Cancel
            </b-button>
            <b-button type="is-primary"
                      @click="sendFeedback()"
                      :disabled="sendIsDisabled">
              Send Note
            </b-button>
          </div>
        </section>

      </div>
    </b-modal>
  </div>
</template>

<script>
export default {
    name: 'ByjoveFeedback',
    props: {
        url: String,
        // userUUID: String,
        // user: Object,
        recipientOptions: {
            type: Array,
            default: null,
        },
    },
    data() {
        return {
            showFeedbackDialog: false,
            referringURL: null,
            recipient: null,
            userUUID: null,
            userName: null,
            message: null,
        }
    },
    computed: {
        allRecipientOptions() {
            if (this.recipientOptions !== null) {
                return this.recipientOptions
            }
            return []
        },
        hasRecipientOptions() {
            return !!this.allRecipientOptions.length
        },
        sendIsDisabled() {
            if (this.hasRecipientOptions && !this.recipient) {
                return true
            }
            if (!this.message) {
                return true
            }
            return false
        },
    },
    methods: {

        clearForm() {
            this.recipient = null
            this.message = null
        },

        showFeedback() {
            this.referringURL = location.href
            if (this.$store.state.user) {
                this.userUUID = this.$store.state.user.uuid
            }
            this.showFeedbackDialog = true
        },

        cancelFeedback() {
            this.showFeedbackDialog = false
            // this.clearForm()
        },

        sendFeedback() {
            let params = {
                email_key: this.recipient,
                referrer: this.referringURL,
                user: this.userUUID,
                // user: this.user ? this.user.uuid : null,
                user_name: this.userName,
                message: this.message,
            }
            this.$http.post(this.url, params).then(response => {
                this.showFeedbackDialog = false
                this.clearForm()
                this.$buefy.toast.open({
                    message: "Thank you for your feedback!",
                    type: 'is-success',
                })
            }, response => {
                this.$buefy.toast.open({
                    message: "Something went wrong!",
                    type: 'is-danger',
                })
            })
        },
    },

}
</script>
