<script setup lang="ts">
import { format } from 'date-fns'
import { VDataTable } from 'vuetify/labs/VDataTable'
import type { Order } from '@/models/Order'

const props = defineProps<Props>()

const { t } = useI18n()

interface Props {
  orderData: Order
}

const headers = computed(() => [
  { title: '', key: 'data-table-expand' },
  { title: '#', key: 'lineItemNo' },
  { title: t('Item'), key: 'itemId' },
  { title: t('Qty'), key: 'orderedLineQty' },
  { title: t('Date'), key: 'transactionDate' },
  { title: t('Status'), key: 'status' },
  { title: t('Consumed'), key: 'consumed' },
])
</script>

<template>
  <!-- 👉 Order Details -->
  <VCard class="mb-6">
    <VCardItem>
      <template #title>
        <h5 class="text-h5">
          {{ $t('Order lines') }}
        </h5>
      </template>
    </VCardItem>

    <VDivider />

    <VDataTable
      :headers="headers"
      :items="props.orderData.lines"
      density="compact"
      class="text-no-wrap"
      expand-on-click
    >
      <template #item.lineItemNo="{ item }">
        <VChip
          variant="tonal"
          label
        >
          {{ item.lineItemNo }}
        </VChip>
      </template>

      <template #item.status="{ item }">
        <VChip
          variant="outlined"
          label
        >
          {{ item.status }}
        </VChip>
      </template>

      <!-- Expanded Row Data -->
      <template #expanded-row="slotProps">
        <td :colspan="headers.length">
          <VCardText>
            <VTimeline
              truncate-line="both"
              align="start"
              side="end"
              line-color="primary"
              density="compact"
              class="v-timeline-density-compact"
            >
              <template
                v-for="(historyItem, index) in slotProps.item.history"
                :key="index"
              >
                <VTimelineItem
                  dot-color="primary"
                  size="x-small"
                >
                  <div class="d-flex justify-space-between align-center">
                    <div class="app-timeline-title">
                      <VChip
                        variant="outlined"
                        label
                      >
                        {{ historyItem.status }}
                      </VChip>
                      (Id#{{ historyItem.statusId }})
                    </div>
                    <div class="app-timeline-meta">
                      {{ format(historyItem.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}
                    </div>
                  </div>
                </VTimelineItem>
              </template>
            </VTimeline>
          </VCardText>
        </td>
      </template>

      <template #item.transactionDate="{ item }">
        {{ format(new Date(item.transactionDate), 'dd/MM/yyyy HH:mm:ss') }}
      </template>

      <template #item.consumed="{ item }">
        <VChip
          label
          size="x-small"
          :color="item.consumed ? 'success' : 'error'"
        >
          {{ item.consumed ? 'Consumed' : 'Not consumed' }}
        </VChip>
      </template>

      <template #item.fdateCreation="{ item }">
        {{ format(new Date(item.fdateCreation), 'dd/MM/yyyy HH:mm:ss') }}
      </template>

      <template #bottom />
    </VDataTable>
  </VCard>

  <!-- 👉 Order History -->
  <VCard :title="$t('Status order history')">
    <VCardText>
      <VTimeline
        truncate-line="both"
        align="start"
        side="end"
        line-color="primary"
        density="compact"
        class="v-timeline-density-compact"
      >
        <template
          v-for="(historyItem, index) in props.orderData.history"
          :key="index"
        >
          <VTimelineItem
            dot-color="primary"
            size="x-small"
          >
            <div class="d-flex justify-space-between align-center">
              <div class="app-timeline-title">
                <VChip
                  variant="outlined"
                  label
                >
                  {{ historyItem.status }}
                </VChip>
                (Id#{{ historyItem.statusId }})
              </div>
              <div class="app-timeline-meta">
                {{ format(historyItem.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}
              </div>
            </div>
          </VTimelineItem>
        </template>
      </VTimeline>
    </VCardText>
  </VCard>
</template>
