/* eslint-disable react/no-array-index-key */
import PropTypes from 'prop-types';
import classnames from 'classnames';
import get from 'lodash/get';
import customizable from "../../../utils/css/customizable.js";
import Node from './Node';
import defaultClasses from './styles.module.scss';

/**
 * Render rich text content from KitchenSink with the option of providing your
 * own custom React components in place of the basic HTML tags. This can be
 * useful as a way to render either small snippets of text throughout an app or
 * complete sections of prose.
 *
 * ```js
 *
 * import { RenderedContent } from '@politico/interactive-style';
 * ```
 */
const RenderedContent = function RenderedContent(props) {
  const {
    active,
    source,
    unstyled,
    components
  } = props;
  const classes = unstyled ? {} : defaultClasses;
  if (!source) {
    return null;
  }
  const nodes = get(source, 'document.nodes');
  if (!nodes) {
    return null;
  }
  return <div className={classnames(customizable('RenderedContent'), {
    [defaultClasses.container]: !unstyled
  })}>
      {nodes.map((node, i) => <Node key={i} data={node} context={{
      active,
      classes,
      components
    }} />)}
    </div>;
};
RenderedContent.defaultProps = {
  active: true,
  unstyled: false,
  source: {},
  components: {}
};
RenderedContent.propTypes = {
  /**
   * The content to render
   */
  source: PropTypes.shape({}),
  /**
   * Deactivate to unload lazy-loaded components
   */
  active: PropTypes.bool,
  /**
   * Activate lazy-loaded components
   */
  unstyled: PropTypes.bool,
  /**
   * A set of custom components to use to render various pieces of rich
   * content.
   */
  components: PropTypes.shape({
    paragraph: PropTypes.elementType,
    blockquote: PropTypes.elementType,
    'numbered-list': PropTypes.elementType,
    'bulleted-list': PropTypes.elementType,
    'list-item': PropTypes.elementType,
    image: PropTypes.elementType,
    link: PropTypes.elementType,
    strong: PropTypes.elementType,
    emphasis: PropTypes.elementType,
    underlined: PropTypes.elementType,
    small: PropTypes.elementType,
    tweet: PropTypes.elementType,
    iframe: PropTypes.elementType,
    code: PropTypes.elementType,
    youtube: PropTypes.elementType
  })
};
export default RenderedContent;