import styled from 'styled-components';
import { spacing } from '../../style/theme';
const validValue = [0, 1, 2, 4, 8, 12, 14, 16, 20, 24, 28, 32];
const createSpacingFn = (propsName, spacingFields) => (props) => {
    if (!props[propsName] && props[propsName] !== 0) {
        return null;
    }
    //@ts-ignore -- this is ensured below
    let value = props[propsName];
    if (!validValue.includes(value)) {
        console.warn(`'${propsName}' props should be a number in this list: ` +
            '0, 1, 2, 4, 8, 12, 14, 16, 20, 24, 28, 32');
        return null;
    }
    const result = spacingFields
        .map((param) => `${param}: ${spacing[`sp${value}`]}`)
        .join(';');
    return result;
};
const m = createSpacingFn('m', ['margin']);
const mt = createSpacingFn('mt', ['margin-top']);
const mr = createSpacingFn('mr', ['margin-right']);
const mb = createSpacingFn('mb', ['margin-bottom']);
const ml = createSpacingFn('ml', ['margin-left']);
const mx = createSpacingFn('mx', ['margin-left', 'margin-right']);
const my = createSpacingFn('my', ['margin-top', 'margin-bottom']);
const p = createSpacingFn('p', ['padding']);
const pt = createSpacingFn('pt', ['padding-top']);
const pr = createSpacingFn('pr', ['padding-right']);
const pb = createSpacingFn('pb', ['padding-bottom']);
const pl = createSpacingFn('pl', ['padding-left']);
const px = createSpacingFn('px', ['padding-left', 'padding-right']);
const py = createSpacingFn('py', ['padding-top', 'padding-bottom']);
/**
 * @deprecated
 * Please use Box with import { Box } from '@scality/core-ui/dist/next';
 *
 * Most common use cases:
 *
 * `<SpacedBox m={14}><Component /></SpacedBox>`
 *
 * `<SpacedBox as={SpanComponent}><Component /></SpacedBox>`
 *
 * Props : m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py
 *
 * Values: 0, 1, 2, 4, 8, 12, 14, 16, 20, 24, 28, 32
 */
const SpacedBox = styled.div `
  ${m};
  ${mt};
  ${mr};
  ${mb};
  ${ml};
  ${mx};
  ${my};
  ${p};
  ${pt};
  ${pr};
  ${pb};
  ${pl};
  ${px};
  ${py};
`;
export { SpacedBox };
