import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import BreadcrumbA11y from './stories/Breadcrumb.a11y.mdx';
import Breadcrumb from './Breadcrumb';
import hex from '../colors/hex';
import PageHeader from 'blocks/PageHeader';
const elements = ['Comments (9)', 'Report', 'Follow'];
const longElements = [
  'I am so long and there is so little space there',
  'The second element is also very talkative',
  'Lorem ipsum has many many words',
];

<Meta
  title="Components/Breadcrumb"
  component={Breadcrumb}
  argTypes={{
    elements: {
      control: {
        disable: true,
      },
    },
    className: {
      control: {
        type: 'text',
      },
    },
    adaptive: {
      control: {
        type: 'boolean',
      },
    },
    inlineItems: {
      control: {
        type: 'boolean',
      },
    },
    short: {
      control: {
        type: 'boolean',
      },
    },
  }}
  args={{elements}}
/>

<PageHeader>Breadcrumb</PageHeader>

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

## Overview

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

<ArgsTable story="Default" />

## Stories

### Short

<Canvas>
  <Story
    name="Short"
    args={{
      elements: longElements,
    }}
  >
    {args => (
      <div style={{maxWidth: '400px'}}>
        <Breadcrumb {...args} short />
      </div>
    )}
  </Story>
</Canvas>

### Adaptive

<Canvas>
  <Story name="Adaptive">
    {args => (
      <div
        style={{
          color: hex['indigo-40'],
        }}
      >
        <div>Parent</div>
        <Breadcrumb {...args} adaptive />
      </div>
    )}
  </Story>
</Canvas>

### Inline items

<Canvas>
  <Story name="Inline items" args={{elements: longElements}}>
    {args => (
      <div style={{maxWidth: '400px'}}>
        <Breadcrumb {...args} inlineItems />
      </div>
    )}
  </Story>
</Canvas>

### Spaced

<Canvas>
  <Story name="Spaced" args={{elements: longElements}}>
    {args => <Breadcrumb {...args} spaced />}
  </Story>
</Canvas>

## Accessibility

<BreadcrumbA11y />