<script setup lang="ts">
import APillTabs from './APillTabs.vue'

const initState = () => ({
  view: 'main',
  size: 'lg',
  align: 'center',
  options: optionsWithCount,
  block: false,
  countView: 'badge',
  wrapper: 'column'
})

const optionsWithCount = [{ name: 'tab1', key: 1, count: 20, badgeColor:'success'}, { name: 'tab2', key: 2, count: 0 }, {
  name: 'tab3',
  key: 3,
  count: 1,
}]
const optionsWithoutCount = [{ name: 'tab5', key: 1 }, { name: 'tab65', key: 2 }, {
  name: 'tab3',
  key: 3,
  disabled: true
}]
const activeTab = ref(1)
const countViewOptions = [
  { value: 'badge', label: 'Digit badge'},
  { value: 'brackets', label: 'Brackets'}
]

const valueOptions = [
  { value: optionsWithCount, label: 'with Count' },
  { value: optionsWithoutCount, label: 'Without count' }
]

const sizeOptions = [
  { value: 'sm', label: 'Small' },
  { value: 'lg', label: 'Large' }
]
const alignOptions = [
  { value: 'center', label: 'Center' },
  { value: 'left', label: 'Left' }
]
const viewOptions = [
  { value: 'main', label: 'Main' },
  { value: 'transparent', label: 'Transparent' },
  { value: 'gray', label: 'Gray' },
  { value: 'blue', label: 'Blue' },
  { value: 'mobile', label: 'Mobile' },
]

</script>

<template>
  <Story
    title="Navigation/Tabs/PillTabs"
    :layout="{type: 'single',}"
  >
    <Variant
      title="BasePillTabs"
      :init-state="initState"
    >
      <template #default="{state}">
        <a-pill-tabs
          v-model="activeTab"
          :view="state.view"
          :size="state.size"
          :options="state.options"
          :align="state.align"
          :block="state.block"
          :count-view="state.countView"
        />
      </template>
      <template #controls="{ state }">
        <HstCheckbox
          v-model="state.block"
        />
        <HstSelect
          v-model="state.size"
          title="Size"
          :options="sizeOptions"
        />
        <HstSelect
          v-model="state.view"
          title="View"
          :options="viewOptions"
        />
        <HstSelect
          v-model="state.options"
          title="Options"
          :options="valueOptions"
        />
        <HstSelect
          v-model="state.align"
          title="Align"
          :options="alignOptions"
        />
        <HstSelect
          v-model="state.countView"
          title="CountView"
          :options="countViewOptions"
        />
      </template>
    </Variant>

  </Story>
</template>

<style scoped>

</style>
