import * as React from 'react';
import { select, boolean } from '@storybook/addon-knobs';
import { Box, ButtonGroup, Stack, Shelf } from './index';
import Button from '../Button/index';
import { Text, Heading } from '../Text/index';
import Help from '../../assets/help.svg';
import baseTheme from '../../theme/base';

export default {
  title: 'Components|Layout/FullLayoutExample',
  component: Stack,
};

export const index = () => (
  <Box
    p={select(
      'Box: Padding',
      {
        none: 'none',
        xsmall: 'xsmall',
        small: 'small',
        medium: 'medium',
        large: 'large',
      },
      'small',
    )}
    bg={select(
      'Box: Background',
      Object.fromEntries(Object.keys(baseTheme.colors).map((key) => [key, key])),
      'Light Neutral 2',
    )}
  >
    <Stack
      gap={select(
        'Stack: Space',
        {
          none: 'none',
          xsmall: 'xsmall',
          small: 'small',
          medium: 'medium',
          large: 'large',
        },
        'medium',
      )}
      dividers={boolean('Stack: Dividers', false)}
    >
      <Stack
        gap={select(
          'Stack: Space',
          {
            none: 'none',
            xsmall: 'xsmall',
            small: 'small',
            medium: 'medium',
            large: 'large',
          },
          'medium',
        )}
        dividers={boolean('Stack: Dividers', false)}
      >
        <Shelf
          gap={select(
            'Shelf: Space',
            {
              none: 'none',
              xsmall: 'xsmall',
              small: 'small',
              medium: 'medium',
              large: 'large',
            },
            'small',
          )}
          justifyContent={select(
            'Shelf: JustifyContent',
            {
              'flex-start': 'flex-start',
              'flex-end': 'flex-end',
              'space-around': 'space-around',
              'space-between': 'space-between',
              'space-evenly': 'space-evenly',
              center: 'center',
            },
            'flex-start',
          )}
        >
          <img src={Help} alt="" />
          <img src={Help} alt="" />
        </Shelf>
        <Stack
          gap={select(
            'Stack: Space',
            {
              none: 'none',
              xsmall: 'xsmall',
              small: 'small',
              medium: 'medium',
              large: 'large',
            },
            'medium',
          )}
          dividers={boolean('Stack: Dividers', false)}
        >
          <Heading>Example of all layout components</Heading>
          <Text>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur, vel ducimus.
            Doloremque possimus, veniam quam repellat mollitia consectetur libero nemo, repudiandae
            dicta sapiente optio facere similique officia beatae reiciendis consequuntur!
          </Text>
        </Stack>
        <ButtonGroup>
          <Button>One</Button>
          <Button appearance="secondary">Two</Button>
        </ButtonGroup>
      </Stack>
    </Stack>
  </Box>
);