import * as React from 'react';
import PropTypes, { string, number, oneOf, oneOfType } from 'prop-types';
import { IconMap } from './IconMap';
import { useTheme } from 'emotion-theming';
import { get } from 'styled-system';

const IconWrapper = ({ children, size }) => {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: `${size * 2}px`,
        height: `${size * 2}px`,
        borderRadius: '50%',
        border: '1px solid #E0E0E0',
        padding: '8px',
        backgroundColor: 'white',
      }}
    >
      {children}
    </div>
  );
};

const Icon = ({ name, size, bordered, className, color, ...rest }) => {
  const theme = useTheme();
  const Comp = IconMap[name];

  if (!Comp) return null;

  const iconElement = (
    <Comp
      className={className}
      name={name}
      width={size}
      height={size}
      color={get(theme, `colors.${color}`, color)}
      {...rest}
    />
  );

  return bordered ? <IconWrapper size={size}>{iconElement}</IconWrapper> : iconElement;
};

export default Icon;

Icon.propTypes = {
  size: oneOfType([string, number]),
  className: string,
  name: oneOf(Object.keys(IconMap)),
  color: string,
  bordered: PropTypes.bool,
};

Icon.defaultProps = {
  size: 20,
  className: '',
  name: undefined,
  color: 'currentColor',
  bordered: false,
};