import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import {StoryVariant, StoryVariantBorderBox} from '../../docs/utils';

import Bubble, {DIRECTION, ALIGNMENT, BUBBLE_COLOR} from './Bubble';
import BubbleA11y from './stories/Bubble.a11y.mdx';
import PageHeader from 'blocks/PageHeader';

<Meta
  title="Components/Bubble"
  component={Bubble}
  argTypes={{
    direction: {control: {type: 'select', options: DIRECTION}},
    color: {control: {type: 'select', options: BUBBLE_COLOR}},
    alignment: {control: {type: 'select', options: ALIGNMENT}},
    full: {control: 'boolean'},
    noShadow: {control: 'boolean'},
    children: {
      control: {disable: true},
    },
  }}
  args={{
    direction: DIRECTION.TOP,
    alignment: ALIGNMENT.CENTER,
    children: (
      <span>
        Hi there!!
        <br />
        Just wondering if you have any problems with your school work.
      </span>
    ),
  }}
/>

<PageHeader>Bubble</PageHeader>

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

## Overview

<Canvas>
  <Story name="Default">{args => <Bubble {...args} full />}</Story>
</Canvas>

<ArgsTable story="Default" />

## Stories

### Colors

<Canvas>
  <Story name="Colors">
    {args => (
      <div>
        {Object.values(BUBBLE_COLOR).map(color => (
          <StoryVariant key={color} label={`color - ${color}`}>
            <Bubble {...args} color={color} />
          </StoryVariant>
        ))}
      </div>
    )}
  </Story>
</Canvas>

### Directions

<Canvas>
  <Story name="Directions" args={{color: BUBBLE_COLOR['blue-40']}}>
    {args => (
      <div>
        {Object.values(DIRECTION).map(direction => (
          <StoryVariant label={`direction - ${direction}`} key={direction}>
            <Bubble {...args} direction={direction} />
          </StoryVariant>
        ))}
      </div>
    )}
  </Story>
</Canvas>

### Alignments

<Canvas>
  <Story name="Alignments" args={{color: BUBBLE_COLOR['blue-40']}}>
    {args => (
      <div>
        {Object.values(ALIGNMENT).map(alignment => (
          <StoryVariant label={`alignment - ${alignment}`} key={alignment}>
            <Bubble {...args} alignment={alignment} />
          </StoryVariant>
        ))}
      </div>
    )}
  </Story>
</Canvas>

### Full height

<Canvas>
  <Story name="FullHeight" args={{color: BUBBLE_COLOR['blue-40']}}>
    {args => (
      <StoryVariantBorderBox height="250px">
        <Bubble {...args} full />
      </StoryVariantBorderBox>
    )}
  </Story>
</Canvas>

### No shadow

<Canvas>
  <Story name="NoShadow" args={{color: BUBBLE_COLOR['blue-40']}}>
    {args => <Bubble {...args} noShadow />}
  </Story>
</Canvas>

## Accessibility

<BubbleA11y />