<script setup lang="ts">
import type { StoreData } from '@/models/storeData'

interface Props {
  storeData: StoreData
}

const props = defineProps<Props>()
</script>

<template>
  <VRow class="py-6">
    <!-- 👉 Business date & opening hours -->
    <VCol
      cols="12"
      md="3"
      :class="$vuetify.display.mdAndUp ? 'border-e' : 'border-b'"
    >
      <div class="ape-3">
        <div class="d-flex justify-space-between flex-wrap gap-4 flex-column flex-xs-row">
          <div>
            <div class="d-flex mb-4">
              <VAvatar
                variant="tonal"
                color="primary"
                rounded
                size="54"
                class="text-primary me-4"
              >
                <VIcon
                  icon="tabler-calendar-event"
                  size="38"
                />
              </VAvatar>
              <div>
                <span class="text-base">Business date</span>
                <h4 class="text-h4 font-weight-medium text-primary">
                  {{ storeData.openingTransaction.maxDateT }}
                </h4>
              </div>
            </div>

            <div class="d-flex">
              <VAvatar
                variant="tonal"
                color="info"
                rounded
                size="54"
                class="text-primary me-4"
              >
                <VIcon
                  icon="tabler-clock-hour-10"
                  size="38"
                />
              </VAvatar>
              <div>
                <span class="text-base">Opening hours</span>
                <h4 class="text-h4 font-weight-medium text-info">
                  {{ storeData.openingTransaction.maxDateH }}{{ storeData.closingTransaction.maxDateH ? ` / ${storeData.closingTransaction.maxDateH}` : '' }}
                </h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </VCol>

    <!-- 👉 Pending Replication -->
    <VCol
      cols="12"
      md="3"
      :class="$vuetify.display.mdAndUp ? 'border-e' : 'border-b'"
    >
      <div class="d-flex justify-space-between align-center">
        <div class="d-flex flex-column ps-3">
          <h5 class="text-h5 text-high-emphasis mb-0 text-no-wrap">
            Pending replication
          </h5>
          <div class="text-h3 mb-2">
            {{ props.storeData.replication.pendingReplications }}
          </div>
          <span class="mb-1">
            <div>
              <VChip
                variant="tonal"
                color="secondary"
                style="inline-size:45px"
              >
                Min
              </VChip>
              {{ props.storeData.replication.minPendingReplicationDate }}
            </div>
          </span>
          <span class="mb-1">
            <div>
              <VChip
                variant="tonal"
                color="secondary"
                style="inline-size:45px"
              >
                Max
              </VChip>
              {{ props.storeData.replication.maxPendingReplicationDate }}
            </div>
          </span>
        </div>
      </div>
    </VCol>

    <!-- 👉 XSTORE Ticket -->
    <VCol
      cols="12"
      md="3"
      :class="$vuetify.display.mdAndUp ? 'border-e' : 'border-b'"
    >
      <div class="d-flex justify-space-between align-center">
        <div class="d-flex flex-column ps-3">
          <h5 class="text-h5 text-high-emphasis mb-0 text-no-wrap">
            XSTORE Tickets
          </h5>
          <div class="text-h3 mb-2">
            {{ props.storeData.saleTransaction.count }}
          </div>
          <span class="mb-1">
            <div>
              <VChip
                variant="tonal"
                color="secondary"
                style="inline-size:45px"
              >
                Min
              </VChip>
              {{ props.storeData.saleTransaction.minDate }}
            </div>
          </span>
          <span class="mb-1">
            <div>
              <VChip
                variant="tonal"
                color="secondary"
                style="inline-size:45px"
              >
                Max
              </VChip>
              {{ props.storeData.saleTransaction.maxDate }}
            </div>
          </span>
        </div>
      </div>
    </VCol>

    <!-- 👉 DOTSOFT Tickets -->
    <VCol
      cols="12"
      md="3"
    >
      <div class="d-flex justify-space-between align-center">
        <div class="d-flex flex-column ps-3">
          <h5 class="text-h5 text-high-emphasis mb-0 text-no-wrap">
            DOTSOFT Tickets
          </h5>
          <div class="text-h3 mb-2">
            {{ props.storeData.transaction.backOfficeTransactions }}
          </div>
          <span class="mb-1">
            <div>
              <VChip
                variant="tonal"
                color="secondary"
                style="inline-size:45px"
              >
                Min
              </VChip>
              {{ props.storeData.transaction.minBackOfficeTransactionDate }}
            </div>
          </span>
          <span class="mb-1">
            <div>
              <VChip
                variant="tonal"
                color="secondary"
                style="inline-size:45px"
              >
                Max
              </VChip>
              {{ props.storeData.transaction.maxBackOfficeTransactionDate }}
            </div>
          </span>
        </div>
      </div>
    </VCol>
  </VRow>
</template>
