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


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

const isOpen = ref(false)
</script>

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

          <a-modal
            v-model="isOpen"
            v-bind="state"
          >
            <div>
              Modal Content
            </div>
            <template #footer>
              <a-button
                view="outline"
                class="w-full"
                size="md"
                @click="isOpen = false"
              >
                Close
              </a-button>
            </template>
          </a-modal>
        </div>
      </template>
      <template #controls="{ state }">
        <HstText
          v-model="state.title"
          title="Title"
        />
        <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"
        />
        <HstText
          v-model="state.width"
          title="Width"
        />
      </template>
    </Variant>
  </Story>
</template>

<style scoped>

</style>
