<script setup lang="ts">
// import SingleSelect from './ASelect.vue'
import ASelectMobile from "./ASelectMobile.vue";
import ASlideover from "#adata-ui/components/overlays/sideover/ASlideover.vue";

const openSlide = ref(false)
const select = ref()
onMounted(() => {
})
const reset = () => {
}
const value = reactive({
  select: undefined
})
const searchValue = ref('')
const options = [
  { name: 'name1', id: 1 },
  { name: 'name2', id: 2 },
  { name: 'name3', id: 3 },
  { name: 'name4', id: 4 },
  { name: 'name5', id: 5 },

];

const initState = () => ({
  title: 'Mobile select',
  clearable: true,
  getOnlyKey: true,
  disabled: false,
  searchable: false,
  required: false,
  multiple: false,
  showCount: true
})
</script>

<template>
  <Story title="Elements/MobileSelect">
    <Variant
      title="MobileSelect"
      :init-state="initState"
      responsive-disabled
    >
      <template #default="{ state }">
        <div>
          <pre>{{ value }}</pre>
          <button @click="value.select = []">
            cleare
          </button>
          <button  @click="openSlide = true">
            open
          </button>
          <a-slideover
            v-model="openSlide"
            name="mobile_select"
            prevent-close
            position="bottom"
            size="200"
            fullscreen
          >
            <div @click="openSlide = false">
              close
            </div>
            <div class="m-2">
              <button @click="reset">
                cleare
              </button>
              <a-select-mobile
                ref="select"
                v-model="value.select"
                v-model:search="searchValue"
                :show-count=" state.showCount"
                :title="state.title"
                :options="options"
                label="sel"
                :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"
                name="select"
                search-label="g"
              />
              <div>
                test
                <pre>{{ value }}</pre>
              </div>
            </div>
          </a-slideover>
        </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.multiple"
          title="multiple"
        />
        <HstSelect
          v-model="state.size"
          title="size"
          :options="['sm', 'md']"
        />
      </template>
    </Variant>
  </Story>
</template>
