<template>
  <div class="container">
    <!-- eslint-disable max-len -->
    <div class="alert mySuccess" v-if="type === 'SUCCESS'">
      <eva-icon name="checkmark-outline" style="margin: 0px 20px"></eva-icon>
      <strong class="color-black">{{ text }}</strong>
    </div>
    <div class="alert myInfo" v-if="type === 'INFO'">
      <eva-icon name="info-outline" style="margin: 0px 20px"></eva-icon>
      <strong class="color-black">{{ text }}</strong>
    </div>
    <div class="alert myWarning" v-if="type === 'WARNING'">
      <eva-icon name="alert-circle-outline" style="margin: 0px 20px"></eva-icon>
      <strong class="color-black">{{ text }}</strong>
    </div>
    <div class="alert myError" v-if="type === 'ERROR'">
      <eva-icon name="slash-outline" style="margin: 0px 20px"></eva-icon>
      <strong class="color-black">{{ text }}</strong>
    </div>
    <div class="alert myError" v-if="type === 'ERRORHTML'">
      <div class="container">
        <div class="row">
          <div class="col-md-1">
            <eva-icon name="slash-outline" style="margin: 0px 20px"></eva-icon>
          </div>
          <div class="col-md-11">
            <p v-if="text.status === 500">
              <strong>Please ensure that all the details have been entered correctly.</strong>
              <br>
              <br>
              <strong>
                Status: 
              </strong>
              {{text.status}} ({{text.statusText}});
              <br>
              <strong>
                Error:
              </strong>
              {{text.data.Message}}
              <br>
              <strong>
                More Detail:
              </strong>
              <br>
              {{text.data.StackTraceString}}
            </p>
            <p v-else>
              <strong>
                Status:
              </strong>
              {{ text.status }} ({{ text.statusText }});
              <br />
              <strong>
                Error:
              </strong>
              {{ text.data.title }};
              <br />
              <strong>
                More Detail:
              </strong>
              <br>
              <p v-html="getMoreInfo()"></p>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: "Alert",
  data() {
    return {
      alertTypes: {
        SUCCESS: "Success",
        INFO: "Info",
        WARNING: "Warning",
        ERROR: "Error",
        ERRORHTML: "Errorhtml"
      }
    };
  },
  props: {
    text: null,
    type: null
  },
  methods:{
    getMoreInfo(){
      var errorList = "<ul>";
      for (var prop in this.text.data.errors) {

        if (Object.prototype.hasOwnProperty.call(this.text.data.errors, prop)) {

          errorList += "<li><strong>" + prop + ":</strong> " + this.text.data.errors[prop] + "</li>";
        }
      }
      errorList += "</ul>";

      return errorList;
    }
  }
};
</script>

<style>
.color-black {
  color: black;
}
</style>
