// @flow
import React from 'react';
import styled from 'styled-components';
import { Box, getPaletteColor } from '../..';
import docs from './stacking.mdx';

export default {
  title: 'System|Stacking',
  parameters: {
    fileName: __filename,
    docs: {
      page: docs,
    },
  },
};

const ColumnContainer = styled(Box)`
  border: dashed 1px ${getPaletteColor('greyscale-dark')};
  height: 300px;
`;

const RowContainer = styled(Box)`
  border: dashed 1px black;
  height: 200px;
`;

export const ColumnJustifyStart = () => (
  <ColumnContainer
    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>
  </ColumnContainer>
);

export const ColumnJustifyCenter = () => (
  <ColumnContainer
    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>
  </ColumnContainer>
);

export const ColumnJustifyEnd = () => (
  <ColumnContainer
    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>
  </ColumnContainer>
);

export const ColumnJustifySpaceBetween = () => (
  <ColumnContainer
    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>
  </ColumnContainer>
);

export const ColumnAlignStart = () => (
  <ColumnContainer
    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>
  </ColumnContainer>
);

export const ColumnAlignCenter = () => (
  <ColumnContainer
    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>
  </ColumnContainer>
);

export const ColumnAlignEnd = () => (
  <ColumnContainer
    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>
  </ColumnContainer>
);

export const RowJustifyStart = () => (
  <RowContainer
    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>
  </RowContainer>
);

export const RowJustifyCenter = () => (
  <RowContainer
    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>
  </RowContainer>
);

export const RowJustifyEnd = () => (
  <RowContainer 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>
  </RowContainer>
);

export const RowJustifySpaceBetween = () => (
  <RowContainer
    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>
  </RowContainer>
);

export const RowAlignStart = () => (
  <RowContainer 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>
  </RowContainer>
);

export const RowAlignCenter = () => (
  <RowContainer
    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>
  </RowContainer>
);

export const RowAlignEnd = () => (
  <RowContainer 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>
  </RowContainer>
);
