import PropTypes from 'prop-types';
import getColor from "../../../utils/colors/getColor.js";

/**
 * Render an invisible SVG that defines an SVG filter that outlines an element
 * with a halo of a specified color. The filter operates on the element's
 * alpha channel and dilates it by the specified `radius` number of pixels,
 * then floods the resulting area with the specified `bg` color, and finally
 * merges the colored area with the original element so that you get an
 * outline effect. The filter itself is identified by the specified `id`, so
 * you can pass in a known value and use that value in a stylesheet or inline
 * styles to apply the filter to your element.
 *
 * For example, if you were to render this filter as:
 *
 * ```jsx
 *
 * <OutlineFilterSvg id="my-filter" />
 * ```
 *
 * You could apply it to an element in a stylesheet with:
 *
 * ```css
 * .myClass {
 *   filter: url(#my-filter);
 * }
 * ```
 *
 * Note that because the ID is used as a DOM element `id`, it must be unique
 * on the page. If you are rendering this component directly, it is your
 * responsibility to make sure that it is.
 */
const OutlineFilterSvg = function OutlineFilterSvg(props) {
  const {
    id,
    bg,
    radius,
    opacity
  } = props;
  return <svg version="1.1" xmlns="//www.w3.org/2000/svg" xmlnsXlink="//www.w3.org/1999/xlink" style={{
    height: 0,
    width: 0,
    position: 'absolute'
  }} alt="" role="presentation">
      <defs>
        <filter id={id}>
          <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius={radius} />
          <feFlood floodColor={getColor(bg)} floodOpacity={opacity} result="FLOOD" />
          <feComposite in="FLOOD" in2="DILATED" operator="in" result="OUTLINE" />
          <feMerge>
            <feMergeNode in="OUTLINE" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>
    </svg>;
};
OutlineFilterSvg.defaultProps = {
  bg: 'white',
  radius: 1,
  opacity: 1
};
OutlineFilterSvg.propTypes = {
  /**
   * The ID of the SVG filter, for reference in CSS filter definitions. Note
   * that this value _must_ be unique across the entire page and it is your
   * responsibility to ensure that it is.
   */
  id: PropTypes.string.isRequired,
  /**
   * The color to use for the outline created by this filter. This prop accepts
   * either a color name provided by this library or a CSS color value.
   */
  bg: PropTypes.string,
  /**
   * The radius of the outline in pixels.
   */
  radius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /**
   * The opacity of the outline, between 0 and 1.
   */
  opacity: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
};
export default OutlineFilterSvg;