<template>
  <a href="" class="text-reset notification-item" @click.prevent="">
    <div class="d-flex">
      <div class="avatar-xs me-3">
        <span
          class="avatar-title rounded-circle font-size-16 notification-avatar-2"
          :class="getIconBackGroundClassObject"
        >
          <i class="bx" :class="getIconClassObject"></i>
        </span>
      </div>
      <div class="flex-grow-1">
        <h6 class="mb-1" key="t-your-order">
          {{ getTileTitle }}
        </h6>
        <div class="font-size-12 text-muted">
          <p class="mb-1" key="t-grammer">
            {{ message }}
          </p>
          <p class="mb-0">
            <i class="mdi mdi-clock-outline"></i>
            <span key="t-min-ago">{{ createdAt }}</span>
          </p>
        </div>
      </div>
      <div class="me-2 text-center action-buttons">
        <span
          v-if="is_viewed === false"
          class="badge rounded-pill bg-success float-end"
          >New</span
        >
        <span
          class="font-size-16 text-muted notification-avatar-2"
          @click="$emit('tile_close', notificationId)"
        >
          <i class="bx bxs-x-circle"></i>
        </span>
      </div>
    </div>
  </a>
</template>
<script>
import * as _ from 'lodash';
export default {
  props: {
    type: {
      type: String,
      required: true,
    },
    message: {
      type: String,
      required: true,
    },
    createdAt: {
      type: String,
      required: true,
    },
    notificationId: {
      type: String,
      required: true,
    },
    hyperLink: {
      type: String,
    },
    is_viewed: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {};
  },
  computed: {
    getIconBackGroundClassObject() {
      let classsObject = {
        'bg-error': false,
        'bg-success': false,
        'bg-primary': true,
      };
      if (
        !_.includes(
          [
            'MISSED_CALL',
            'TEXT_MESSAGE',
            'FORM_SUBMISSION',
            'VOICE_MAIL',
            'CHAT_CONVERSATION',
          ],
          this.type,
        )
      ) {
        return classsObject;
      }
      classsObject['bg-primary'] = false;
      switch (this.type) {
        case 'MISSED_CALL':
          classsObject['bg-danger'] = true;
          break;
        case 'TEXT_MESSAGE':
          classsObject['bg-primary'] = true;
          break;
        case 'FORM_SUBMISSION':
          classsObject['bg-success'] = true;
          break;
        case 'VOICE_MAIL':
          classsObject['bg-danger'] = true;
          break;
        case 'CHAT_CONVERSATION':
          classsObject['bg-primary'] = true;
          break;
      }
      return classsObject;
    },
    getIconClassObject() {
      let classsObject = {
        'bx-phone': false,
        'bx-message': false,
        'bx-clipboard': false,
        'bx-voicemail': false,
        'bxs-chat': false,
        'bx-notification': true,
      };

      if (
        !_.includes(
          [
            'MISSED_CALL',
            'TEXT_MESSAGE',
            'FORM_SUBMISSION',
            'VOICE_MAIL',
            'CHAT_CONVERSATION',
          ],
          this.type,
        )
      ) {
        return classsObject;
      }
      classsObject['bx-notification'] = false;
      switch (this.type) {
        case 'MISSED_CALL':
          classsObject['bx-phone'] = true;
          break;
        case 'TEXT_MESSAGE':
          classsObject['bx-message'] = true;
          break;
        case 'FORM_SUBMISSION':
          classsObject['bx-clipboard'] = true;
          break;
        case 'VOICE_MAIL':
          classsObject['bx-voicemail'] = true;
          break;
        case 'CHAT_CONVERSATION':
          classsObject['bx-chat'] = true;
          break;
      }
      return classsObject;
    },
    getTileTitle() {
      switch (this.type) {
        case 'MISSED_CALL':
          return 'Missed Call';
        case 'TEXT_MESSAGE':
          return 'Text Message';
        case 'FORM_SUBMISSION':
          return 'Form Submission';
        case 'VOICE_MAIL':
          return 'Voicemail';
        case 'CHAT_CONVERSATION':
          return 'Chat Conversation';
      }
      return this.message;
    },
  },
};
</script>