<script setup lang="ts">

const initState = () => ({
  size: 'sm',
  disabled: false,
  side: null,
  selected: 0,
  permanent: false
})
const sizeOptions = [
  { value: 'sm', label: 'Small' },
  { value: 'lg', label: 'Large' }
]
const sideOptions = [
  { value: 'right', label: 'Right' },
  { value: 'left', label: 'Left' }
]

</script>

<template>
  <Story
    title="Forms/RadioBtn"
    :layout="{
      type: 'grid',
      width: 300
    }"
  >
    <Variant title="ARadioButton" :init-state="initState">
      <template #default="{ state }">
        <div>
          <a-radio-button v-model="state.selected" name="1" :permanent="state.permanent" :disabled="state.disabled" :value="1" side="left" :size="state.size">
            Content1
          </a-radio-button>
          <a-radio-button v-model="state.selected" name="2" :permanent="state.permanent"  :disabled="state.disabled" :value="2" side="right" :size="state.size">
            Content2
          </a-radio-button>
        </div>

      </template>
      <template #controls="{ state }">
        <HstSelect v-model="state.size" title="Size" :options="sizeOptions" />
        <HstSelect v-model="state.side" title="Side" :options="sideOptions" />
        <HstCheckbox v-model="state.selected" title="selected" />
        <HstCheckbox v-model="state.disabled" title="disabled" />
        <HstCheckbox v-model="state.permanent" title="permanent" />
      </template>
    </Variant>
  </Story>
</template>

<style scoped></style>
