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

const initState = () => ({
  text: 'Password input',
  buttonContent: 'Button',
  disabled: false,
  label: 'Label',
  size: 'md',
  error: '',
  required: false,
  loading: false,
  buttonView: 'default',
  buttonType: 'primary',
  buttonForm: 'button'
})


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

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

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
    title="Forms/Input/Button"
    :layout="{
      type: 'grid',
      width: 500,
    }"
  >
    <Variant
      title="InputButton"
      :init-state="initState"
    >
      <template #default="{state}">
        <div class="p-10">
          <a-input-button
            v-model="state.text"
            v-bind="state"
          >
            <template #button-content>
              <span>{{ state.buttonContent }}</span>
            </template>
          </a-input-button>

          <p class="mt-5">
            <span class="font-bold">v-model value:</span> {{ state.text }}
          </p>
        </div>
      </template>

      <template #controls="{ state }">
        <HstSelect
          v-model="state.size"
          title="Size"
          :options="sizeOptions"
        />
        <HstCheckbox
          v-model="state.disabled"
          title="Disabled"
        />
        <HstCheckbox
          v-model="state.required"
          title="Required"
        />
        <HstCheckbox
          v-model="state.loading"
          title="Loading"
        />
        <HstText
          v-model="state.text"
          title="Text"
        />
        <HstText
          v-model="state.buttonContent"
          title="Button Content"
        />
        <HstText
          v-model="state.label"
          title="Label"
        />
        <HstText
          v-model="state.error"
          title="Error"
        />
        <HstSelect
          v-model="state.buttonType"
          title="Type"
          :options="typeOptions"
        />
        <HstSelect
          v-model="state.buttonView"
          title="View"
          :options="viewOptions"
        />
        <HstSelect
          v-model="state.buttonForm"
          title="Form"
          :options="formOptions"
        />
      </template>
    </Variant>
  </Story>
</template>

<style scoped>

</style>
