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

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

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

interface Props {
  orderData: Order
}

const panelStatus = ref(0)
</script>

<template>
  <!-- 👉 Preparations -->
  <VExpansionPanels
    v-model="panelStatus"
    variant="accordion"
  >
    <template v-if="orderData.preparations && orderData.preparations.length > 0">
      <VExpansionPanel
        v-for="(section, index) in orderData.preparations"
        :key="index"
        elevation="0"
      >
        <template #title>
          <VCardText class="pa-sm-2">
            <div class="d-flex justify-space-between align-center mb-4">
              <div>
                Prep #{{ index + 1 }} /
                <VChip
                  v-bind="resolveOrderStatus(section.status)"
                  variant="tonal"
                  label
                  size="default"
                />
                {{ section.fulfillmentSystemCd }} / {{ section.fulfillmentLocationCd }}
              </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>
          <!-- 👉 Preparation line -->
          <div class="mb-6">
            <VRow>
              <template
                v-for="preparationLine in orderData.preparations[index].lines"
                :key="preparationLine.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
                        >
                          {{ preparationLine.lineItemOms }}
                        </VChip>

                        <div class="d-flex">
                          <span class="text-body-1 font-weight-medium align-center">
                            {{ preparationLine.itemId }} / {{ preparationLine.seasonCode }}
                          </span>
                        </div>
                      </div>
                      <VList class="card-list mt-1">
                        <VListItem cla>
                          <div class="text-body-1">
                            <span class="font-weight-bold me-2">{{ $t('N°Exp') }}:</span>
                            <span>
                              {{ preparationLine.numeroExpedition }}
                            </span>
                          </div>
                        </VListItem>
                        <VListItem cla>
                          <div class="text-body-1">
                            <span class="font-weight-bold me-2">{{ $t('Cd') }}:</span>
                            <span>
                              {{ preparationLine.fulfillmentSystemCd }} /  {{ preparationLine.fulfillmentLocationCd }}
                            </span>
                          </div>
                        </VListItem>
                        <VListItem cla>
                          <div class="text-body-1">
                            <span class="font-weight-bold me-2">{{ $t('Qty') }}:</span>
                            <span>
                              {{ preparationLine.validatedFulfillQty }} / {{ preparationLine.fulfillQty }}
                            </span>
                          </div>
                        </VListItem>
                        <VListItem>
                          <div class="text-body-1">
                            <span class="font-weight-bold me-2">{{ $t('Carrier') }}:</span>
                            <span>
                              {{ preparationLine.carrier }}
                            </span>
                          </div>
                        </VListItem>
                        <VListItem>
                          <div class="text-body-1">
                            <span class="font-weight-bold me-2">{{ $t('Tracking') }}:</span>
                            <span>
                              {{ preparationLine.trackingCode }}
                            </span>
                          </div>
                        </VListItem>
                        <VListItem>
                          <div class="text-body-1">
                            <span class="font-weight-bold me-2">{{ $t('URL') }}:</span>
                            <span>
                              <a
                                v-if="preparationLine.trackingUrl"
                                :href="preparationLine.trackingUrl"
                                target="_blank"
                                rel="noopener noreferrer"
                                style="text-decoration: underline;"
                              >Link</a>
                            </span>
                          </div>
                        </VListItem>
                        <VListItem>
                          <div class="text-body-1">
                            <span class="font-weight-bold me-2">{{ $t('Restocking') }}:</span>
                            <span>
                              {{ preparationLine.restockingCode }}
                            </span>
                          </div>
                        </VListItem>
                        <VListItem>
                          <VChip
                            v-bind="resolveOrderStatus(preparationLine.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 preparation 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>
