<script lang="ts" setup>
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
import ProfileAccount from '@/components/ProfileAccount.vue'
import ProfileNotifications from '@/components/ProfileNotifications.vue'
import ProfilePreferences from '@/components/ProfilePreferences.vue'
import ProfileSecurity from '@/components/ProfileSecurity.vue'
import { useL10n } from '@KTXC'

const route = useRoute()
const { t } = useL10n('user_profile')

const activeTab = ref(route.params.tab || 'account')

// tabs
const tabs = computed(() => [
  { title: t('tabs.account', 'Account'), icon: 'mdi-account-outline', tab: 'account' },
  { title: t('tabs.security', 'Security'), icon: 'mdi-lock-outline', tab: 'security' },
  { title: t('tabs.preferences', 'Preferences'), icon: 'mdi-tune', tab: 'preferences' },
  { title: t('tabs.notifications', 'Notifications'), icon: 'mdi-bell-outline', tab: 'notifications' },
])
</script>

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

    <VWindow
      v-model="activeTab"
      class="mt-5 disable-tab-transition"
      :touch="false"
    >
      <!-- Account -->
      <VWindowItem value="account">
        <ProfileAccount />
      </VWindowItem>

      <!-- Security -->
      <VWindowItem value="security">
        <ProfileSecurity />
      </VWindowItem>

      <!-- Notification -->
      <VWindowItem value="notifications">
        <ProfileNotifications />
      </VWindowItem>

      <!-- Preferences -->
      <VWindowItem value="preferences">
        <ProfilePreferences />
      </VWindowItem>
    </VWindow>
  </div>
</template>
