import { Space as OldSpace, SpaceProps } from 'antd';
import * as React from 'react';

enum SIZE_ENUM {
  'NONE' = 0,
  'XXXXS' = 2,
  'XXXS' = 4,
  'XXS' = 6,
  'XS' = 8,
  'S' = 12,
  'M' = 16,
  'L' = 20,
  'XL' = 24,
  'XXL' = 32,
  'XXXL' = 40,
}
interface ExtraProps {
  size?: keyof typeof SIZE_ENUM | number;
  marginSize?: SIZE_ENUM | number;
}

const Space = (props: Omit<SpaceProps, 'size'> & ExtraProps) => {
  const { size: sizeName = 'M', marginSize: marginSizeName = 'NONE' } = props;
  const size = SIZE_ENUM[sizeName] || sizeName;
  const marginSize = SIZE_ENUM[marginSizeName] || marginSizeName;
  return (
    <div style={{ margin: `${marginSize}px`, display: 'flex' }}>
      <OldSpace {...props} size={size as any}></OldSpace>
    </div>
  );
};

export { Space };