import React from 'react';
import PropTypes from 'prop-types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { fas } from '@fortawesome/pro-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';
import toLower from 'lodash/fp/toLower';
import merge from 'lodash/fp/merge';
import getOr from 'lodash/fp/getOr';
import { convert } from 'css-color-function';
import { createGradientBackground } from '../../util/get-background-gradient-color';
import style from './style.css';
library.add(fas);
export const DEFAULT_PRESET = 'm';
export const ICON_LUMINOSITY = 32;
export const DEFAULT_WRAPPER_SIZE = 40;
export const ICON_PADDING = 8;
export const DEFAULT_ICON_COLOR = 'hsl(0, 0%, 32%)';
export function getForegroundColor(backgroundColor) {
  return convert(`color(${backgroundColor} lightness(${ICON_LUMINOSITY}%))`);
}
const SIZE_CONFIGS = {
  s: {
    faSize: 12,
    wrapperSize: 32
  },
  m: {
    faSize: 16,
    wrapperSize: DEFAULT_WRAPPER_SIZE
  },
  xl: {
    faSize: 20,
    wrapperSize: 48
  }
};
const Icon = ({
  iconName,
  iconColor,
  backgroundColor,
  gradientBackground,
  borderRadius,
  preset = DEFAULT_PRESET,
  size,
  customStyle
}) => {
  const effectiveIconColor = iconColor || (backgroundColor ? getForegroundColor(backgroundColor) : DEFAULT_ICON_COLOR);
  const effectiveSize = size ? merge(SIZE_CONFIGS[DEFAULT_PRESET], size) : getOr(SIZE_CONFIGS[DEFAULT_PRESET], toLower(preset), SIZE_CONFIGS);
  const hasBackground = backgroundColor || gradientBackground;
  if (!hasBackground) {
    return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
      icon: `fa-${iconName}`,
      color: effectiveIconColor,
      fontSize: effectiveSize.faSize,
      style: customStyle
    });
  }
  const wrapperSize = effectiveSize.wrapperSize - ICON_PADDING * 2;
  const iconWrapperStyle = {
    background: gradientBackground ? createGradientBackground(effectiveIconColor, '81%', '91%') : backgroundColor,
    borderRadius,
    width: wrapperSize,
    height: wrapperSize,
    padding: ICON_PADDING
  };
  return /*#__PURE__*/React.createElement("div", {
    className: style.iconWrapper,
    style: {
      ...iconWrapperStyle,
      ...customStyle
    }
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
    icon: `fa-${iconName}`,
    color: effectiveIconColor,
    fontSize: effectiveSize.faSize
  }));
};
export const propTypes = {
  iconName: PropTypes.string.isRequired,
  iconColor: PropTypes.string,
  backgroundColor: PropTypes.string,
  gradientBackground: PropTypes.bool,
  borderRadius: PropTypes.string,
  preset: PropTypes.oneOf(['s', 'm', 'xl']),
  size: PropTypes.shape({
    faSize: PropTypes.number.isRequired,
    wrapperSize: PropTypes.number.isRequired
  }),
  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
};

// const MemoizedIcon = React.memo(Icon) as React.MemoExoticComponent<React.FC<IconProps>> & {
//   propTypes?: React.WeakValidationMap<IconProps>;
//   defaultProps?: Partial<IconProps>;
// };

Icon.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
// MemoizedIcon.propTypes = Icon.propTypes;

export default Icon;
//# sourceMappingURL=index.js.map