import React from 'react';

import { Wrapper } from './styled';

const properties: { [index: string]: string } = {
  m: 'margin',
  p: 'padding',
  d: 'display',
  j: 'justify-content',
  a: 'align-items',
  f: 'flex-direction',
  w: 'width',
  h: 'height',
};

const directions: { [index: string]: string } = {
  t: 'Top',
  r: 'Right',
  b: 'Bottom',
  l: 'Left',
};

type Props = {
  [index: string]: React.ReactNode;
  children: React.ReactNode;
};

const Box: React.FC<Props> = ({ children, ...rest }: Props) => {
  const args = Object.keys(rest);

  if (!rest.width) {
    // eslint-disable-next-line no-param-reassign
    rest.width = '100%';
  }

  const styles = args.map((ele: string) => {
    const property = properties[ele[0]];
    const direction = directions[ele[1]];
    if (direction) {
      return `${property}-${direction}: ${rest[ele]}px;`;
    }
    return `${property}: ${rest[ele]};`;
  });

  return <Wrapper styles={styles}>{children}</Wrapper>;
};

export default Box;