import { forwardRef } from 'react';
import PropTypes from 'prop-types';
import * as Icons from '@phosphor-icons/react';
import getColor from "../../../utils/colors/getColor.js";

/**
 * **NOTE: READ THIS DOCUMENTATION BEFORE USING.** USING THE `Icon` COMPONENT
 * DIRECTLY WILL CAUSE YOUR PROJECT TO HAVE A VERY LARGE BUNDLE SIZE. READ ON
 * TO LEARN HOW TO USE THESE ICONS IN YOUR PROJECT.
 *
 * This `Icon` component is a wrapper around `@phosphor-icons/react` that
 * provides all of its icons under one component, primarily for documentation
 * purposes. Every available icon accepts the props listed below in addition to
 * all props that you can pass to a normal SVG element, including inline style
 * objects, `onClick` handlers, and more.
 *
 * Great, so how do you actually _use_ these icons in your project?
 *
 * Each icon is imported individually under the name `Icon{name}` where
 * `{name}` is the name of one of the icons you see below. For example, the
 * icon `Heart` is exported under the name `IconHeart`. This is to avoid name
 * conflicts with other components in our library.
 *
 * ```jsx
 * import { IconHeart } from '@politico/interactive-style';
 *
 * // in your component
 * return (
 *   <IconHeart weight="fill" />
 * );
 * ```
 *
 * Note that you can apply global styling to all of the icons in sections of
 * your app by using the `IconContext` component.
 */
const Icon = forwardRef((props, ref) => {
  const {
    icon,
    color,
    ...iconProps
  } = props;
  const Tag = Icons[icon];
  if (!Tag) {
    return null;
  }
  return <Tag ref={ref} color={getColor(color)} {...iconProps} />;
});
Icon.displayName = 'Icon';
Icon.defaultProps = {
  color: 'currentColor',
  size: undefined,
  weight: 'regular',
  mirrored: undefined,
  alt: undefined
};
Icon.propTypes = {
  /**
   * The name of the icon you want to render (e.g., `"Heart"`).
   */
  icon: PropTypes.string.isRequired,
  /**
   * Icon stroke/fill color. This can be a named color in our system or any CSS
   * color string, including hex, rgb, rgba, hsl, hsla, named colors, or the
   * special currentColor variable.
   */
  color: PropTypes.string,
  /**
   * Icon height & width. As with standard React elements, this can be
   * a number, or a string with units in px, %, em, rem, pt, cm, mm, in.
   */
  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /**
   * Icon weight/style. Can also be used, for example, to "toggle" an icon's
   * state: a rating component could use Stars with `weight="regular"` to
   * denote an empty star, and `weight="fill"` to denote a filled star.
   */
  weight: PropTypes.oneOf(['thin', 'light', 'regular', 'bold', 'fill', 'duotone']),
  /**
   * Flip the icon horizontally. Can be useful in RTL languages where normal
   * icon orientation is not appropriate.
   */
  mirrored: PropTypes.bool,
  /**
   * Add accessible alt text to an icon.
   */
  alt: PropTypes.string
};
export default Icon;