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

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = defineProps<Props>()

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { t } = useI18n()

interface Props {
  orderData: Order
}

const panelStatus = ref(0)
</script>

<template>
  <!-- 👉 Receptions -->
  <VExpansionPanels
    v-model="panelStatus"
    variant="accordion"
  >
    <template v-if="orderData.receptions && orderData.receptions.length > 0">
      <VExpansionPanel
        v-for="(section, index) in orderData.receptions"
        :key="index"
        elevation="0"
      >
        <template #title>
          <VCardText class="pa-sm-2">
            <div class="d-flex justify-space-between align-center mb-4">
              <div>
                Recep #{{ index + 1 }} /
                <VChip
                  v-bind="resolveOrderStatus(section.status)"
                  variant="tonal"
                  label
                  size="default"
                />
                {{ section.intransitSystemCd }} / {{ section.intransitLocationCd }}
              </div>
              <div class="d-flex">
                <span class="text-body-1 text-disabled font-weight-medium"> {{ format(section.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}</span>
              </div>
            </div>
          </vcardtext>
        </template>

        <VExpansionPanelText>
          <!-- 👉 Reception lines -->
          <div class="mb-6">
            <VRow>
              <template
                v-for="receptionLine in orderData.receptions[index].lines"
                :key="receptionLine.lineFulfillId"
              >
                <VCol
                  cols="12"
                  md="4"
                  sm="6"
                >
                  <VCard
                    flat
                    border
                  >
                    <VCardText>
                      <div class="d-flex justify-space-between align-center mb-4">
                        <VChip
                          variant="tonal"
                          label
                        >
                          {{ receptionLine.lineItemNo }}
                        </VChip>

                        <div class="d-flex">
                          <span class="text-body-1 font-weight-medium align-center">
                            {{ receptionLine.itemId }}
                          </span>
                        </div>
                      </div>
                      <VList class="card-list mt-1">
                        <VListItem cla>
                          <div class="text-body-1">
                            <span class="font-weight-bold me-2">{{ $t('Package') }}:</span>
                            <span>
                              {{ receptionLine.colisId }}
                            </span>
                          </div>
                        </VListItem>
                        <VListItem cla>
                          <div class="text-body-1">
                            <span class="font-weight-bold me-2">{{ $t('Cd') }}:</span>
                            <span>
                              {{ receptionLine.intransitSystemCd }} /  {{ receptionLine.intransitLocationCd }}
                            </span>
                          </div>
                        </VListItem>
                        <VListItem cla>
                          <div class="text-body-1">
                            <span class="font-weight-bold me-2">{{ $t('Qty') }}:</span>
                            <span>
                              {{ receptionLine.validatedIntransitQty }} / {{ receptionLine.intransitQty }}
                            </span>
                          </div>
                        </VListItem>
                        <VListItem>
                          <div class="text-body-1">
                            <span class="font-weight-bold me-2">{{ $t('Tracking') }}:</span>
                            <span>
                              {{ receptionLine.trackingNumber }}
                            </span>
                          </div>
                        </VListItem>
                        <VListItem>
                          <div class="text-body-1">
                            <span class="font-weight-bold me-2">{{ $t('Weight') }}:</span>
                            <span>
                              {{ receptionLine.orderLineShipWeight }}
                            </span>
                          </div>
                        </VListItem>
                        <VListItem>
                          <VChip
                            v-bind="resolveOrderStatus(receptionLine.status)"
                            variant="tonal"
                            label
                            size="x-small"
                          />
                          {{ format(section.transactionDate, "dd/MM/yyyy HH:mm:ss") }}
                        </VListItem>
                      </VList>
                    </VCardText>
                  </VCard>
                </VCol>
              </template>
            </VRow>
          </div>
        </VExpansionPanelText>
      </VExpansionPanel>
    </template>
    <div
      v-else
      class="text-h4"
    >
      No reception available
    </div>
  </VExpansionPanels>
</template>

<style lang="scss">
.v-expansion-panel-text__wrapper{
  padding-block: 0.75rem !important;
  padding-inline: 0.5rem !important;
}

.v-expansion-panel--active{
  .v-expansion-panel-title{
    border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.12) !important;
  }
}
</style>
