import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import './card.scss';

const Card = ({
  children, itemsPerRow, colorVariant, horizontal, withoutBorder, size, className, component: Component, ...rest
}) => (
  <Component
    className={className}
    styleName={classNames(
      'main', colorVariant,
      {
        [`main--${itemsPerRow}-items-per-row`]: itemsPerRow && !horizontal,
        'without-border': withoutBorder,
        horizontal
      }
    )}
    {...rest}
  >
    {
      React.Children.map(children,
        child => {
          if (!React.isValidElement(child)) {
            return child;
          }

          return React.cloneElement(child, {
            size,
            colorVariant,
            horizontal
          });
        }
      )
    }
  </Component>
);

const propTypes = {
  /** @ignore */
  className: PropTypes.string,
  /** @ignore */
  children: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.arrayOf(PropTypes.element)
  ]),
  component: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.object,
    PropTypes.func
  ]),
  itemsPerRow: PropTypes.number,
  colorVariant: PropTypes.oneOf(['grey', 'white']),
  size: PropTypes.oneOf(['sm', 'md', 'lg']),
  withoutBorder: PropTypes.bool,
  horizontal: PropTypes.bool
};

const defaultProps = {
  className: undefined,
  children: null,
  itemsPerRow: 1,
  colorVariant: 'grey',
  size: 'md',
  withoutBorder: false,
  horizontal: false,
  component: 'div'
};

Card.propTypes = propTypes;
Card.defaultProps = defaultProps;
Card.componentName = 'Card';

export default Card;
