import type { Meta, StoryObj } from '@storybook/react'
import { Button } from '../Button'
import {
  Popover,
  PopoverArrow,
  PopoverContent,
  PopoverTrigger,
} from './Popover'

const meta: Meta<typeof Popover> = {
  title: 'Blocks/Popover',
  component: Popover,
  decorators: [
    (Story) => (
      <div className="flex justify-center p-16">
        <Story />
      </div>
    ),
  ],
}

export default meta

type Story = StoryObj<typeof PopoverContent>

export const Default: Story = {
  argTypes: {
    side: {
      options: ['top', 'right', 'bottom', 'left'],
      control: { type: 'select' },
    },
    align: {
      options: ['start', 'center', 'end'],
      control: { type: 'select' },
    },
  },
  args: {
    side: 'bottom',
    align: 'center',
  },
  render: (args, context) => {
    const openProp = context.viewMode === 'story' ? { open: true } : {}
    const { side, align, ...rest } = args

    return (
      <Popover {...openProp} {...rest}>
        <PopoverTrigger asChild>
          <Button>Open Popover</Button>
        </PopoverTrigger>
        <PopoverContent side={side} align={align}>
          The quick brown fox jumps over the lazy dog.
          <PopoverArrow />
        </PopoverContent>
      </Popover>
    )
  },
}

export const WithoutArrow: Story = {
  render: (_args, context) => {
    const openProp = context.viewMode === 'story' ? { open: true } : {}

    return (
      <Popover {...openProp}>
        <PopoverTrigger asChild>
          <Button>Open Popover</Button>
        </PopoverTrigger>
        <PopoverContent>
          The quick brown fox jumps over the lazy dog.
        </PopoverContent>
      </Popover>
    )
  },
}

export const SideOptions: Story = {
  render: (_args, context) => {
    const openProp = context.viewMode === 'story' ? { open: true } : {}
    const content = (
      <>
        The quick brown fox jumps over the lazy dog.
        <PopoverArrow />
      </>
    )

    return (
      <div className="flex w-full items-center justify-center gap-2 p-16">
        <Popover {...openProp}>
          <PopoverTrigger asChild>
            <Button>Left</Button>
          </PopoverTrigger>
          <PopoverContent side="left">{content}</PopoverContent>
        </Popover>
        <Popover {...openProp}>
          <PopoverTrigger asChild>
            <Button>Top</Button>
          </PopoverTrigger>
          <PopoverContent side="top">{content}</PopoverContent>
        </Popover>
        <Popover {...openProp}>
          <PopoverTrigger asChild>
            <Button>Bottom</Button>
          </PopoverTrigger>
          <PopoverContent side="bottom">{content}</PopoverContent>
        </Popover>
        <Popover {...openProp}>
          <PopoverTrigger asChild>
            <Button>Right</Button>
          </PopoverTrigger>
          <PopoverContent side="right">{content}</PopoverContent>
        </Popover>
      </div>
    )
  },
}