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

const select = ref()
const value = ref([])
const searchValue = ref()
const reset = () => {
  select.value.onClear()
}
const options = [
  {
    name: '1 Select Select Select ',
    id: 1
  },
  {
    name: '2 Select Select Select Select ',
    id: 2
  },
  {
    name: '3 Select Select Select Select Select ',
    id: 3
  },
  {
    name: '4 Select Select Select Select ',
    id: 4
  },
  {
    name: '5 Select Select Select Select Select Select Select Select Select Select Select Select Select ',
    id: 5
  }
]

const initState = () => ({
  hasButtons: false,
  clearable: true,
  getOnlyKey: true,
  disabled: false,
  size: 'sm',
  searchable: false,
  searchFromOut: false,
  required: false,
  multiple: true
})
</script>

<template>
  <Story title="Elements/Select">
    <Variant title="SingleSelect" :init-state="initState" responsive-disabled>
      <template #default="{ state }">
        <button @click="reset">reset</button>
        <div class="m-2 mb-[300px]">
          <single-select
            ref="select"
            v-model="value"
            v-model:search="searchValue"
            :has-buttons="state.hasButtons"
            :options="options"
            label="select"
            placeholder="select"
            :clearable="state.clearable"
            :get-only-key="state.getOnlyKey"
            :disabled="state.disabled"
            :size="state.size"
            :searchable="state.searchable"
            :search-from-out="state.searchFromOut"
            :required="state.required"
            :multiple="state.multiple"
          />
          {{ value }}
        </div>
      </template>

      <template #controls="{ state }">
        <HstCheckbox v-model="state.clearable" title="clearable" />
        <HstCheckbox v-model="state.getOnlyKey" title="getOnlyKey" />
        <HstCheckbox v-model="state.disabled" title="disabled" />
        <HstCheckbox v-model="state.searchable" title="searchable" />
        <HstCheckbox v-model="state.searchFromOut" title="searchFromOut" />
        <HstCheckbox v-model="state.required" title="required" />
        <HstCheckbox v-model="state.hasButtons" title="has-buttons" />
        <HstCheckbox v-model="state.multiple" title="multiple" />
        <HstSelect v-model="state.size" title="size" :options="['sm', 'md']" />
      </template>
    </Variant>
  </Story>
</template>
