// @flow
import React from 'react';
import styled from 'styled-components';
import { storiesOf } from '@storybook/react';
import { withDocs } from '../../../.storybook/with-docs';
import { Box } from '.';
import { Head5 } from '../../core/typography';
import docs from './README.STACKING.mkd';

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

storiesOf('Primitives/Box/stacking/row/justify', module)
  .add(
    'start',
    withDocs(docs, [Head5, FixedHeightBox])(() => (
      <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',
    withDocs(docs, [Head5, FixedHeightBox])(() => (
      <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',
    withDocs(docs, [Head5, FixedHeightBox])(() => (
      <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',
    withDocs(docs, [Head5, FixedHeightBox])(() => (
      <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',
    withDocs(docs, [Head5, FixedHeightBox])(() => (
      <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',
    withDocs(docs, [Head5, FixedHeightBox])(() => (
      <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',
    withDocs(docs, [Head5, FixedHeightBox])(() => (
      <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>
    )),
  );
