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

<Meta
  title="Components/Dropdown"
  component={Dropdown}
  argTypes={{
    links: {
      control: {
        disable: true,
      },
    },
    onItemSelect: {
      table: {
        category: 'Events',
      },
    },
  }}
  args={{
    name: 'Switch to',
    links: [
      {
        label: 'brainly.pl',
        url: 'http://brainly.pl',
      },
      {
        label: 'brainly.com',
        url: 'http://brainly.com',
      },
    ],
  }}
/>

<PageHeader>Dropdown</PageHeader>

- [Stories](#stories)

## Overview

<Canvas>
  <Story name="Default">
    {args => (
      <div style={{paddingTop: 100}}>
        <Dropdown {...args} />
      </div>
    )}
  </Story>
</Canvas>

<ArgsTable story="Default" />

## Stories

### Colors

<Canvas>
  <Story name="Colors">
    {args => (
      <div>
        {['default', 'white'].map(color => (
          <div className="sg-story-variant" key={color}>
            <div className="sg-story-variant__name">color - {color}</div>
            <Dropdown {...args} color={color} />
          </div>
        ))}
      </div>
    )}
  </Story>
</Canvas>

### Full width

<Canvas>
  <Story name="FullWidth">
    {args => (
      <StoryVariantBorderBox>
        <Dropdown {...args} fullWidth />
      </StoryVariantBorderBox>
    )}
  </Story>
</Canvas>

### Opened

<Canvas>
  <Story name="Opened" args={{initiallyOpened: true}}>
    {args => (
      <div style={{paddingTop: 100}}>
        <Dropdown {...args} />
      </div>
    )}
  </Story>
</Canvas>