import { action } from 'storybook/actions';

import Button from '../button';
import { Position } from '../common';

import Popover from './Popover';
import { Meta, StoryObj } from '@storybook/react-webpack5';

type Story = StoryObj<typeof Popover>;

const Content = () => (
  <>
    You’ll get this rate as long as we receive your 10 EUR within the next 51 hours.
    <div>
      <a href="test1">Test 1</a>
    </div>
    <div>
      <a href="test1">Test 2</a>
    </div>
    <div>
      <a href="test1">Test 3</a>
    </div>
  </>
);

export default {
  component: Popover,
  title: 'Dialogs/Popover',
  args: {
    preferredPlacement: Position.BOTTOM,
    title: 'Guaranteed rate',
    content: <Content />,
    children: (
      <Button v2 onClick={action(`I'm also triggered`)}>
        Click here to Open Popover!
      </Button>
    ),
  },
  argTypes: {
    preferredPlacement: {
      control: 'select',
      options: [Position.TOP, Position.RIGHT, Position.BOTTOM, Position.LEFT],
    },
  },
} satisfies Meta<typeof Popover>;

export const Basic: Story = {};

/**
 * While it might be easier for sighted users to associate the content
 * of a `Popover` with the surrounding and trigger content, it's likely
 * much harder for people relying on the assistive-tech.
 *
 * For that reason, the `Popover` must always have an accessible name —
 * if `title` prop is set, the component will use it automatically,
 * otherwise `aria-label` must be provided instead.
 *
 * **NB:** If both props are provided, then screen readers will prioritise
 * `aria-label` over `title`.
 */
export const WithoutVisibleTitle: Story = {
  args: {
    preferredPlacement: Position.BOTTOM,
    title: undefined,
    'aria-label': 'Guaranteed rate',
    content: <Content />,
    children: (
      <Button v2 onClick={action(`I'm also triggered`)}>
        Click here to Open Popover!
      </Button>
    ),
  },
} satisfies Meta<typeof Popover>;