<script setup lang="ts">
import type { Order } from '@/models/Order'
import OrderPanel from '@/views/pages/order/view/OrderPanel.vue'
import OrderTabGeneral from '@/views/pages/order/view/OrderTabGeneralH.vue'
import OrderTabPreparation from '@/views/pages/order/view/OrderTabPreparationH.vue'
import OrderTabReception from '@/views/pages/order/view/OrderTabReceptionH.vue'

const { t } = useI18n()

const route = useRoute('obi-order-details-id')
const orderData = ref<Order>()
const orderTab = ref(null)

const tabs = [
  { title: t('General') },
  { title: t('Preparation') },
  { title: t('Receipt') },
  { title: t('Flow') },
]

const { data, error, execute: fetchOrder } = await useApi<Order>(`/obi/order/${route.params.id}`)

const handleData = () => {
  if (error.value)
    console.log(error.value)
  else if (data.value)
    orderData.value = data.value
}

const refreshData = async () => {
  await fetchOrder()
  handleData()
}

handleData()
</script>

<template>
  <VBreadcrumbs
    class="px-0 py-2"
    :items="[
      { title: t('Home'), to: { name: 'root' } },
      { title: t('Order list'), to: { name: 'obi-order-list' } },
      { title: `#${route.params.id}` },
    ]"
  />
  <div>
    <!-- 👉 Header  -->
    <div class="d-flex justify-space-between align-center flex-wrap gap-y-4 mb-6">
      <div
        v-if="orderData"
        class="d-flex gap-2 align-center mb-0 flex-wrap"
      >
        <h4 class="text-h3 font-weight-medium">
          #{{ orderData.common.orderId }}
        </h4>
        <div class="d-flex gap-2">
          <VChip
            label
            size="x-large"
            v-bind="resolveOrderStatus(orderData.common.statusData.code)"
          />
          <VChip
            label
            size="x-large"
            :color="orderData.common.consumed ? 'success' : 'error'"
          >
            {{ orderData.common.consumed ? 'Consumed' : 'Not consumed' }}
          </VChip>
        </div>
      </div>
      <div v-else>
        Order not found ...
      </div>

      <!-- 👉 Reload button -->
      <div class="d-flex gap-4">
        <VBtn
          variant="tonal"
          color="primary"
          @click="refreshData"
        >
          {{ t("Reload") }}
        </VBtn>
      </div>
    </div>
    <!-- 👉 Order -->
    <VRow v-if="orderData">
      <VCol
        cols="12"
        md="5"
        lg="4"
      >
        <OrderPanel :order-data="orderData" />
      </VCol>
      <VCol
        cols="12"
        md="7"
        lg="8"
      >
        <VTabs
          v-model="orderTab"
          class="v-tabs-pill mb-3 disable-tab-transition"
        >
          <VTab
            v-for="tab in tabs"
            :key="tab.title"
          >
            <span>{{ tab.title }}</span>
          </VTab>
        </VTabs>
        <VWindow
          v-model="orderTab"
          class="disable-tab-transition"
          :touch="false"
        >
          <!-- 👉 General -->
          <VWindowItem>
            <OrderTabGeneral :order-data="orderData" />
          </VWindowItem>
          <!-- 👉 Preparation -->
          <VWindowItem>
            <OrderTabPreparation :order-data="orderData" />
          </VWindowItem>
          <!-- 👉 Reception -->
          <VWindowItem>
            <OrderTabReception :order-data="orderData" />
          </VWindowItem>
        </VWindow>
      </VCol>
    </VRow>
  </div>
</template>
