<script setup>
import ChangePassword from '@/views/pages/account-settings/ChangePassword.vue';
import DeliveryAddress from '@/views/pages/account-settings/DeliveryAddress.vue';
import MyInfo from '@/views/pages/account-settings/MyInfo.vue';
import PaymentDetails from '@/views/pages/account-settings/PaymentDetails.vue';
import { useRoute } from 'vue-router';

const route = useRoute()
const activeTab = ref(route.params.tab)

// tabs
const tabs = [
  {
    title: 'My Info',
    tab: 'info',
  },
  {
    title: 'Delivery Address',
    tab: 'delivery',
  },
  {
    title: 'Payment Details',
    tab: 'payment',
  },
  {
    title: 'Change Password',
    tab: 'change',
  }
]
</script>

<template>
  <div>
    <VTabs v-model="activeTab" show-arrows>
      <VTab v-for="item in tabs" :value="item.tab">
        <VIcon size="20" start />
        {{ item.title }}
      </VTab>
    </VTabs>
    <VDivider />

    <VWindow v-model="activeTab" class="mt-5 disable-tab-transition">
      <!-- Account -->
      <VWindowItem value="info">
        <MyInfo />
      </VWindowItem>

      <!-- Security -->
      <VWindowItem value="delivery">
        <DeliveryAddress />
      </VWindowItem>

      <!-- Notification -->
      <VWindowItem value="payment">
        <PaymentDetails />
      </VWindowItem>
      <!-- Notification -->
      <VWindowItem value="change">
        <ChangePassword />
      </VWindowItem>
    </VWindow>
  </div>
</template>
