import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import {StoryVariant} from '../../docs/utils';
import Overlay, {COLOR} from './Overlay';
import OverlayA11y from './stories/Overlay.a11y.mdx';
import Box from '../box/Box';
import Button from '../buttons/Button';
import Flex from '../flex/Flex';
import PageHeader from 'blocks/PageHeader';
import {within} from '@storybook/testing-library';
import {formatTags} from '../../docs/utils';
const play = async ({canvasElement}) => {
  const canvas = within(canvasElement);
  const button = canvas.getAllByRole('button', {name: 'open Overlay'})[0];
  if (button) {
    button.click();
  }
};

<Meta
  title="Components/Overlay"
  component={Overlay}
  argTypes={{
    color: {
      control: {
        type: 'radio',
        options: Object.values(COLOR),
      },
      table: {
        type: {
          summary: formatTags(Object.values(COLOR)),
        },
      },
    },
    children: {
      control: {
        disable: true,
      },
    },
  }}
  args={{
    children: (
      <Flex fullHeight alignItems="center">
        <Box color="white">Content example</Box>
      </Flex>
    ),
  }}
/>

<PageHeader>Overlay</PageHeader>

- [Stories](#stories)
- [Accessibility](#accessibility)

## Overview

<Canvas>
  <Story name="Default" play={play}>
    {args => {
      const [open, setOpen] = React.useState(false);
      const handleDismiss = () => setOpen(false);
      return (
        <div>
          <Button type="solid-indigo" onClick={() => setOpen(true)}>
            open Overlay
          </Button>
          {open && <Overlay {...args} onClick={handleDismiss} />}
        </div>
      );
    }}
  </Story>
</Canvas>

<ArgsTable story="Default" />

## Stories

### Black

<Canvas>
  <Story name="Black" play={play} args={{color: 'black'}}>
    {args => {
      const [open, setOpen] = React.useState(false);
      const handleDismiss = () => setOpen(false);
      return (
        <div>
          <Button type="solid-indigo" onClick={() => setOpen(true)}>
            open Overlay
          </Button>
          {open && <Overlay {...args} onClick={handleDismiss} />}
        </div>
      );
    }}
  </Story>
</Canvas>

### Partial

<Canvas>
  <Story name="Partial" play={play}>
    {args => {
      const [open, setOpen] = React.useState(false);
      const handleDismiss = () => setOpen(false);
      return (
        <div style={{height: 400, width: 400, position: 'relative'}}>
          <Button type="solid-indigo" onClick={() => setOpen(true)}>
            open Overlay
          </Button>
          {open && <Overlay {...args} onClick={handleDismiss} partial />}
        </div>
      );
    }}
  </Story>
</Canvas>

## Accessibility

<OverlayA11y />