import { action } from 'storybook/actions';

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

import Popover from './Popover';
import { Meta, StoryObj } from '@storybook/react-webpack5';
import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';

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 Sandbox = createSandboxStory({
  code: `<Popover
  content="You'll get this rate as long as we receive your 10 EUR within the next 51 hours."
  preferredPlacement="bottom"
  title="Guaranteed rate"
>
  <Button v2 size="md">Click here to Open Popover!</Button>
</Popover>`,
  scope: globalScope,
});

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>;

/**
 * The `preferredPlacement` prop indicates where the Popover should appear
 * relative to its trigger element. However, it is a preference, not a guarantee.
 *
 * If there isn't enough viewport space in the preferred direction, the Popover
 * automatically flips to an alternative placement. The fallback order is:
 * - `top` → tries `bottom`, then `right`, then `left`
 * - `bottom` → tries `top`, then `right`, then `left`
 * - `left` → tries `right`, then `top`, then `bottom`
 * - `right` → tries `left`, then `top`, then `bottom`
 *
 * For example, if you set `preferredPlacement="top"` but the trigger is near
 * the top of the viewport, the Popover will flip to `bottom` instead.
 *
 * Try scrolling this story so triggers are near viewport edges to see the
 * flip behaviour in action.
 */
export const PreferredPlacement: Story = {
  render: () => (
    <div
      style={{
        display: 'flex',
        flexWrap: 'wrap',
        gap: '48px',
        justifyContent: 'center',
        alignItems: 'center',
        padding: '120px 80px',
      }}
    >
      {([Position.TOP, Position.RIGHT, Position.BOTTOM, Position.LEFT] as const).map(
        (placement) => (
          <Popover
            key={placement}
            preferredPlacement={placement}
            title="Guaranteed rate"
            content={<Content />}
          >
            <Button v2>{placement}</Button>
          </Popover>
        ),
      )}
    </div>
  ),
};
