// @flow
import React from 'react';
import styled from 'styled-components';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { configDocs } from '../../../.storybook/config-docs';
import { Box } from '.';
import docs from './README.STACKING.mkd';

const FixedHeightBox = styled(Box)`
  min-height: 200px;
`;
FixedHeightBox.displayName = 'FixedHeightBox';

storiesOf('Primitives/Box/stacking/row/justify', module)
  .addDecorator(withInfo(configDocs(docs, Box)))

  .add('start', () => (
    <Box stacked="row" justify="start" colorName="background" spacing="m4">
      <Box colorName="brand-secondary-bg" spacing="p3">
        Inner 1
      </Box>
      <Box colorName="brand-primary-base" spacing="p3">
        Inner 2
      </Box>
      <Box colorName="brand-secondary-base" spacing="p3">
        Inner 3
      </Box>
    </Box>
  ))
  .add('center', () => (
    <Box stacked="row" justify="center" colorName="background" spacing="m4">
      <Box colorName="brand-secondary-bg" spacing="p3">
        Inner 1
      </Box>
      <Box colorName="brand-primary-base" spacing="p3">
        Inner 2
      </Box>
      <Box colorName="brand-secondary-base" spacing="p3">
        Inner 3
      </Box>
    </Box>
  ))
  .add('end', () => (
    <Box stacked="row" justify="end" colorName="background" spacing="m4">
      <Box colorName="brand-secondary-bg" spacing="p3">
        Inner 1
      </Box>
      <Box colorName="brand-primary-base" spacing="p3">
        Inner 2
      </Box>
      <Box colorName="brand-secondary-base" spacing="p3">
        Inner 3
      </Box>
    </Box>
  ))
  .add('space-between', () => (
    <Box
      stacked="row"
      justify="space-between"
      colorName="background"
      spacing="m4"
    >
      <Box colorName="brand-secondary-bg" spacing="p3">
        Inner 1
      </Box>
      <Box colorName="brand-primary-base" spacing="p3">
        Inner 2
      </Box>
      <Box colorName="brand-secondary-base" spacing="p3">
        Inner 3
      </Box>
    </Box>
  ));

storiesOf('Primitives/Box/stacking/row/align', module)
  .add('start', () => (
    <FixedHeightBox
      stacked="row"
      align="start"
      colorName="background"
      spacing="m4"
    >
      <Box colorName="brand-secondary-bg" spacing="p3">
        Inner 1
      </Box>
      <Box colorName="brand-primary-base" spacing="p3">
        Inner 2
      </Box>
      <Box colorName="brand-secondary-base" spacing="p3">
        Inner 3
      </Box>
    </FixedHeightBox>
  ))
  .add('center', () => (
    <FixedHeightBox
      stacked="row"
      align="center"
      colorName="background"
      spacing="m4"
    >
      <Box colorName="brand-secondary-bg" spacing="p3">
        Inner 1
      </Box>
      <Box colorName="brand-primary-base" spacing="p3">
        Inner 2
      </Box>
      <Box colorName="brand-secondary-base" spacing="p3">
        Inner 3
      </Box>
    </FixedHeightBox>
  ))
  .add('end', () => (
    <FixedHeightBox
      stacked="row"
      align="end"
      colorName="background"
      spacing="m4"
    >
      <Box colorName="brand-secondary-bg" spacing="p3">
        Inner 1
      </Box>
      <Box colorName="brand-primary-base" spacing="p3">
        Inner 2
      </Box>
      <Box colorName="brand-secondary-base" spacing="p3">
        Inner 3
      </Box>
    </FixedHeightBox>
  ));
