<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>Status</h2>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <div class="form-group">
              <float-label label="Code" style="width: 100%;">
                <input
                  type="text"
                  id="Code"
                  name="Code"
                  v-model="status.code"
                  class="form-control uniInput"
                  placeholder="Code"
                  v-bind:class="{
                    'is-valid': status.code,
                    'is-invalid': !requiredField(status.code) && statusLoad,
                  }"
                  v-on:keyup="statusLoad = true"
                  v-on:blur="statusLoad = true"
                />
                <div class="invalid-feedback">Code is required!</div>
              </float-label>
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group">
              <float-label label="Description" style="width: 100%;">
                <input
                  type="text"
                  id="Description"
                  name="Description"
                  v-model="status.description"
                  class="form-control uniInput"
                  placeholder="Description"
                  v-bind:class="{
                    'is-valid': status.description,
                    'is-invalid':
                      !requiredField(status.description) && descriptionLoad,
                  }"
                  v-on:keyup="descriptionLoad = true"
                  v-on:blur="descriptionLoad = true"
                />
                <div class="invalid-feedback">Description is required!</div>
              </float-label>
            </div>
          </div>
        </div>
        <div v-if="boolValidationError" class="row">
          <div class="col">
            <alert :text="errorMessage" :type="errorOccurred" />
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <button class="btn-white-border" @click="SubmitData()">
              Submit
            </button>
            <router-link class="btn-white-border" to="/status/list">
              Close
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from 'vuex'
import alert from '../../shared/alert'
export default {
  name: 'StatusNew',
  data() {
    return {
      boolMessage: false,
      boolValidationError: false,
      showPassword: false,
      statusLoad: false,
      descriptionLoad: false,
    }
  },
  created() {
    this.getStatusList()
  },
  components: {
    alert,
  },
  mounted() {
    this.clearStatus()
    if (this.$route.params.id > 0) {
      console.log(this.$route.params.id)
      this.getSingleStatus(this.$route.params.id)
      console.log(this.status.description)
    }
  },
  computed: {
    ...mapState('status', ['status', 'statusList']),
  },
  methods: {
    ...mapActions('status', [
      'createNewStatus',
      'getSingleStatus',
      'updateStatus',
      'clearStatus',
    ]),
    pushToApi() {
      this.createNewStatus(this.status).then(this.$router.push('/status/list'))
    },
    SubmitData() {
      if (this.validatePage()) {
        console.log('SubmitData')
        if (this.status.id > 0) {
          this.updateStatus(this.status)
        } else {
          this.createNewStatus(this.status)
        }
        this.$router.push('/status/list')
      }
    },
    requiredField: function (tfield) {
      if (tfield) {
        return true
      } else {
        return false
      }
    },
    uniqueStatusCode: function (tfield) {
      if (tfield) {
        if (this.statusList.find((i) => i.code === this.status.code)) {
          return false
        } else {
          return true
        }
      } else {
        return false
      }
    },
    validatePage: function () {
      if (this.status.code && this.status.description) {
        if (!this.uniqueStatusCode(this.status.code)) {
          this.statusLoad = true
          this.descriptionLoad = true
          this.boolValidationError = true
          this.errorOccurred = 'ERROR'
          this.errorMessage = 'Status Code already recorded!'
        } else {
          this.errorOccurred = ''
          this.errorMessage = ''
          this.boolValidationError = false
          return true
        }
      } else {
        this.statusLoad = true
        this.descriptionLoad = true
        this.boolValidationError = true
        this.errorOccurred = 'ERROR'
        this.errorMessage = 'Please check form and correct all input fields!'
        return false
      }
    },
  },
}
</script>

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