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

import './text-icon.scss';

const propTypes = {
  /** @ignore */
  className: PropTypes.string,
  /** @ignore */
  children: PropTypes.node,
  size: PropTypes.string,
  textSizing: PropTypes.bool,
  iconClassName: PropTypes.string,
  verticalAlign: PropTypes.oneOf(['start', 'end', 'center', 'baseline']),
  childrenClassName: PropTypes.string,
  name: PropTypes.string,
  variant: PropTypes.string,
  color: PropTypes.string,
  backgroundColor: PropTypes.string,
  borderColor: PropTypes.string,
  component: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.object,
    PropTypes.func
  ])
};

const defaultProps = {
  className: undefined,
  children: null,
  size: 'sm',
  textSizing: false,
  iconClassName: null,
  verticalAlign: 'center',
  childrenClassName: null,
  name: undefined,
  variant: undefined,
  color: undefined,
  backgroundColor: undefined,
  borderColor: undefined,
  component: 'span'
};

const TextIcon = ({
  component: Component, children, className, iconClassName, childrenClassName, size,
  textSizing, verticalAlign, variant, name, color, backgroundColor, borderColor, ...props
}) => {
  if (childrenClassName || iconClassName) {
    warning(false, '"childrenClassName" and "iconClassName" props deprecated');
  }

  return (
    <Component
      styleName={classNames('content', { [`vertical-align-${verticalAlign}`]: verticalAlign })}
      className={className}
      {...props}
    >
      <Icon
        className={iconClassName}
        name={name}
        size={size}
        variant={variant}
        color={color}
        backgroundColor={backgroundColor}
        borderColor={borderColor}
      />
      <span
        styleName={classNames('icon-text', { [`icon-text-${size}`]: textSizing })}
        className={childrenClassName}
      >
        {children}
      </span>
    </Component>
  );
};

TextIcon.propTypes = propTypes;
TextIcon.defaultProps = defaultProps;

export default TextIcon;
