<template>
  <f7-page name="contact">
    <f7-navbar title="Contact" back-link="Back"></f7-navbar>
    <f7-block-title medium style="text-align: center;">Contact the ALVINN team</f7-block-title>
    <f7-block style="display: flex; justify-content: center;">
      <div class="form-container"> 
        <p>
          ALVINN can only get better with your feedback.  Use the form below to send us any questions or let us know how we can improve.
        </p>
        <f7-list class="form-element">
          <f7-list-input v-model:value="userEmail" label="E-mail (optional)" type="email" placeholder="Your e-mail" clear-button />
          <f7-list-input v-model:value="commentType" label="This is a... (optional)" type="select" placeholder="Select comment type">
            <option value="20">Bug</option>
            <option value="22">Feature request</option>
            <option value="25">Question</option>
          </f7-list-input>
          <f7-list-input v-model:value="commentTitle" label="Subject of comment (optional)" type="textarea" resizable placeholder="Type here" />
        </f7-list>
        <f7-text-editor class="form-element comment-editor"/>
        <div style="align-self: flex-end; display: flex; gap: 15px;">
          <f7-button fill @click="clearForm">
            Clear form
          </f7-button>
          <f7-button fill @click="sendFeedback">
            Send feedback
          </f7-button>
        </div>
      </div>
    </f7-block>
  </f7-page>
</template>

<style>
  .form-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .form-element {
    align-self: stretch;
  }
</style>

<script>
  import { f7 } from 'framework7-vue'

  export default {
    data () {
      return {
        commentTitle: "",
        userEmail: "",
        commentType: ""
      }
    },
    computed: {
      commentText () {
        var text = f7.textEditor.get('.comment-editor').getValue()
        if (this.userEmail) {
          text += `\\n\\nSubmitted by: ${this.userEmail}`
        }
        return text
      }
    },
    methods: {
      sendFeedback () {
        var self = this
        var issueURL = `https://gitea.azgeorgis.net/api/v1/repos/Georgi_Lab/ALVINN_f7/issues?access_token=9af8ae15b1ee5a98afcb3083bb488e4cf3c683af`
        var xhr = new XMLHttpRequest()
        xhr.open("POST", issueURL)
        xhr.setRequestHeader('Content-Type', 'application/json')
        xhr.setRequestHeader('accept', 'application/json')
        xhr.onload = function () {
          if (this.status !== 201) {
            console.log(xhr.response)
            const errorResponse = JSON.parse(xhr.response)
            f7.dialog.alert(`ALVINN has encountered an error: ${errorResponse.error}`)
            return;
          }
          f7.dialog.alert('Thank you for your feedback.')
          self.clearForm()
        }
        xhr.send(`{"body": "${this.commentText}", "labels": [${this.commentType}], "title": "${this.commentTitle || 'User submitted comment'}"}`)
      },
      clearForm () {
        this.commentTitle = ''
        this.userEmail = ''
        this.commentType = ''
        f7.textEditor.get('.comment-editor').clearValue();
      }
    }
  }

</script>