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

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

const BorderBox = styled(Box)`
  border: solid ${getPaletteColor('greyscale-dark')} 1px;
`;

const InlineBox = styled(Box)`
  display: inline-block;
`;

const LEVELS = [0, 1, 2, 3, 4, 5, 6, 7];

export const MarginLeft = () => (
  <BorderBox>
    {LEVELS.map((level) => (
      <Box key={level} spacing={`ml${level}`} colorName="brand-secondary-fg">
        <Span colorName="brand-secondary-bg">
          spacing=&quot;ml{level}&quot;
        </Span>
      </Box>
    ))}
  </BorderBox>
);

export const MarginRight = () => (
  <BorderBox>
    {LEVELS.map((level) => (
      <Box key={level} spacing={`mr${level}`} colorName="brand-secondary-fg">
        <Span colorName="brand-secondary-bg">
          spacing=&quot;mr{level}&quot;
        </Span>
      </Box>
    ))}
  </BorderBox>
);

export const MarginHorizontal = () => (
  <BorderBox>
    {LEVELS.map((level) => (
      <Box key={level} spacing={`mh${level}`} colorName="brand-secondary-fg">
        <Span colorName="brand-secondary-bg">
          spacing=&quot;mh{level}&quot;
        </Span>
      </Box>
    ))}
  </BorderBox>
);

export const MarginTop = () => (
  <BorderBox stacked="row">
    {LEVELS.map((level) => (
      <Box key={level} spacing={`mt${level}`} colorName="brand-secondary-fg">
        <Span colorName="brand-secondary-bg">
          spacing=&quot;mt{level}&quot;
        </Span>
      </Box>
    ))}
  </BorderBox>
);

export const MarginBottom = () => (
  <BorderBox stacked="row">
    {LEVELS.map((level) => (
      <Box key={level} spacing={`mb${level}`} colorName="brand-secondary-fg">
        <Span colorName="brand-secondary-bg">
          spacing=&quot;mb{level}&quot;
        </Span>
      </Box>
    ))}
  </BorderBox>
);

export const MarginVertical = () => (
  <BorderBox stacked="row">
    {LEVELS.map((level) => (
      <Box key={level} spacing={`mv${level}`} colorName="brand-secondary-fg">
        <Span colorName="brand-secondary-bg">
          spacing=&quot;mv{level}&quot;
        </Span>
      </Box>
    ))}
  </BorderBox>
);

export const PaddingLeft = () => (
  <BorderBox>
    {LEVELS.map((level) => (
      <Box key={level}>
        <InlineBox spacing={`pl${level}`} colorName="brand-secondary-fg">
          <Span colorName="brand-secondary-bg">
            spacing=&quot;pl{level}&quot;
          </Span>
        </InlineBox>
      </Box>
    ))}
  </BorderBox>
);

export const PaddingRight = () => (
  <BorderBox>
    {LEVELS.map((level) => (
      <Box key={level}>
        <InlineBox spacing={`pr${level}`} colorName="brand-secondary-fg">
          <Span colorName="brand-secondary-bg">
            spacing=&quot;pr{level}&quot;
          </Span>
        </InlineBox>
      </Box>
    ))}
  </BorderBox>
);

export const PaddingHorizontal = () => (
  <BorderBox>
    {LEVELS.map((level) => (
      <Box key={level}>
        <InlineBox spacing={`ph${level}`} colorName="brand-secondary-fg">
          <Span colorName="brand-secondary-bg">
            spacing=&quot;ph{level}&quot;
          </Span>
        </InlineBox>
      </Box>
    ))}
  </BorderBox>
);

export const PaddingTop = () => (
  <BorderBox stacked="row">
    {LEVELS.map((level) => (
      <Box key={level}>
        <Box spacing={`pt${level}`} colorName="brand-secondary-fg">
          <Span colorName="brand-secondary-bg">
            spacing=&quot;pt{level}&quot;
          </Span>
        </Box>
      </Box>
    ))}
  </BorderBox>
);

export const PaddingBottom = () => (
  <BorderBox stacked="row">
    {LEVELS.map((level) => (
      <Box key={level}>
        <Box spacing={`pb${level}`} colorName="brand-secondary-fg">
          <Span colorName="brand-secondary-bg">
            spacing=&quot;pb{level}&quot;
          </Span>
        </Box>
      </Box>
    ))}
  </BorderBox>
);

export const PaddingVertical = () => (
  <BorderBox stacked="row">
    {LEVELS.map((level) => (
      <Box key={level}>
        <Box spacing={`pv${level}`} colorName="brand-secondary-fg">
          <Span colorName="brand-secondary-bg">
            spacing=&quot;pv{level}&quot;
          </Span>
        </Box>
      </Box>
    ))}
  </BorderBox>
);
