<template>
  <main id="main" style="margin-top: 200px; padding-bottom: 50px;">
    <div class="container">
      <div class="form">
        <div class="row">
          <div class="col">
            <div class="section-header">
              <h2>New Email Recipient</h2>
            </div>
          </div>
        </div>
        <div class="row mb-5">
          <div class="col">
            <alert :text="alertMessage" :type="alertState" />
          </div>
        </div>
        <div class="row">
          <div class="col">
            <float-label>
              <input
                v-model="recipient.recipientName"
                type="text"
                class="form-control uniInput"
                placeholder="RECIPIENT NAME"
              />
            </float-label>
          </div>
          <div class="col">
            <float-label>
              <input
                v-model="recipient.recipientMail"
                type="text"
                class="form-control uniInput"
                placeholder="RECIPIENT EMAIL"
              />
            </float-label>
          </div>
          <div class="col">
            <float-label fixed label="USAGE">
              <select
                v-model="recipient.recipientUsage"
                class="form-control uniSelect"
              >
                <option value="ContactUs">Contact Us</option>
                <option value="EnquireNow">Enquire Now</option>
                <option value="WeekOfferMade-User">
                  Timeshare Week Offer Made (User)
                </option>
                <option value="WeekOfferMade-Owner">
                  Timeshare Week Offer Made (Admin)
                </option>
                <option value="WeekLoaded-Agent">
                  Timeshare Week Listed (Agent)
                </option>
                <option value="WeekLoaded-Owner">
                  Timeshare Week Listed (Owner)
                </option>
              </select>
            </float-label>
          </div>
        </div>
        <div class="row mt-4">
          <div class="col">
            <button class="btn-solid-blue" @click="sendToApi()">SAVE</button>
          </div>
          <div class="col">
            <router-link class="btn-solid-blue" to="/emailRecipient">
              CANCEL
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
/* eslint-disable */
import { mapActions } from 'vuex'
import alert from '../shared/alert'

export default {
  components: {
    alert,
  },
  data() {
    return {
      recipient: {
        recipientName: '',
        recipientMail: '',
        recipientUsage: '',
      },
      alertMessage: '',
      alertState: '',
    }
  },
  methods: {
    ...mapActions('template', ['addMailRecipient']),
    sendToApi() {
      if (this.checkEmail(this.recipient.recipientMail)) {
        if (this.recipient.recipientUsage != '') {
          this.addMailRecipient(this.recipient).then(() => {
            this.$router.push('/emailRecipient')
          })
        } else {
          this.alertMessage = 'Please select a usage type'
          this.alertState = 'ERROR'
        }
      } else {
        this.alertMessage = 'Invalid Email'
        this.alertState = 'ERROR'
      }
    },
    checkEmail(email) {
      const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      return re.test(String(email).toLowerCase())
    },
  },
}
</script>

<style lang="scss" scoped></style>
