<template>
  <a
    href=""
    class="text-reset notification-item"
    @click.prevent="setSelectedWork(task)"
  >
    <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">{{ gettaskTitleMessage }}</p>
          <p class="mb-1" v-if="gettaskMessage.length">
            {{ gettaskMessage }}
          </p>
          <p class="mb-0">
            <i class="mdi mdi-clock-outline"></i>
            <span key="t-min-ago">{{ task.timeFormattedString }}</span>
          </p>
        </div>
      </div>
      <div class="me-2 text-center action-buttons">
        <span
          v-if="task.is_viewed === false"
          class="badge rounded-pill bg-success float-end"
          >New</span
        >
      </div>
    </div>
  </a>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import { ROOT_ACTION_SET_SELECTED_WORK } from '../constants';

import * as _ from 'lodash';
export default {
  props: {
    task: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {};
  },
  computed: {
    gettaskMessage() {
      if (this.task.task_type === 'TEXT_MESSAGE_FOLLOW_UP') {
        let message = this.task.interaction_details.payload.message;
        if (message.length > 30) {
          return `${message.substring(0, 29)}...`;
        }
        return message;
      }
      return '';
    },
    gettaskTitleMessage() {
      if (
        !_.includes(
          [
            'MISSED_PHONE_CALL_FOLLOW_UP',
            'CHAT_CONVERSATION_FOLLOW_UP',
            'MISSED_CHAT_CONVERSATION_FOLLOW_UP',
            'TEXT_MESSAGE_FOLLOW_UP',
            'WEB_FORM_SUBMISSION_FOLLOW_UP',
            'EMAIL_FOLLOW_UP',
            'CUSTOM_TASK_FOLLOW_UP',
          ],
          this.task.task_type,
        )
      ) {
        return 'A task have been created for you.';
      }
      if (this.task.task_type === 'MISSED_PHONE_CALL_FOLLOW_UP') {
        return `You got a missed call from ${this.task.interaction_details.leadDetails.leadFirstName}  ${this.task.interaction_details.leadDetails.leadLastName}`;
      }
      if (this.task.task_type === 'TEXT_MESSAGE_FOLLOW_UP') {
        return `You got a text message from ${this.task.interaction_details.leadDetails.leadFirstName}  ${this.task.interaction_details.leadDetails.leadLastName}`;
      }
    },
    getIconBackGroundClassObject() {
      let classsObject = {
        'bg-error': false,
        'bg-success': false,
        'bg-primary': true,
      };
      if (
        !_.includes(
          [
            'MISSED_PHONE_CALL_FOLLOW_UP',
            'CHAT_CONVERSATION_FOLLOW_UP',
            'MISSED_CHAT_CONVERSATION_FOLLOW_UP',
            'TEXT_MESSAGE_FOLLOW_UP',
            'WEB_FORM_SUBMISSION_FOLLOW_UP',
            'EMAIL_FOLLOW_UP',
            'CUSTOM_TASK_FOLLOW_UP',
          ],
          this.task.task_type,
        )
      ) {
        return classsObject;
      }
      classsObject['bg-primary'] = false;
      switch (this.task.task_type) {
        case 'MISSED_PHONE_CALL_FOLLOW_UP':
        case 'EMAIL_FOLLOW_UP':
        case 'CUSTOM_TASK_FOLLOW_UP':
          classsObject['bg-danger'] = true;
          break;
        case 'CHAT_CONVERSATION_FOLLOW_UP':
          classsObject['bg-primary'] = true;
          break;
        case 'MISSED_CHAT_CONVERSATION_FOLLOW_UP':
          classsObject['bg-success'] = true;
          break;
        case 'TEXT_MESSAGE_FOLLOW_UP':
          classsObject['bg-danger'] = true;
          break;
        case 'WEB_FORM_SUBMISSION_FOLLOW_UP':
          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,
        'bxs-notification': true,
      };
      if (
        !_.includes(
          [
            'MISSED_PHONE_CALL_FOLLOW_UP',
            'CHAT_CONVERSATION_FOLLOW_UP',
            'MISSED_CHAT_CONVERSATION_FOLLOW_UP',
            'TEXT_MESSAGE_FOLLOW_UP',
            'WEB_FORM_SUBMISSION_FOLLOW_UP',
            'EMAIL_FOLLOW_UP',
            'CUSTOM_TASK_FOLLOW_UP',
          ],
          this.task.task_type,
        )
      ) {
        return classsObject;
      }
      classsObject['bxs-notification'] = false;
      switch (this.task.task_type) {
        case 'MISSED_PHONE_CALL_FOLLOW_UP':
          classsObject['bx-phone'] = true;
          break;
        case 'TEXT_MESSAGE_FOLLOW_UP':
          classsObject['bx-message'] = true;
          break;
        case 'WEB_FORM_SUBMISSION_FOLLOW_UP':
          classsObject['bx-clipboard'] = true;
          break;
        case 'EMAIL_FOLLOW_UP':
        case 'CUSTOM_TASK_FOLLOW_UP':
          classsObject['bx-voicemail'] = true;
          break;
        case 'CHAT_CONVERSATION_FOLLOW_UP':
        case 'MISSED_CHAT_CONVERSATION_FOLLOW_UP':
          classsObject['bx-chat'] = true;
          break;
      }
      return classsObject;
    },
    getTileTitle() {
      switch (this.task.task_type) {
        case 'MISSED_PHONE_CALL_FOLLOW_UP':
          return 'Missed Phone Call';
        case 'CHAT_CONVERSATION_FOLLOW_UP':
          return 'Chat Conversation Follow up';
        case 'TEXT_MESSAGE_FOLLOW_UP':
          return 'Text Message Follow up';
        case 'WEB_FORM_SUBMISSION_FOLLOW_UP':
          return 'Web Form Submission Follow up';
        case 'EMAIL_FOLLOW_UP':
          return 'Email Follow up';
        case 'CUSTOM_TASK_FOLLOW_UP':
          return 'Custom Task Follow Up';
      }
      return this.message;
    },
  },
  methods: {
    ...mapActions('root', {
      setSelectedWork: ROOT_ACTION_SET_SELECTED_WORK,
    }),
  },
};
</script>