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

const initState = () => ({
  view: 'bottom',
  size: 'lg',
  align: 'center',
  options: optionsWithoutCount,
  block: false,
  wrapper: 'row',
})

const optionsWithCount = [{name: 'tab1', key: 1, count: 2 }, {name: 'tab2', key: 2, count: 3 },{name: 'tab3', key: 3, count: 1 }]
const optionsWithoutCount = [{name: 'tab1', key: 1, url:'/about', warning:true }, {name: 'tab2', key: 2, },{name: 'tab3', key: 3, disabled: true }]


const valueOptions = [
  { value: optionsWithCount, label: 'with Count' },
  { value: optionsWithoutCount, label: 'Without count' },
]
const wrapperOptions = [
  { value: 'row', label: 'Row' },
  { value: 'column', label: 'Column' },
]

const sizeOptions = [
  { value: 'sm', label: 'Small' },
  { value: 'lg', label: 'Large' }
]
const alignOptions = [
  { value: 'center', label: 'Center' },
  { value: 'left', label: 'Left' },
]
const viewOptions = [{ value: 'bottom', label: 'Bottom' }, {value: 'right', label: 'Right'}, { value: 'left', label: 'Left' }
]

</script>

<template>
  <Story
    title="Navigation/Tabs/LineTabs"
    :layout="{type: 'single',}"
  >
    <Variant
      title="BaseLineTabs"
      :init-state="initState"
    >
      <template #default="{state}">
        <a-line-tabs
          :view="state.view"
          :size="state.size"
          :options="state.options"
          :align="state.align"
        />
      </template>

      <template #controls="{ state }">
        <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.wrapper"
          title="Wrapper"
          :options="wrapperOptions"
        />
        <HstSelect
          v-model="state.align"
          title="Align"
          :options="alignOptions"
        />
      </template>
    </Variant>
  </Story>
</template>

<style scoped>

</style>
