<script setup lang="ts">

import AToggle from "./AToggle.vue";
import type {Props} from './types'

const initState = ():Props => (
  {
    disabled: false,
    size: 'md',
    switchClass: '',
    color: 'blue',
    onIcon: null,
    onIconClass: null,
    offIcon: null,
    offIconClass: null,
    activeClass: '',
    inactiveClass: '',
    activeContainerClass: '',
    inactiveContainerClass: ''
  }
)
const sizeOptions = [
  {value: '2xs', label: '2xs'},
  {value: 'xs', label: 'xs'},
  {value: 'sm', label: 'sm'},
  {value: 'md', label: 'md'},
  {value: 'lg', label: 'lg'},
  {value: 'xl', label: 'xl'},
  {value: '2xl', label: '2xl'},
]
const colorOptions = [
  {value: 'blue', label: 'blue'},
  {value: 'green', label: 'green'},
]

const test = ref(true)
</script>

<template>
  <Story title="Forms/Toggle">
    <Variant
      title="default"
      :init-state="initState"
    >
      <template #default="{state}">
        <a-toggle
          v-model="test"
          :disabled="state.disabled"
          :size="state.size"
          :color="state.color"
        />
      </template>
      <template #controls="{ state }">
        <HstCheckbox
          v-model="state.disabled"
          title="Disabled"
        />
        <HstSelect
          v-model="state.size"
          title="Size"
          :options="sizeOptions"
        />
        <HstSelect
          v-model="state.color"
          title="Color"
          :options="colorOptions"
        />
      </template>
    </Variant>
  </Story>
</template>

<style scoped>

</style>
