// @flow
import React from 'react';
import type { StoryDecorator } from '@storybook/react';
import docs from './layout-recipes.mdx';
import { Box } from './box.component';
import { Text } from '../../core/typography/text';
import { Card } from '../../core/structures/card';
import { Grid, GridItem } from '../../core/structures/grid';

const PageGridDecorator: StoryDecorator = (Story) => (
  <Grid>
    <GridItem sm={12} md={8}>
      <Story />
    </GridItem>
    <GridItem sm={12} md={4}>
      <Text spacing={['p2', 'mb2']} fontSize="f0">
        This example uses Grid/GridItem to define the page level structure; the
        second grid item uses responsive layout props to define a nested set of
        columnar text items.
      </Text>
    </GridItem>
  </Grid>
);

export default {
  title: 'Recipes/Layout',
  parameters: {
    docs: {
      page: docs,
    },
  },
  decorators: [PageGridDecorator],
};

export const NestableResponsiveColumns = () => (
  <Card
    stacked={{ sm: 'column', md: 'row' }}
    spacing={{ sm: ['pv1', 'ph2'], md: ['ph1', 'pv2'] }}
  >
    <Box grow={{ md: 1 }} basis={{ md: 0 }} spacing={{ sm: 'pv1', md: 'ph1' }}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.anim id est laborum.
    </Box>
    <Box grow={{ md: 1 }} basis={{ md: 0 }} spacing={{ sm: 'pv1', md: 'ph1' }}>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
      aliquip ex ea commodo consequat.
    </Box>
    <Box grow={{ md: 1 }} basis={{ md: 0 }} spacing={{ sm: 'pv1', md: 'ph1' }}>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur.
    </Box>
  </Card>
);
