import { propsToCopy } from '@iconify/utils/lib/icon-set/get-icons';
<script setup lang="ts">
import { format } from 'date-fns'
import type { Order } from '@/models/Order'

const props = defineProps<Props>()

const resolveConsumed = (consumed: boolean) => {
  if (consumed)
    return { text: 'Consumed', color: 'success' }
  else
    return { text: 'Not consumed', color: 'error' }
}

interface Props {
  orderData: Order
}
</script>

<template>
  <VRow>
    <!-- SECTION Order -->
    <VCol cols="12">
      <VCard v-if="props.orderData">
        <!-- 👉 Order Details -->
        <VCardText>
          <div class="text-disabled text-uppercase text-sm">
            Order Details
          </div>
          <VList class="card-list mt-2">
            <VListItem>
              <div class="text-body-1">
                <span class="font-weight-bold me-2">Origin request:</span>
                <span>
                  {{ props.orderData.common.requestingLocationCd }} / {{ props.orderData.common.requestingSystemCd }}
                </span>
              </div>
            </VListItem>
            <VListItem>
              <div class="text-body-1">
                <span class="font-weight-bold me-2">Cust Id:</span>
                <span>
                  {{ props.orderData.common.customerId }}
                </span>
              </div>
            </VListItem>
            <VListItem>
              <div class="text-body-1">
                <span class="font-weight-bold me-2">Cust. name:</span>
                <span>
                  {{ props.orderData.common.customerLastName }} {{ props.orderData.common.customerFirstName }}
                </span>
              </div>
            </VListItem>
            <VListItem>
              <div class="text-body-1">
                <span class="font-weight-bold me-2">Date creation:</span>
                <span>
                  {{ format(props.orderData.common.fdateCreation, "yyyy-MM-dd HH:mm:ss") }}
                </span>
              </div>
            </VListItem>
            <VListItem>
              <div class="text-body-1">
                <span class="font-weight-bold me-2">Ship for Pickup:</span>
                <span>
                  {{ props.orderData.common.shipforpickupLocationCd }} /  {{ props.orderData.common.shipforpickupSystemCd }}
                </span>
              </div>
            </VListItem>
          </VList>
          <div class="text-disabled text-uppercase mt-4 text-sm">
            Transaction
          </div>
          <VList class="card-list mt-2">
            <VListItem>
              <div class="text-body-1">
                <span class="font-weight-bold me-2">No:</span>
                <span>
                  {{ props.orderData.common.transaction.transactionNo }}
                </span>
              </div>
            </VListItem>
            <VListItem>
              <div class="text-body-1">
                <span class="font-weight-bold me-2">Date:</span>
                <span>
                  {{ format(props.orderData.common.transaction.transactionDate, "yyyy-MM-dd HH:mm:ss") }}
                </span>
              </div>
            </VListItem>
            <VListItem>
              <div class="text-body-1">
                <span class="font-weight-bold me-2">Type:</span>
                <span>
                  {{ props.orderData.common.transaction.transactionTypeDescription }}
                </span>
              </div>
            </VListItem>
          </VList>
        </VCardText>

        <VCardText class="text-center">
          <VBtn>
            Edit XML Details
          </VBtn>
        </VCardText>

        <VCardText class="text-center">
          <VBtn>
            Proximis
          </VBtn>
        </VCardText>

        <VCardText class="text-center">
          <VBtn>
            SQL Obi
          </VBtn>
        </VCardText>
      </VCard>
    </VCol>
  </vrow>
</template>

<style lang="scss" scoped>
.card-list {
  --v-card-list-gap: 0.75rem;
}

.text-capitalize {
  text-transform: capitalize !important;
}
</style>
