// @flow
import React, { Fragment } from 'react';
import styled from 'styled-components';
import { range } from 'lodash';
import { Box, getPaletteColor, Span, Text } from '../../index';
import { useBreakPoint } from '../../hooks';
import docs from './stacking.mdx';

export default {
  title: 'Design System/Layout/Stack',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

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

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

export const ColumnJustifyStart = () => (
  <ColumnContainer
    stacked="column"
    justify="start"
    colorName="background"
    spacing="m2"
  >
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 1</Span>
    </Box>
    <Box colorName="brand-secondary-fg" spacing="p1">
      <Span colorName="brand-secondary-bg">Inner 2</Span>
    </Box>
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 3</Span>
    </Box>
  </ColumnContainer>
);

export const ColumnJustifyCenter = () => (
  <ColumnContainer
    stacked="column"
    justify="center"
    colorName="background"
    spacing="m2"
  >
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 1</Span>
    </Box>
    <Box colorName="brand-secondary-fg" spacing="p1">
      <Span colorName="brand-secondary-bg">Inner 2</Span>
    </Box>
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 3</Span>
    </Box>
  </ColumnContainer>
);

export const ColumnJustifyEnd = () => (
  <ColumnContainer
    stacked="column"
    justify="end"
    colorName="background"
    spacing="m2"
  >
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 1</Span>
    </Box>
    <Box colorName="brand-secondary-fg" spacing="p1">
      <Span colorName="brand-secondary-bg">Inner 2</Span>
    </Box>
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 3</Span>
    </Box>
  </ColumnContainer>
);

export const ColumnJustifySpaceBetween = () => (
  <ColumnContainer
    stacked="column"
    justify="space-between"
    colorName="background"
    spacing="m2"
  >
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 1</Span>
    </Box>
    <Box colorName="brand-secondary-fg" spacing="p1">
      <Span colorName="brand-secondary-bg">Inner 2</Span>
    </Box>
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 3</Span>
    </Box>
  </ColumnContainer>
);

export const ColumnJustifySpaceAround = () => (
  <ColumnContainer
    stacked="column"
    justify="space-around"
    colorName="background"
    spacing="m2"
  >
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 1</Span>
    </Box>
    <Box colorName="brand-secondary-fg" spacing="p1">
      <Span colorName="brand-secondary-bg">Inner 2</Span>
    </Box>
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 3</Span>
    </Box>
  </ColumnContainer>
);

export const ColumnJustifySpaceEvenly = () => (
  <ColumnContainer
    stacked="column"
    justify="space-evenly"
    colorName="background"
    spacing="m2"
  >
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 1</Span>
    </Box>
    <Box colorName="brand-secondary-fg" spacing="p1">
      <Span colorName="brand-secondary-bg">Inner 2</Span>
    </Box>
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 3</Span>
    </Box>
  </ColumnContainer>
);

export const ColumnAlignStart = () => (
  <ColumnContainer
    stacked="column"
    align="start"
    colorName="background"
    spacing="m2"
  >
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 1</Span>
    </Box>
    <Box colorName="brand-secondary-fg" spacing="p1">
      <Span colorName="brand-secondary-bg">Inner 2</Span>
    </Box>
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 3</Span>
    </Box>
  </ColumnContainer>
);

export const ColumnAlignCenter = () => (
  <ColumnContainer
    stacked="column"
    align="center"
    colorName="background"
    spacing="m2"
  >
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 1</Span>
    </Box>
    <Box colorName="brand-secondary-fg" spacing="p1">
      <Span colorName="brand-secondary-bg">Inner 2</Span>
    </Box>
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 3</Span>
    </Box>
  </ColumnContainer>
);

export const ColumnAlignEnd = () => (
  <ColumnContainer
    stacked="column"
    align="end"
    colorName="background"
    spacing="m2"
  >
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 1</Span>
    </Box>
    <Box colorName="brand-secondary-fg" spacing="p1">
      <Span colorName="brand-secondary-bg">Inner 2</Span>
    </Box>
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 3</Span>
    </Box>
  </ColumnContainer>
);

const WideColumnContainer = styled(ColumnContainer)`
  width: 600px;
`;

export const ColumnWrap = () => (
  <WideColumnContainer
    stacked="column"
    justify="start"
    colorName="background"
    wrap
  >
    {range(1, 9, 2).map((i) => (
      <Fragment key={i}>
        <Box colorName="brand-secondary-bg" spacing="p1">
          <Span colorName="brand-secondary-fg">Inner {i}</Span>
        </Box>
        <Box colorName="brand-secondary-fg" spacing="p1">
          <Span colorName="brand-secondary-bg">Inner {i + 1}</Span>
        </Box>
      </Fragment>
    ))}
  </WideColumnContainer>
);

export const RowJustifyStart = () => (
  <RowContainer
    stacked="row"
    justify="start"
    colorName="background"
    spacing="m2"
  >
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 1</Span>
    </Box>
    <Box colorName="brand-secondary-fg" spacing="p1">
      <Span colorName="brand-secondary-bg">Inner 2</Span>
    </Box>
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 3</Span>
    </Box>
  </RowContainer>
);

export const RowJustifyCenter = () => (
  <RowContainer
    stacked="row"
    justify="center"
    colorName="background"
    spacing="m2"
  >
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 1</Span>
    </Box>
    <Box colorName="brand-secondary-fg" spacing="p1">
      <Span colorName="brand-secondary-bg">Inner 2</Span>
    </Box>
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 3</Span>
    </Box>
  </RowContainer>
);

export const RowJustifyEnd = () => (
  <RowContainer stacked="row" justify="end" colorName="background" spacing="m2">
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 1</Span>
    </Box>
    <Box colorName="brand-secondary-fg" spacing="p1">
      <Span colorName="brand-secondary-bg">Inner 2</Span>
    </Box>
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 3</Span>
    </Box>
  </RowContainer>
);

export const RowJustifySpaceBetween = () => (
  <RowContainer
    stacked="row"
    justify="space-between"
    colorName="background"
    spacing="m2"
  >
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 1</Span>
    </Box>
    <Box colorName="brand-secondary-fg" spacing="p1">
      <Span colorName="brand-secondary-bg">Inner 2</Span>
    </Box>
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 3</Span>
    </Box>
  </RowContainer>
);

export const RowJustifySpaceAround = () => (
  <RowContainer
    stacked="row"
    justify="space-around"
    colorName="background"
    spacing="m2"
  >
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 1</Span>
    </Box>
    <Box colorName="brand-secondary-fg" spacing="p1">
      <Span colorName="brand-secondary-bg">Inner 2</Span>
    </Box>
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 3</Span>
    </Box>
  </RowContainer>
);

export const RowJustifySpaceEvenly = () => (
  <RowContainer
    stacked="row"
    justify="space-evenly"
    colorName="background"
    spacing="m2"
  >
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 1</Span>
    </Box>
    <Box colorName="brand-secondary-fg" spacing="p1">
      <Span colorName="brand-secondary-bg">Inner 2</Span>
    </Box>
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 3</Span>
    </Box>
  </RowContainer>
);

export const RowAlignStart = () => (
  <RowContainer stacked="row" align="start" colorName="background" spacing="m2">
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 1</Span>
    </Box>
    <Box colorName="brand-secondary-fg" spacing="p1">
      <Span colorName="brand-secondary-bg">Inner 2</Span>
    </Box>
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 3</Span>
    </Box>
  </RowContainer>
);

export const RowAlignCenter = () => (
  <RowContainer
    stacked="row"
    align="center"
    colorName="background"
    spacing="m2"
  >
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 1</Span>
    </Box>
    <Box colorName="brand-secondary-fg" spacing="p1">
      <Span colorName="brand-secondary-bg">Inner 2</Span>
    </Box>
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 3</Span>
    </Box>
  </RowContainer>
);

export const RowAlignEnd = () => (
  <RowContainer stacked="row" align="end" colorName="background" spacing="m2">
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 1</Span>
    </Box>
    <Box colorName="brand-secondary-fg" spacing="p1">
      <Span colorName="brand-secondary-bg">Inner 2</Span>
    </Box>
    <Box colorName="brand-secondary-bg" spacing="p1">
      <Span colorName="brand-secondary-fg">Inner 3</Span>
    </Box>
  </RowContainer>
);

export const RowWrap = () => (
  <RowContainer stacked="row" justify="start" colorName="background" wrap>
    {range(1, 9, 2).map((i) => (
      <Fragment key={i}>
        <Box colorName="brand-secondary-bg" spacing="p1">
          <Span colorName="brand-secondary-fg">Inner {i}</Span>
        </Box>
        <Box colorName="brand-secondary-fg" spacing="p1">
          <Span colorName="brand-secondary-bg">Inner {i + 1}</Span>
        </Box>
      </Fragment>
    ))}
  </RowContainer>
);

export const ResponsiveRowMdAndUp = () => {
  const bp = useBreakPoint();
  return (
    <>
      <Text spacing="mv2">Current breakpoint: &quot;{bp}&quot;</Text>
      <Box
        stacked={{ sm: 'column', md: 'row' }}
        align={{ sm: 'stretch', md: 'start' }}
        justify={{ sm: 'start', md: 'center' }}
        colorName="background"
        spacing="m2"
      >
        {range(1, 11, 2).map((i) => (
          <Fragment key={i}>
            <Box colorName="brand-secondary-bg" spacing="p1">
              <Span colorName="brand-secondary-fg">Inner {i}</Span>
            </Box>
            <Box colorName="brand-secondary-fg" spacing="p1">
              <Span colorName="brand-secondary-bg">Inner {i + 1}</Span>
            </Box>
          </Fragment>
        ))}
      </Box>
    </>
  );
};
