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

const initState = () => ({
  text: 'Standard input',
  disabled: false,
  label: 'Label',
  size: 'md',
  error: false,
  required: false,
  readonly: false,
  clearable: false,
  startIcon: ''
})

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

<template>
  <Story
    title="Forms/Input/Textarea"
    :layout="{
      type: 'grid',
      width: 500
    }"
  >
    <Variant
      title="Textarea"
      :init-state="initState"
    >
      <template #default="{ state }">
        <div class="p-10">
          <a-input
            v-model="state.text"
            class="min-h-[150px]"
            v-bind="state"
          />

          <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.readonly"
          title="Readonly"
        />
        <HstCheckbox
          v-model="state.required"
          title="Required"
        />
        <HstCheckbox
          v-model="state.clearable"
          title="Clearable"
        />
        <HstCheckbox
          v-model="state.error"
          title="Error"
        />
        <HstText
          v-model="state.text"
          title="Text"
        />
        <HstText
          v-model="state.label"
          title="Label"
        />
        <HstText
          v-model="state.error"
          title="Error text"
        />
        <HstText
          v-model="state.startIcon"
          title="Start Icon"
        />
      </template>
    </Variant>
  </Story>
</template>

<style scoped></style>
