import {
  Story,
  Preview,
  Props,
  Source,
  Description,
  ColorPalette,
  ColorItem,
  Meta,
} from '@storybook/addon-docs/blocks';
import { withKnobs, text } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import { Button } from '@storybook/react/demo';
import FlowTypeButton from '../../components/FlowTypeButton';
import { DocgenButton } from '../../components/DocgenButton';

<Meta
  title="Addons/Docs/mdx"
  component={Button}
  id="addons-docs-mdx-id"
  decorators={[storyFn => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>, withKnobs]}
  parameters={{ notes: 'component notes' }}
/>

# Selected

<Story id="." />

<Source id="." />

<Props of="." />

<Preview>
  <Story id="nonexistent-story" />
</Preview>

## A random color ColorPalette

<ColorPalette>
  <ColorItem
    title="theme.color.greyscale"
    subtitle="Some of the greys"
    colors={['#FFFFFF', '#F8F8F8', '#F3F3F3']}
  />
  <ColorItem title="theme.color.primary" subtitle="Coral" colors={['#FF4785']} />
  <ColorItem title="theme.color.secondary" subtitle="Ocean" colors={['#1EA7FD']} />
  <ColorItem
    title="theme.color.positive"
    subtitle="Green"
    colors={[
      'rgba(102,191,60,1)',
      'rgba(102,191,60,.8)',
      'rgba(102,191,60,.6)',
      'rgba(102,191,60,.3)',
    ]}
  />
</ColorPalette>

## Getting into details

<Button>just a button, not a story</Button>

export const nonStory1 = 'foo'; // a non-story export

export const nonStory2 = () => <Button>Not a story</Button>; // another one

<Preview>
  <Story name="hello story">
    <Button onClick={action('clicked')}>{text('caption', 'hello world')}</Button>
  </Story>
  <Story name="goodbye">
    <Button onClick={action('clicked')}>goodbye world</Button>
  </Story>
  <Story name="with icons">
    <Button onClick={action('clicked')}>🤘🚀💯</Button>
  </Story>
  <Story name="notes" parameters={{ notes: 'story notes' }}>
    <Button onClick={action('clicked')}>goodbye world</Button>
  </Story>
  <Story name="plaintext">Plain text</Story>
</Preview>

<Story name="solo story">
  <Button onClick={action('clicked')}>solo</Button>
</Story>

<Story name="iframe story" inline={false} height="100px">
  <>This is an iframe!</>
</Story>

<Story name="theme">
  <h1 className="text-lg">Hello Hugh</h1>
</Story>

<Story name="function" height="100px">
  {() => {
    return <div>function result</div>;
  }}
</Story>

<Source name="hello story" />

<Preview>
  <Button onClick={action('clicked')}>view source in preview</Button>
</Preview>

## Configurable height

<Preview withToolbar>
  <Story id="basics-button--all-buttons" height="400px" />
</Preview>

## Description

<Description markdown="this is _markdown_" />

<Description of={DocgenButton} />

## Props

### Docgen

<Props of={DocgenButton} />

### Flow

Flow types are not officially supported

<Props of={FlowTypeButton} />

### withSource="none"

<Preview withSource="none">
  <h1>no source</h1>
</Preview>

<Preview withSource="none">
  <Story name="no source preview">
    <Button onClick={action('clicked')}>solo</Button>
  </Story>
</Preview>

## Docs Disable

<Story name="docs disable" parameters={{ docs: { disable: true } }}>
  <Button>This souldn't show up in docs page</Button>
</Story>