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

const initState = () => ({
  disabled: false,
  variant: 'primary',
  view: 'default',
  size: 'sm',
  form: 'button',
  loading: false,
  active: false,
  to: ''
})

const typeOptions = [
  { value: 'primary', label: 'Primary' },
  { value: 'success', label: 'Success' },
  { value: 'danger', label: 'Danger' },
  { value: 'gray', label: 'Gray' },
  { value: 'ghost', label: 'Ghost' }
]

const sizeOptions = [
  { value: 'sm', label: 'Small' },
  { value: 'md', label: 'Medium' },
  { value: 'lg', label: 'Large' }
]

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

const formOptions = [
  { value: 'icon', label: 'Icon' },
  { value: 'button', label: 'Button' }
]
</script>

<template>
  <Story
    :layout="{
      type: 'grid',
      width: 200
    }"
    title="Elements/Button"
  >
    <Variant :init-state="initState" title="AButton">
      <template #default="{ state }">
        <div class="flex items-center gap-2">
          <a-button
            :active="state.active"
            :disabled="state.disabled"
            :form="state.form"
            :loading="state.loading"
            :size="state.size"
            :variant="state.variant"
            :view="state.view"
            :to="state.to"
          >
            Button
          </a-button>
          <a-button
            :active="state.active"
            :disabled="state.disabled"
            :form="state.form"
            :loading="state.loading"
            :size="state.size"
            :variant="state.variant"
            :view="state.view"
            :to="state.to"
          >
          </a-button>
        </div>
      </template>

      <template #controls="{ state }">
        <HstCheckbox v-model="state.disabled" title="Disabled" />
        <HstCheckbox v-model="state.loading" title="Loading" />
        <HstCheckbox v-model="state.active" title="Active" />
        <HstSelect v-model="state.variant" :options="typeOptions" title="variant" />
        <HstSelect v-model="state.size" :options="sizeOptions" title="Size" />
        <HstSelect v-model="state.view" :options="viewOptions" title="View" />
        <HstSelect v-model="state.form" :options="formOptions" title="Form" />
        <HstText v-model="state.to" title="To" />
      </template>
    </Variant>
  </Story>
</template>

<style scoped></style>
