import * as React from 'react';
import { select, boolean, number, array } from '@storybook/addon-knobs';
import { Text, Heading } from '../../Text';
import Grid from '.';
import Card from '../../Card';
import Stack from '../Stack';

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

export const columns = () => (
  <Grid
    columns={array('Columns', ['1', '2', '3'])}
    equalRows={boolean('Equal Rows')}
    equalColumns={boolean('Equal Columns', true)}
    gap={select(
      'Gap',
      {
        none: 'none',
        gutter: 'gutter',
        xxsmall: 'xxsmall',
        xsmall: 'xsmall',
        small: 'small',
        medium: 'medium',
        large: 'large',
      },
      'gutter',
    )}
  >
    {Array.from({ length: 10 }, (_, i) => (
      <Card key={i}>
        <Stack p={2}>
          <Heading>Heading</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!'.substr(
              0,
              i * 20 + 100,
            )}
          </Text>
        </Stack>
      </Card>
    ))}
  </Grid>
);

export const minWidth = () => (
  <Grid
    minChildWidth={number('Min Child Width', 200)}
    equalRows={boolean('Equal Rows')}
    gap={select(
      'Gap',
      {
        none: 'none',
        gutter: 'gutter',
        xxsmall: 'xxsmall',
        xsmall: 'xsmall',
        small: 'small',
        medium: 'medium',
        large: 'large',
      },
      'gutter',
    )}
  >
    {Array.from({ length: 10 }, (_, i) => (
      <Card key={i}>
        <Stack p={2}>
          <Heading>Heading</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!'.substr(
              0,
              i * 20 + 100,
            )}
          </Text>
        </Stack>
      </Card>
    ))}
  </Grid>
);