<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('Created'), key: 'fdateCreation' },
])
</script>

<template>
  <!-- 👉 Order Details -->
  <VCard class="mb-6">
    <VCardItem>
      <template #title>
        <h5 class="text-h5">
          Order Lines
        </h5>
      </template>
    </VCardItem>

    <VDivider />

    <VDataTable
      :headers="headers"
      :items="props.orderData.lines"
      density="compact"
      class="text-no-wrap dt-row-striped"
      expand-on-click
    >
      <!-- Expanded Row Data -->
      <template #expanded-row="slotProps">
        <td :colspan="headers.length">
          <VTable
            density="compact"
            class="text-no-wrap"
          >
            <thead>
              <tr>
                <th class="text-uppercase">
                  Status history
                </th>
                <th class="text-uppercase">
                  Transaction date history
                </th>
                <th class="text-uppercase">
                  Creation date history
                </th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="item in slotProps.item.history"
                :key="item.statusId"
              >
                <td>
                  {{ item.status }}
                </td>
                <td>
                  {{ format(item.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}
                </td>
                <td>
                  {{ format(item.fdateCreation, "EEEE d MMMM yyyy HH:mm:ss") }}
                </td>
              </tr>
            </tbody>
          </VTable>
        </td>
      </template>

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

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

      <template #bottom />
    </VDataTable>

    <VDivider />

    <VCardText>
      <div class="d-flex align-end flex-column">
        <table class="text-high-emphasis">
          <tbody>
            <tr>
              <td class="text-high-emphasis font-weight-medium">
                Tax:
              </td>
              <td style="text-align: end;">
                {{ parseFloat(orderData.common.transaction.transactionTax.toString()).toFixed(2) }}
              </td>
            </tr>
            <tr>
              <td class="text-high-emphasis font-weight-medium">
                Total:
              </td>
              <td style="text-align: end;">
                {{ parseFloat(orderData.common.transaction.transactionTotal.toString()).toFixed(2) }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </VCardText>
  </VCard>
  <!-- 👉 Order History -->
  <VCard title="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">
                Order was {{ historyItem.status }} (Id: #{{ historyItem.statusId }})
              </div>
              <div class="app-timeline-meta">
                {{ format(historyItem.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}
              </div>
            </div>
            <p class="app-timeline-text mb-0">
              Your order has been {{ historyItem.status }} successfully
            </p>
          </VTimelineItem>
        </template>
      </VTimeline>
    </VCardText>
  </VCard>
</template>
