import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import warning from 'warning';
import './background.scss';

const colors = [
  'none', 'white', 'xx-light-grey', 'x-light-grey', 'light-grey', 'medium-light-grey', 'grey',
  'medium-dark-grey', 'dark-grey', 'black-grey'
];

const propTypes = {
  /** @ignore */
  className: PropTypes.string,
  /** @deprecated use backgroundColor instead */
  background: PropTypes.oneOf(['none', 'white', 'grey-medium', 'grey-light']),
  backgroundColor: PropTypes.oneOf(colors),
  /** @deprecated use borderColor instead */
  border: PropTypes.oneOf(['grey', 'grey-light', 'night-blue']),
  borderColor: PropTypes.oneOf(colors),
  color: PropTypes.oneOf(colors),
  /** A component, h1, h2, h3, a, react router Link, etc... */
  component: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.object,
    PropTypes.func
  ]),
  boxShadow: PropTypes.bool
};

const defaultProps = {
  className: undefined,
  background: null,
  backgroundColor: 'none',
  border: null,
  borderColor: null,
  color: null,
  component: 'div',
  boxShadow: false
};


const Background = ({
  className, component: MyComponent, boxShadow, background, backgroundColor, border, borderColor, color, ...props
}) => {
  if (background || border) {
    warning(false, 'Border and background props deprecated');
  }
  return (
    <MyComponent
      className={className}
      styleName={classNames(
        {
          [`old-background-${background}`]: background,
          [`old-border-${border}`]: border,
          [`background-color-${backgroundColor}`]: backgroundColor,
          [`border-color-${borderColor}`]: borderColor,
          [`color-${color}`]: color,
          'box-shadow': boxShadow
        })
      }
      {...props}
    />
  );
};


Background.propTypes = propTypes;
Background.defaultProps = defaultProps;

export default Background;
