import type { Meta, StoryObj } from '@storybook/vue3'
import FdsButtonIcon from '../Buttons/FdsButtonIcon/FdsButtonIcon.vue'
import FdsPopover from './FdsPopover.vue'

const meta: Meta<typeof FdsPopover> = {
  title: 'FDS/FdsPopover',
  component: FdsPopover,
  tags: ['autodocs'],
  argTypes: {
    label: { control: { type: 'text' } },
    body: { control: { type: 'text' } },
    open: { control: { type: 'boolean' } },
    position: { control: { type: 'select' }, options: ['top', 'right', 'bottom', 'left'] },
    offset: { control: { type: 'number' } },
    offsetX: { control: { type: 'number' } },
    offsetY: { control: { type: 'number' } },
    closeAriaLabel: { control: { type: 'text' } },
  },
  args: {
    label: 'Label',
    body: 'Text',
    open: false,
    position: 'bottom',
    offset: 8,
    offsetX: 0,
    offsetY: 0,
    closeAriaLabel: 'Close popover',
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const LabelAndBody: Story = {
  render: (args: Story['args']) => ({
    components: { FdsPopover, FdsButtonIcon },
    setup: () => ({ args }),
    template: `
      <div class="p-12 bg-blue-100">
        <FdsPopover v-bind="args">
          <template #trigger>
            <FdsButtonIcon icon="information" :size="24" aria-label="Open label and body popover" />
          </template>
        </FdsPopover>
      </div>
    `,
  }),
}

export const BodyOnly: Story = {
  args: {
    label: '',
    body: 'Text',
    position: 'right',
  },
  render: (args: Story['args']) => ({
    components: { FdsPopover, FdsButtonIcon },
    setup: () => ({ args }),
    template: `
      <div class="p-12 bg-blue-100">
        <FdsPopover v-bind="args">
          <template #trigger>
            <FdsButtonIcon icon="information" :size="24" aria-label="Open body only popover" />
          </template>
        </FdsPopover>
      </div>
    `,
  }),
}

export const RightPlacement: Story = {
  args: {
    position: 'right',
    offset: 12,
    offsetX: 8,
    offsetY: -4,
  },
  render: (args: Story['args']) => ({
    components: { FdsPopover, FdsButtonIcon },
    setup: () => ({ args }),
    template: `
      <div class="p-12 bg-blue-100">
        <FdsPopover v-bind="args">
          <template #trigger>
            <FdsButtonIcon icon="information" :size="24" aria-label="Open popover" />
          </template>
        </FdsPopover>
      </div>
    `,
  }),
}