// @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 boxDocs from './README.STACKING.mkd';
import stackingDocs from '../../mixins/stacking/STACKING.mkd';

const docs = `${boxDocs} ${stackingDocs}`;

const FixedHeightBox = styled(Box)`
  height: 300px;
`;
FixedHeightBox.displayName = 'FixedHeightBox';

storiesOf('Primitives/Box/stacking/column/justify', module)
  .add(
    'start',
    withDocs(docs, [Head5, FixedHeightBox])(() => (
      <FixedHeightBox
        stacked="column"
        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>
      </FixedHeightBox>
    )),
  )
  .add(
    'center',
    withDocs(docs, [Head5, FixedHeightBox])(() => (
      <FixedHeightBox
        stacked="column"
        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>
      </FixedHeightBox>
    )),
  )
  .add(
    'end',
    withDocs(docs, [Head5, FixedHeightBox])(() => (
      <FixedHeightBox
        stacked="column"
        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>
      </FixedHeightBox>
    )),
  )
  .add(
    'space-between',
    withDocs(docs, [Head5, FixedHeightBox])(() => (
      <FixedHeightBox
        stacked="column"
        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>
      </FixedHeightBox>
    )),
  );

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