<template>
  <main>
  <div v-if="$store.state.username === 'Tro'" class='report_post_modal'>
    <modal-window v-model='showModal' :loading='loading'>
      <div class='report_post_modal__modal' slot='main'>
        <h3>Report this post</h3>
        <div class='report_post_modal--margin'>Select a reason for reporting this post below:</div>
        <b-input type="textarea" :options='reportOptions' v-model='selectedOption' class='report_post_modal--margin' :touch-disabled='true'></b-input>
      </div>
      <div slot='footer'>
        <b-button :loading="loading" class='button button--modal' @click.stop='submitReport'>Submit</b-button>
        <b-button class='button button--modal' @click.stop='setShowModal(false)'>Cancel</b-button>
      </div>
    </modal-window>
    <div class="column is-8">
      <div class="box has-text-centered">
        <div class="columns is-vcentered is-mobile">
          <div class="column">
            <h1>So you're here because you were banned...</h1>
            <p>This page allows you to object to your ban, sending a report to the Kaverti staff with your reason and username on why you should be unbanned</p>
            <p>Your message and submission can only be viewed by Kaverti Staff, alternatively, if your reason is private, but you still want to send it to one staff in particular, this form does not allow that, please send it to a staff of your choice via a platform of your choice. </p>
            <b-button
              class='button is-alert'
              @click='showModal = true'
            >Initiate false ban report</b-button>
          </div>
        </div>
      </div>
    </div>
  </div>
    <section v-else class="hero is-info is-large">
      <div class="hero-body">
        <div class="container">
          <h2>
            Ban appeals
          </h2>
          <h1>
            Ban appeals are coming soon.
          </h1>
        </div>
      </div>
    </section>
  </main>
</template>

<script>
  import ModalWindow from '../ModalWindow'

  import AjaxErrorHandler from '../../assets/js/errorHandler'

  export default {
    name: 'ReportPostModal',
    props: ['value', 'post-id'],
    components: {
      ModalWindow
    },
    data () {
      return {
        showModal: false,
        loading: false,
      }
    },
    methods: {
      setShowModal (val) {
        this.showModal = val
      },
      submitReport () {
        if(this.selectedOption) {
          this.loading  = true

          this.axios
            .post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/unban-request', {
              reason: this.selectedOption
            })
            .then(() => {
              this.setShowModal(false)
              this.selectedOption = 0
              this.loading  = false
            })
            .catch(e => {
              this.loading  = false
              AjaxErrorHandler(this.$store)(e)
            })
        }


      }
    },
    watch: {
      value (val) {
        this.showModal = val
        this.$emit('input', val)
      },
      showModal (val) {
        this.$emit('input', val)
      }
    }
  }
</script>

<style lang='scss' scoped>
  @import '../../assets/scss/variables.scss';

  .report_post_modal {
    @at-root #{&}--margin {
      margin: 0.5rem 0;
    }
    @at-root #{&}__modal {
      padding-top: 1rem;

      h3 {
        margin: 0;
      }
    }
  }
</style>
