import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import Layout from './Layout';
import Text from '../text/Text';
import LayoutContent from './LayoutContent';
import LayoutSecondaryContent from './LayoutSecondaryContent';
import LayoutAsideContent from './LayoutAsideContent';
import PageHeader from 'blocks/PageHeader';
import LayoutA11y from './stories/Layout.a11y.mdx';

<Meta
  title="Components/Layout"
  component={Layout}
  subcomponents={{LayoutAsideContent, LayoutContent, LayoutSecondaryContent}}
  argTypes={{
    children: {
      control: {
        disable: true,
      },
    },
    footer: {
      control: {
        disable: true,
      },
    },
    header: {
      control: {
        disable: true,
      },
    },
    as: {
      control: 'select',
    },
  }}
  args={{
    children: <div>Content</div>,
    footer: <div>Footer</div>,
    header: <div>Header</div>,
  }}
/>

<PageHeader>Layout</PageHeader>

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

## Overview

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

<ArgsTable story="Default" />

## Stories

### With aside

<Canvas>
  <Story name="With Aside">
    {args => (
      <Layout {...args}>
        <LayoutContent>
          <Text>
            Main content has no padding and no background (both are given by
            layout box)
          </Text>
        </LayoutContent>
        <LayoutAsideContent>
          <Text>Aside content has no padding and no background</Text>
        </LayoutAsideContent>
      </Layout>
    )}
  </Story>
</Canvas>

### One column, centered

<Canvas>
  <Story name="One Column Centered">
    {args => (
      <Layout {...args}>
        <LayoutContent center>
          <Text>Main content is centered</Text>
        </LayoutContent>
      </Layout>
    )}
  </Story>
</Canvas>

### Three columns, wide

<Canvas>
  <Story name="Three Columns Wide" args={{threeColumns: true, wide: true}}>
    {args => (
      <Layout {...args}>
        <LayoutSecondaryContent>
          <Text>Secondary content has no padding and no background</Text>
        </LayoutSecondaryContent>
        <LayoutContent>
          <Text>Main content has no padding and white background</Text>
        </LayoutContent>
        <LayoutAsideContent>
          <Text>
            Aside content has no padding and no background (both are given by
            layout box)
          </Text>
        </LayoutAsideContent>
      </Layout>
    )}
  </Story>
</Canvas>

### Reversed order

<Canvas>
  <Story name="Reversed Order" args={{reversedOrder: true}}>
    {args => (
      <Layout {...args}>
        <LayoutContent>
          <Text>Main content has no padding and no background</Text>
        </LayoutContent>
        <LayoutAsideContent>
          <Text>
            Aside content has no padding and no background (both are given by
            layout box)
          </Text>
        </LayoutAsideContent>
      </Layout>
    )}
  </Story>
</Canvas>

### No Margin Top

<Canvas>
  <Story name="No Margin Top" args={{noMarginTop: true}}>
    {args => (
      <Layout {...args}>
        <LayoutContent>
          <Text>Main content has no padding and no background</Text>
        </LayoutContent>
        <LayoutAsideContent>
          <Text>
            Aside content has no padding and no background (both are given by
            layout box)
          </Text>
        </LayoutAsideContent>
      </Layout>
    )}
  </Story>
</Canvas>

### Full page

<Canvas>
  <Story name="Full page" args={{fullPage: true}}>
    {args => (
      <Layout {...args}>
        <LayoutContent>
          <Text>Main content has no padding and no background</Text>
        </LayoutContent>
        <LayoutAsideContent>
          <Text>
            Aside content has no padding and no background (both are given by
            layout box)
          </Text>
        </LayoutAsideContent>
      </Layout>
    )}
  </Story>
</Canvas>

### No Max Width

<Canvas>
  <Story
    name="No Max Width"
    args={{noMaxWidth: true}}
    params={{
      chromatic: {viewports: [320, 1200]},
    }}
  >
    {args => (
      <div>
        <Layout {...args}>
          <LayoutContent>
            <Text>
              Main content has no padding and no background (both are given by
              layout box)
            </Text>
          </LayoutContent>
          <LayoutAsideContent>
            <Text>Aside content has no padding and no background</Text>
          </LayoutAsideContent>
        </Layout>
      </div>
    )}
  </Story>
</Canvas>

## Accessibility

<LayoutA11y />