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

const initState = () => ({
  text: 'Tooltip text',
  header: 'Header',
  placement: 'top',
  popperPosition: 'start',
  size: 'md',
  openDelay: 0,
  closeDelay: 0,
  prevent: false,
  popper: true
})


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

const popperPositionOptions = [
  { value: 'start', label: 'Start' },
  { value: 'center', label: 'Center' },
  { value: 'end', label: 'End' }
]

const sizeOptions = [
  { value: 'sm', label: 'Small' },
  { value: 'md', label: 'Medium' }
]

</script>

<template>
  <Story
    title="Overlays/Tooltip"
    :layout="{ type: 'grid', width: '100%' }"
  >
    <Variant
      title="Modal"
      :init-state="initState"
    >
      <template #default="{state}">
        <div class="py-52 flex justify-center">
          <a-tooltip
            v-bind="state"
          >
            <div class="flex">
              <a-button>
                Hover Me
              </a-button>
            </div>

            <template #content>
              <p>{{ state.text }}</p>
            </template>
          </a-tooltip>
        </div>
      </template>
      <template #controls="{ state }">
        <HstText
          v-model="state.header"
          title="Header"
        />
        <HstText
          v-model="state.text"
          title="Text"
        />
        <HstSelect
          v-model="state.placement"
          title="Size"
          :options="placementOptions"
        />
        <HstSelect
          v-model="state.popperPosition"
          title="Popper Position"
          :options="popperPositionOptions"
        />
        <HstSelect
          v-model="state.size"
          title="Size"
          :options="sizeOptions"
        />
        <HstCheckbox
          v-model="state.prevent"
          title="Prevent"
        />
        <HstCheckbox
          v-model="state.popper"
          title="Popper"
        />
        <HstText
          v-model="state.openDelay"
          title="Open Delay"
        />
        <HstText
          v-model="state.closeDelay"
          title="Close Delay"
        />
      </template>
    </Variant>
  </Story>
</template>

<style scoped>

</style>
