<script setup lang="ts">
import { useAccountStore } from '@/stores/account.store';
import orderItem from './orderItem.vue';
import accountSubPageLayout from '@/layouts/accountSubPageLayout.vue';
import circularProgressIndeterminate from '@/components/basics/circularProgressIndeterminate.vue';

const accountStore = useAccountStore()

accountStore.refreshOrders()
</script>

<template>
  <account-sub-page-layout>
    <!-- During fetching state -->
    <v-row
      v-if="accountStore.fetchInProgress"
    >
      <v-col class="text-center">
        <circular-progress-indeterminate />
      </v-col>
    </v-row>

    <!-- Display all orders -->
    <v-row
      v-else-if="accountStore.orders.length > 0"
      v-for="order in accountStore.orders"
    >
      <v-col>
        <order-item
          :order="order"
        />
      </v-col>
    </v-row>

    <!-- No orders -->
    <v-row v-else>
      <v-col>
        <v-empty-state
          icon="mdi-basket-off"
          :title="$t('order.noOrders')"
          :text="$t('order.noOrdersText')"
        />
      </v-col>
    </v-row>
  </account-sub-page-layout>
</template>