import type { Meta, StoryObj } from '@storybook/vue3'
import { UTooltip, UIcon } from '../components'
import { UTooltipProps } from '../components/UTooltip/UTooltip'
import { ExtractPropTypes } from 'vue'

const meta: Meta<typeof UTooltip> = {
  title: 'Example/Tooltip',
  component: UTooltip,
  tags: ['autodocs'],
  argTypes: {
    theme: { control: 'select', options: ['dark', 'light'] },
    always: { control: 'boolean', defaultValue: false },
    position: {
      control: 'select',
      options: [
        'none top',
        'none bottom',
        'bottom',
        'bottom-start',
        'bottom-end',
        'top',
        'top-start',
        'top-end',
        'left',
        'right',
      ],
    },
  },
}

export default meta

type Story = StoryObj<typeof UTooltip>

export const BaseTooltip: Story = {
  render: (args: ExtractPropTypes<UTooltipProps>) => ({
    components: { UTooltip, UIcon },
    setup() {
      return { args }
    },
    template: `<div class="w-full h-80 flex justify-center items-center">
    <UTooltip v-bind="args" class="w-fit h-fit">
    <template #tooltipToggle> <UIcon color="gray-400" :size="'14'" class="mx-auto">
    $helpCircle </UIcon> </template>
    <template #text>This is a tooltip</template>
    <template #supportingText>Tooltips are used to describe or identify an element. In most
    scenarios, tooltips help the user understand meaning, function or alt-text.</template>
    </UTooltip></div>`,
  }),
  args: {
    theme: 'dark',
    always: true,
  } as UTooltipProps,
}