<template>
  <div class="container">
    <h1>Vue Test App</h1>
    <v-tabs
      class="w-100 h-75"
      underline
      :model-value="currentTab"
      :reverse="reverse"
      :tab-map="tabMap"
      @update:model-value="changeTab($event)"
    >
      <v-tab-container :tab="tabMap.inputs">
        <TextboxPlayground />
      </v-tab-container>
      <v-tab-container :tab="tabMap.dropdowns">
        <DropdownPlayground />
      </v-tab-container>
      <v-tab-container :tab="tabMap.checkboxes">
        <CheckboxPlayground />
      </v-tab-container>
      <v-tab-container :tab="tabMap.buttons">
        <ButtonPlayground />
      </v-tab-container>
      <v-tab-container :tab="tabMap.cards">
        <CardPlayground />
      </v-tab-container>
      <v-tab-container :tab="tabMap.expanders">
        <ExpanderPlayground />
      </v-tab-container>
      <v-tab-container :tab="tabMap.progressBars">
        <ProgressbarPlayground />
      </v-tab-container>
      <v-tab-container :tab="tabMap.transitions">
        <TransitionsPlayground />
      </v-tab-container>
      <v-tab-container :tab="tabMap.pagination">
        <PaginationPlayground />
      </v-tab-container>
      <v-tab-container :tab="tabMap.carousel">
        <CarouselPlayground />
      </v-tab-container>
      <v-tab-container :tab="tabMap.modals">
        <ModalPlayground />
      </v-tab-container>
    </v-tabs>
  </div>
</template>

<script setup lang="ts">
import { useTabs } from './composables';
import { VTabs, VTabContainer } from './components';
import ButtonPlayground from './playground/button-playground.vue';
import CardPlayground from './playground/card-playground.vue';
import CarouselPlayground from './playground/carousel-playground.vue';
import CheckboxPlayground from './playground/checkbox-playground.vue';
import DropdownPlayground from './playground/dropdown-playground.vue';
import ExpanderPlayground from './playground/expander-playground.vue';
import ModalPlayground from './playground/modal-playground.vue';
import PaginationPlayground from './playground/pagination-playground.vue';
import ProgressbarPlayground from './playground/progressbar-playground.vue';
import TextboxPlayground from './playground/textbox-playground.vue';
import TransitionsPlayground from './playground/transitions-playground.vue';

const { createTab, currentTab, reverse, changeTab } = useTabs(1);
const tabMap = {
  inputs: createTab('Inputs'),
  dropdowns: createTab('Dropdowns'),
  checkboxes: createTab('Checkboxes'),
  buttons: createTab('Buttons'),
  cards: createTab('Cards'),
  expanders: createTab('Expanders'),
  progressBars: createTab('ProgressBars'),
  transitions: createTab('Transitions'),
  pagination: createTab('Pagination'),
  carousel: createTab('Carousels'),
  modals: createTab('Modals'),
};
</script>

<style lang="scss">
@import './styles/variables';

html {
  position: relative;
  height: 100%;
  body {
    position: relative;
    height: 100%;
    div#app {
      position: relative;
      height: 100%;
      .container {
        position: relative;
        height: 100%;
      }
    }
  }
}

.tab-content {
  padding-top: 1rem;
}
</style>
