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


const initState = () => ({
  title: 'Modal Title',
  transition: true,
  overlay: true,
  preventClose: false,
  fullscreen: false,
  width: 424,
  name: 'a-slideover',
  position: 'bottom',
  resizable: true
})

const positionOptions = [
  { value: 'right', label: 'Right' },
  { value: 'left', label: 'Left' },
  { value: 'top', label: 'Top' },
  { value: 'bottom', label: 'Bottom' },
]

const isOpen = ref(false)
</script>

<template>
  <Story
    title="Overlays/Slideover"
    :layout="{
      type: 'grid',
      width: 500,
    }"
  >
    <Variant
      title="Slideover"
      :init-state="initState"
    >
      <template #default="{state}">
        <div class="p-10 flex justify-center">
          <a-button @click="isOpen = true">
            Open Sideover
          </a-button>

          <a-slideover
            v-model="isOpen"
            v-bind="state"
          >
            <div>
              Slideover Content
            </div>
            <template #footer>
              <a-button
                view="outline"
                class="w-full"
                size="md"
                @click="isOpen = false"
              >
                Close
              </a-button>
            </template>
          </a-slideover>
        </div>
      </template>
      <template #controls="{ state }">
        <HstText
          v-model="state.title"
          title="Title"
        />
        <HstSelect
          v-model="state.position"
          title="Size"
          :options="positionOptions"
        />
        <HstCheckbox
          v-model="state.transition"
          title="Transition"
        />
        <HstCheckbox
          v-model="state.overlay"
          title="Overlay"
        />
        <HstCheckbox
          v-model="state.preventClose"
          title="Prevent Close"
        />
        <HstCheckbox
          v-model="state.fullscreen"
          title="Full screen"
        />
        <HstCheckbox
          v-model="state.resizable"
          title="Resizable"
        />
        <HstText
          v-model="state.width"
          title="Width"
        />
      </template>
    </Variant>
  </Story>
</template>

<style scoped>

</style>
