<script setup lang="ts">
import {onBeforeMount, ref} from "vue";
import Archive from "@/components/content/Archive.vue";
import Blocks from "@components/content/SmartBlock.vue";
import Webstream from "@components/content/Webstream.vue";
import {useShowTypeStore} from "@stores/showType.store.ts";

const tab = ref(null)
const tabs = [
  {
    id: 'archive',
    title: 'Archivio',
  },
  {
    id: 'blocks',
    title: 'Blocchi dinamici',
  },
  {
    id: 'webstream',
    title: 'Webstream',
  },
]

onBeforeMount(() => {
  const showTypeStore = useShowTypeStore()
  if(showTypeStore.currentType == 'spot') {
    const webstreamIndex = tabs.findIndex(tab => tab.id == 'webstream')
    tabs.splice(webstreamIndex, 1)
  }
})

</script>

<template>
  <v-tabs
      v-model="tab"
      bg-color="primary"
  >
    <v-tab
        v-for="tab in tabs"
        :value="tab.id"
    >{{ tab.title }}</v-tab>
  </v-tabs>
  <v-tabs-window v-model="tab">
    <v-tabs-window-item
        v-for="tab in tabs"
        :value="tab.id">
      <Archive
          v-if="tab.id === 'archive'"
          :show-select="false"
          :is-draggable="true"
          :hideColumns="['mtime', 'actions']"
      />
      <Blocks
          v-if="tab.id === 'blocks'"
          :show-select="false"
          :is-draggable="true"
          :hideColumns="['mtime', 'utime', 'actions']"
      />
      <Webstream
          v-if="tab.id === 'webstream'"
          :show-select="false"
          :is-draggable="true"
      />
    </v-tabs-window-item>
  </v-tabs-window>
</template>

<style scoped>

</style>