<script setup lang='ts'>

import ADigitBadge from "./ADigitBadge.vue";

const initState = () => ({
  type: 'primary',
  view: 'default',
  size: 'sm',
  value: 1000
})

const typeOptions = [
  { value: 'primary', label: 'Primary' },
  { value: 'success', label: 'Success' },
  { value: 'danger', label: 'Danger' },
  { value: 'gray', label: 'Gray' },
  { value: 'orange', label: 'Orange' },
  { value: 'warning', label: 'Warning' }
]
const valueOptions = [
  { value: '1', label:'Small digit' },
  { value: '1001', label:'Big digit' }
]
const sizeOptions = [
  { value: 'sm', label: 'Small' },
  { value: 'md', label: 'Medium' },
  { value: 'lg', label: 'Large' }
]

const viewOptions = [{ value: 'default', label: 'Default' }, {value: 'inverted', label: 'Inverted'},{value: 'transparent', label: 'Transparent'},]

</script>

<template>
  <Story
    title="Elements/Badge/DigitBadge"
    :layout="{
      type: 'grid',
      width: 200,
    }"
  >
    <Variant
      title="DigitBadge"
      :init-state="initState"
    >
      <template #default="{state}">
        <a-digit-badge
          :type="state.type"
          :view="state.view"
          :size="state.size"
          :has-point="state.hasPoint"
          :value="state.value"
        >
        </a-digit-badge>
      </template>

      <template #controls="{ state }">
        <HstSelect
          v-model="state.type"
          title="Type"
          :options="typeOptions"
        />
        <HstSelect
          v-model="state.size"
          title="Size"
          :options="sizeOptions"
        />
        <HstSelect
          v-model="state.view"
          title="View"
          :options="viewOptions"
        />
        <HstSelect
          v-model="state.value"
          title="value"
          :options="valueOptions"
        />
      </template>
    </Variant>
  </Story>
</template>

<style scoped>

</style>
