import React, { ComponentType, CSSProperties } from 'react';

const defaultProps = {
  color: '#38ad48' as CSSProperties['color'],
  enabled: true,
  size: 50 as CSSProperties['width'],
  style: {} as CSSProperties,
};
const normalizeSize = (size: CSSProperties['width']) => (
  parseFloat(size.toString()).toString() === size.toString()
    ? `${size}px`
    : size.toString()
);

export type SpinnersProps = Partial<typeof defaultProps>;

export const withSharedProps = <P extends SpinnersProps>(Component: ComponentType<P>) => {
  const Wrapper = (props: P) => {
    const {
      color, enabled, size, style, ...otherProps
    } = props;
    const componentProps = {
      ...otherProps,
      style: {
        color,
        overflow: 'visible',
        width: normalizeSize(size),
        ...style,
      },
    };

    if (!enabled) return null;

    return <Component {...componentProps as P} />;
  };

  Wrapper.defaultProps = defaultProps;

  return Wrapper;
};