<script lang="ts" setup>
import StoreHeader from '@/views/pages/store/view/StoreHeader.vue'
import StoreTabAdmin from '@/views/pages/store/view/StoreTabAdmin.vue'
import StoreTabGeneral from '@/views/pages/store/view/StoreTabGeneral.vue'
import StoreTabItem from '@/views/pages/store/view/StoreTabItem.vue'
import StoreTabLog from '@/views/pages/store/view/StoreTabLog.vue'
import StoreTabRemote from '@/views/pages/store/view/StoreTabRemote.vue'

const { t } = useI18n()

const route = useRoute('store-details')

const storeTab = ref(route.query.tab || 'general')

// tabs
const tabs = [
  { title: 'General', icon: 'tabler-settings', tab: 'general' },
  { title: t('Item'), icon: 'tabler-shirt-sport', tab: 'item' },
  { title: t('Remote'), icon: 'tabler-brand-openvpn', tab: 'remote' },
  { title: 'Admin', icon: 'tabler-lock', tab: 'admin' },
  { title: 'Log', icon: 'tabler-bug', tab: 'log' },
]

const { data: storeData } = await useApi<any>(`/stores/${route.query.storeId}/details?dbHost=${route.query.dbHost}`)
</script>

<template>
  <VBreadcrumbs
    class="px-0 py-2"
    :items="[
      { title: t('Home'), to: { name: 'root' } },
      { title: t('List of stores'), to: { name: 'store-list' } },
      { title: t('Store visualization') },
    ]"
  />
  <div>
    <StoreHeader
      class="mb-5"
      :store-data="storeData"
    />

    <VTabs
      v-model="storeTab"
      class="v-tabs-pill"
    >
      <VTab
        v-for="item in tabs"
        :key="item.icon"
      >
        <VIcon
          size="20"
          start
          :icon="item.icon"
        />
        {{ item.title }}
      </VTab>
    </VTabs>

    <VWindow
      v-model="storeTab"
      class="mt-6 disable-tab-transition"
      :touch="false"
    >
      <!-- 👉 General -->
      <VWindowItem>
        <StoreTabGeneral :store-data="storeData" />
      </VWindowItem>

      <!-- 👉 Item -->
      <VWindowItem>
        <StoreTabItem />
      </VWindowItem>

      <!-- 👉 Remote Access -->
      <VWindowItem>
        <StoreTabRemote :store-data="storeData" />
      </VWindowItem>

      <!-- 👉 Admin -->
      <VWindowItem>
        <StoreTabAdmin :store-data="storeData" />
      </VWindowItem>

      <!-- 👉 Log -->
      <VWindowItem>
        <StoreTabLog :store-data="storeData" />
      </VWindowItem>
    </VWindow>
  </div>
</template>
