import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import {StoryVariant} from '../../docs/utils';
import {formatTags} from '../../docs/utils';
import Box, {PADDING, COLOR} from './Box';
import BoxA11y from './stories/Box.a11y.mdx';
import Flex from '../flex/Flex';
import Text from '../text/Text';
import TextBit from '../text/TextBit';
import Headline from '../text/Headline';
import Icon from '../icons/Icon';
import PageHeader from 'blocks/PageHeader';

<Meta
  title="Components/Box"
  component={Box}
  argTypes={{
    children: {
      control: {
        disable: true,
      },
    },
    border: {
      description: '(Responsive)',
      table: {
        type: {
          summary: 'boolean',
        },
      },
      control: {
        type: 'boolean',
      },
    },
    borderColor: {
      table: {
        defaultValue: {
          summary: COLOR['gray-20'],
        },
      },
    },
    padding: {
      description: '(Responsive)',
      table: {
        type: {
          summary: formatTags(Object.values(PADDING)),
        },
      },
      control: {
        type: 'select',
        options: PADDING,
      },
    },
    shadow: {
      description: '(Responsive)',
      table: {
        type: {
          summary: 'boolean',
        },
      },
      control: {
        type: 'boolean',
      },
    },
    noBorderRadius: {
      description: '(Responsive)',
      table: {
        type: {
          summary: 'boolean',
        },
      },
      control: {
        type: 'boolean',
      },
    },
  }}
  args={{
    children: 'TextBit',
    color: COLOR['indigo-20'],
  }}
/>

<PageHeader>Box</PageHeader>

Container for grouping elements. It provides padding, background color, border and shadow.

- [Stories](#stories)
- [Responsive props](#responsive-props)
- [Accessibility](#accessibility)

## Overview

<Canvas>
  <Story name="Default">
    {args => (
      <div style={{width: 300}}>
        <Box {...args}>
          <TextBit color="text-black">Wake up your mind</TextBit>
        </Box>
      </div>
    )}
  </Story>
</Canvas>

<ArgsTable story="Default" />

## Stories

### Colors

<Canvas>
  <Story name="Colors">
    {args => (
      <Flex wrap>
        {Object.values(COLOR).map(color => (
          <Flex marginRight="s" marginBottom="s" key={color}>
            <Box {...args} color={color} padding="xs">
              {color}
            </Box>
          </Flex>
        ))}
      </Flex>
    )}
  </Story>
</Canvas>

### Borders

<Canvas>
  <Story name="Borders">
    {args => (
      <Flex wrap>
        {Object.values(COLOR).map(color => (
          <Flex marginRight="s" marginBottom="s" key={color}>
            <Box
              {...args}
              color="white"
              borderColor={color}
              border
              padding="xs"
            >
              {color}
            </Box>
          </Flex>
        ))}
      </Flex>
    )}
  </Story>
</Canvas>

### Paddings

<Canvas>
  <Story name="Paddings">
    {args => (
      <Flex wrap>
        {Object.values(PADDING).map(padding => (
          <Flex
            marginRight="s"
            marginBottom="s"
            key={padding}
            direction="column"
          >
            <Box {...args} padding={padding}>
              padding {padding}
            </Box>
          </Flex>
        ))}
      </Flex>
    )}
  </Story>
</Canvas>

### Shadow

<Canvas>
  <Story name="Shadow">{args => <Box {...args} color="white" shadow />}</Story>
</Canvas>

### Example usage

<Canvas>
  <Story name="Example usage">
    {args => (
      <Box {...args} color="green-20">
        <Flex>
          <Flex marginRight="s">
            <Icon type="verified" color="icon-black" />
          </Flex>
          <Flex direction="column">
            <Headline size="small">This question is Expert Verified.</Headline>
            <Flex marginTop="s">
              <Text>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat.
              </Text>
            </Flex>
          </Flex>
        </Flex>
      </Box>
    )}
  </Story>
</Canvas>

## Responsive props

To control styles that differ across screen sizes you can use responsive props. All props marked as Responsive support [object and array syntax](/story/foundation-✨-responsive-props--page). Resize window to check how component is changing padding size.

<Canvas>
  <div style={{width: 400}}>
    <Box
      color="indigo-20"
      padding={[PADDING.s, PADDING.m, PADDING.l, PADDING.xl]}
    >
      <TextBit color="text-black">Wake up your mind</TextBit>
    </Box>
  </div>
</Canvas>

## Accessibility

<BoxA11y />