<script setup lang="ts">
import AInput from './AInputStandard.vue'
import {AIconCalendar} from "#components";

const initState = () => ({
  text: 'Standard input',
  disabled: false,
  label: 'Label',
  size: 'md',
  error: false,
  required: false,
  readonly: false,
  clearable: false,
  startIcon: '',
  endIcon: '',
  autocomplete: [
    'test',
    'super test',
    'mega test',
    'great test',
    'bad test',
    'mega test',
    'great test',
    'bad test',
    '1',
    '2',
    '3',
    '4'
  ]
})
const inputEl = ref()
const sizeOptions = [
  { value: 'sm', label: 'Small' },
  { value: 'md', label: 'Medium' }
]
function onClick() {
  inputEl.value.focus()
}
</script>

<template>
  <Story
    title="Forms/Input/Standard"
    :layout="{
      type: 'grid',
      width: 300
    }"
  >
    <Variant title="Standard" :init-state="initState">
      <template #default="{ state }">
        <div class="flex h-[400px] flex-col gap-2 bg-white p-10 dark:bg-gray-900">
          <button class="bg-gray-200" @click="onClick">
            focus
          </button>
          <a-input
            v-bind="state"
            ref="inputEl"
            v-model="state.text"
            label="With autocomplete "
            :autocomplete-list="state.autocomplete"
            :end-icon="AIconCalendar"
            @update-value="''"
            @on-enter="''"
          />

          <a-input v-model="state.text" v-bind="state" label="Without autocomplete" />

          <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>
