import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
import { ThemeProvider } from 'styled-components';

import PopOver from './';
import PopOverHeader from './PopOverHeader';
import PopOverItem from './PopOverItem';
import PopOverSubMenu from './PopOverSubMenu';
import { lightTheme } from '../../../theme/';
import PrimaryButton from '../Button/PrimaryButton';
import * as PopOverStories from './PopOver.stories.tsx';

<Meta of={PopOverStories} />

# PopOver

The PopOver component displays a pop-up with a list of clickable options, it can contain buttons and links.

You can define the placement of the PopOver to the button, available options are `top-start`, `top-end`, `bottom-start`, `bottom-end`, `right-start`, `right-end`, `left-start`, and `left-end`.

## Importing

```javascript
import {
  PopOver,
  PopOverHeader,
  PopOverSeparator,
  PopOverItem,
  PopOverSubMenu,
} from 'amazon-chime-sdk-component-library-react';
```

## Example

<ThemeProvider theme={lightTheme}>
  <Canvas>
    <PopOver
      a11yLabel="Click me"
      renderButton={(isOpen) => (
        <PrimaryButton
          style={{ backgroundColor: `${isOpen ? `#0042bb` : '#075fff'}` }}
          label="Open PopOver"
        />
      )}
    >
      <PopOverHeader title="Title text" subtitle="Subtitle text" />
      <PopOverItem
        as="a"
        href="https://www.amazon.com"
        children={<span>Visit amazon.com</span>}
      />
      <PopOverItem
        as="button"
        onClick={() => {}}
        children={<span>Option 1</span>}
      />
      <PopOverSubMenu text="This is a submenu">
        <PopOverItem
          as="button"
          onClick={() => {}}
          children={<span>Option 2</span>}
        />
        <PopOverItem
          as="button"
          onClick={() => {}}
          children={<span>Option 3</span>}
        />
      </PopOverSubMenu>
    </PopOver>
    <div style={{ height: '15rem' }} /> {/* Just to force some more space in the preview window */}
  </Canvas>
</ThemeProvider>

```jsx
<PopOver
  a11yLabel="Click me"
  renderButton={(isOpen) => (
    <PrimaryButton
      style={{ backgroundColor: `${isOpen ? `#0042bb` : '#075fff'}` }}
      label="Open PopOver"
    />
  )}
>
  <PopOverHeader title="Title text" subtitle="Subtitle text" />
  <PopOverItem
    as="a"
    href="https://www.amazon.com"
    children={<span>Visit amazon.com</span>}
  />
  <PopOverItem
    as="button"
    onClick={() => {}}
    children={<span>Option 1</span>}
  />
  <PopOverSubMenu text="This is a submenu">
    <PopOverItem
      as="button"
      onClick={() => {}}
      children={<span>Option 2</span>}
    />
    <PopOverItem
      as="button"
      onClick={() => {}}
      children={<span>Option 3</span>}
    />
  </PopOverSubMenu>
</PopOver>
```

## Props

### PopOver Props

<ArgTypes of={PopOver} />

### PopOverHeader Props

<ArgTypes of={PopOverHeader} />

### PopOverItem Props

<ArgTypes of={PopOverItem} />

### PopOverSubMenu Props

<ArgTypes of={PopOverSubMenu} />