<script setup>
import { computed, useTemplateRef } from 'vue';
import { getLastMessage } from 'dashboard/helper/conversationHelper';
import CardMetaSection from './CardMetaSection.vue';
import CardAvatar from './CardAvatar.vue';
import CardHeader from './CardHeader.vue';
import CardContent from './CardContent.vue';
import CardLabels from './CardLabels.vue';
import SLACardLabel from 'dashboard/components-next/Conversation/Sla/SLACardLabel.vue';

const props = defineProps({
  chat: { type: Object, required: true },
  currentContact: { type: Object, required: true },
  assignee: { type: Object, default: () => ({}) },
  inbox: { type: Object, default: () => ({}) },
  selected: { type: Boolean, default: false },
  isActiveChat: { type: Boolean, default: false },
  compact: { type: Boolean, default: false },
  showAssignee: { type: Boolean, default: false },
  showInboxName: { type: Boolean, default: false },
  hideThumbnail: { type: Boolean, default: false },
  enableSelection: { type: Boolean, default: true },
  isInboxView: { type: Boolean, default: false },
});

const emit = defineEmits(['selectConversation', 'click', 'contextmenu']);

const slaCardLabel = useTemplateRef('slaCardLabel');

const lastMessageInChat = computed(() => getLastMessage(props.chat));
const showLabelsSection = computed(() => props.chat.labels?.length > 0);
const showExpandedPreview = computed(
  () => props.compact && !showLabelsSection.value
);

const voiceCallData = computed(() => ({
  status: props.chat.additional_attributes?.call_status,
  direction: props.chat.additional_attributes?.call_direction,
}));

const unreadCount = computed(() => props.chat?.unread_count);

const hasSlaPolicyId = computed(
  () => props.chat?.sla_policy_id || slaCardLabel.value?.hasSlaThreshold
);

const onSelectConversation = checked => {
  emit('selectConversation', checked);
};
</script>

<template>
  <div
    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full cursor-pointer group transition-all duration-150"
    :class="{
      'active animate-card-select bg-n-alpha-1 dark:bg-n-alpha-3': isActiveChat,
      'selected bg-n-slate-2 dark:bg-n-slate-3': selected,
      'px-0 py-3': compact,
      'px-2 pt-2.5 pb-3 hover:bg-n-alpha-1 rounded-lg': !compact,
    }"
    @click="$emit('click', $event)"
    @contextmenu="$emit('contextmenu', $event)"
  >
    <div class="min-w-0 w-full">
      <CardMetaSection
        v-if="!isInboxView"
        :chat="chat"
        :inbox="inbox"
        :show-inbox-name="showInboxName"
        :show-assignee="showAssignee"
        :assignee="assignee"
      />

      <div
        class="grid gap-2.5 items-start"
        :class="{
          'mt-0.5 grid-cols-1': compact,
          'grid-cols-[auto,1fr]': !compact,
        }"
      >
        <CardAvatar
          v-if="!compact"
          :contact="currentContact"
          :selected="selected"
          :enable-selection="enableSelection"
          :hide-thumbnail="hideThumbnail"
          class="mt-0.5"
          @select-conversation="onSelectConversation"
        />

        <div class="min-w-0 flex flex-col gap-1.5">
          <div class="min-w-0 flex flex-col gap-px">
            <CardHeader
              v-if="!compact"
              :contact-name="currentContact.name"
              :timestamp="chat.timestamp"
              :created-at="chat.created_at"
            />

            <CardContent
              :last-message="lastMessageInChat"
              :voice-call-status="voiceCallData.status"
              :voice-call-direction="voiceCallData.direction"
              :unread-count="unreadCount"
              :show-expanded-preview="showExpandedPreview"
            />
          </div>

          <CardLabels
            v-if="showLabelsSection || isInboxView"
            :labels="chat.labels"
          >
            <template #before>
              <CardMetaSection
                v-if="isInboxView"
                :chat="chat"
                :inbox="inbox"
                :show-assignee="showAssignee"
                :assignee="assignee"
                :is-labels-empty="chat.labels.length === 0"
                inline
              />
              <SLACardLabel
                v-else-if="hasSlaPolicyId"
                ref="slaCardLabel"
                data-before-slot
                :chat="chat"
              />
            </template>
          </CardLabels>
        </div>
      </div>
    </div>
  </div>
</template>
