// @flow
import React, { type ComponentType } from 'react';
import styled from 'styled-components';
import { Box, type BoxProps, getPaletteColor, Span } from '../../index';
import docs from './spacing.mdx';
import { useBreakPoint } from '../../hooks';

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

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

const InlineBox: ComponentType<BoxProps> = styled(Box)`
  display: inline-block;
`;

export const MarginLeft = () => (
  <BorderBox>
    {['ml0', 'ml1', 'ml2', 'ml3', 'ml4', 'ml5', 'ml6', 'ml7', 'mlauto'].map(
      (level) => (
        <Box key={level} spacing={level} colorName="brand-secondary-fg">
          <Span colorName="brand-secondary-bg">
            spacing=&quot;{level}&quot;
          </Span>
        </Box>
      ),
    )}
  </BorderBox>
);

export const MarginRight = () => (
  <BorderBox>
    {['mr0', 'mr1', 'mr2', 'mr3', 'mr4', 'mr5', 'mr6', 'mr7', 'mlauto'].map(
      (level) => (
        <Box key={level} spacing={level} colorName="brand-secondary-fg">
          <Span colorName="brand-secondary-bg">
            spacing=&quot;{level}&quot;
          </Span>
        </Box>
      ),
    )}
  </BorderBox>
);

export const MarginHorizontal = () => (
  <BorderBox>
    {['mh0', 'mh1', 'mh2', 'mh3', 'mh4', 'mh5', 'mh6', 'mh7', 'mhauto'].map(
      (level) => (
        <Box key={level} spacing={level} colorName="brand-secondary-fg">
          <Span colorName="brand-secondary-bg">
            spacing=&quot;{level}&quot;
          </Span>
        </Box>
      ),
    )}
  </BorderBox>
);

export const MarginTop = () => (
  <BorderBox stacked="row">
    {['mt0', 'mt1', 'mt2', 'mt3', 'mt4', 'mt5', 'mt6', 'mt7'].map((level) => (
      <Box key={level} spacing={level} colorName="brand-secondary-fg">
        <Span colorName="brand-secondary-bg">spacing=&quot;{level}&quot;</Span>
      </Box>
    ))}
  </BorderBox>
);

export const MarginBottom = () => (
  <BorderBox stacked="row">
    {['mb0', 'mb1', 'mb2', 'mb3', 'mb4', 'mb5', 'mb6', 'mb7'].map((level) => (
      <Box key={level} spacing={level} colorName="brand-secondary-fg">
        <Span colorName="brand-secondary-bg">spacing=&quot;{level}&quot;</Span>
      </Box>
    ))}
  </BorderBox>
);

export const MarginVertical = () => (
  <BorderBox stacked="row">
    {['mv0', 'mv1', 'mv2', 'mv3', 'mv4', 'mv5', 'mv6', 'mv7'].map((level) => (
      <Box key={level} spacing={level} colorName="brand-secondary-fg">
        <Span colorName="brand-secondary-bg">spacing=&quot;{level}&quot;</Span>
      </Box>
    ))}
  </BorderBox>
);

export const PaddingLeft = () => (
  <BorderBox>
    {['pl0', 'pl1', 'pl2', 'pl3', 'pl4', 'pl5', 'pl6', 'pl7'].map((level) => (
      <Box key={level}>
        <InlineBox spacing={level} colorName="brand-secondary-fg">
          <Span colorName="brand-secondary-bg">
            spacing=&quot;{level}&quot;
          </Span>
        </InlineBox>
      </Box>
    ))}
  </BorderBox>
);

export const PaddingRight = () => (
  <BorderBox>
    {['pr0', 'pr1', 'pr2', 'pr3', 'pr4', 'pr5', 'pr6', 'pr7'].map((level) => (
      <Box key={level}>
        <InlineBox spacing={level} colorName="brand-secondary-fg">
          <Span colorName="brand-secondary-bg">
            spacing=&quot;{level}&quot;
          </Span>
        </InlineBox>
      </Box>
    ))}
  </BorderBox>
);

export const PaddingHorizontal = () => (
  <BorderBox>
    {['ph0', 'ph1', 'ph2', 'ph3', 'ph4', 'ph5', 'ph6', 'ph7'].map((level) => (
      <Box key={level}>
        <InlineBox spacing={level} colorName="brand-secondary-fg">
          <Span colorName="brand-secondary-bg">
            spacing=&quot;{level}&quot;
          </Span>
        </InlineBox>
      </Box>
    ))}
  </BorderBox>
);

export const PaddingTop = () => (
  <BorderBox stacked="row">
    {['pt0', 'pt1', 'pt2', 'pt3', 'pt4', 'pt5', 'pt6', 'pt7'].map((level) => (
      <Box key={level}>
        <Box spacing={level} colorName="brand-secondary-fg">
          <Span colorName="brand-secondary-bg">
            spacing=&quot;{level}&quot;
          </Span>
        </Box>
      </Box>
    ))}
  </BorderBox>
);

export const PaddingBottom = () => (
  <BorderBox stacked="row">
    {['pb0', 'pb1', 'pb2', 'pb3', 'pb4', 'pb5', 'pb6', 'pb7'].map((level) => (
      <Box key={level}>
        <Box spacing={level} colorName="brand-secondary-fg">
          <Span colorName="brand-secondary-bg">
            spacing=&quot;{level}&quot;
          </Span>
        </Box>
      </Box>
    ))}
  </BorderBox>
);

export const PaddingVertical = () => (
  <BorderBox stacked="row">
    {['pv0', 'pv1', 'pv2', 'pv3', 'pv4', 'pv5', 'pv6', 'pv7'].map((level) => (
      <Box key={level}>
        <Box spacing={level} colorName="brand-secondary-fg">
          <Span colorName="brand-secondary-bg">
            spacing=&quot;{level}&quot;
          </Span>
        </Box>
      </Box>
    ))}
  </BorderBox>
);

export const Responsive = () => {
  const bp = useBreakPoint();
  return (
    <BorderBox>
      <Box
        spacing={{
          sm: ['m1', 'p1'],
          md: ['m2', 'p2'],
          lg: ['m4', 'p4'],
          xl: ['m7', 'p7'],
        }}
        colorName="brand-secondary-fg"
      >
        <Span colorName="brand-secondary-bg">
          Current breakpoint: &quot;{bp}&quot;
        </Span>
      </Box>
    </BorderBox>
  );
};

export const ResponsiveSmallAndExlargeOnly = () => {
  const bp = useBreakPoint();
  return (
    <BorderBox>
      <Box
        spacing={{
          sm: ['m1', 'p1'],
          xl: ['m7', 'p7'],
        }}
        colorName="brand-secondary-fg"
      >
        <Span colorName="brand-secondary-bg">
          Current breakpoint: &quot;{bp}&quot;
        </Span>
      </Box>
    </BorderBox>
  );
};
