// TODO: Try to fix this lint error without the disable
/* eslint-disable react/no-array-index-key */
import { Fragment } from 'react';
import classnames from 'classnames';
import get from 'lodash/get';
import renderLeaf from './renderLeaf';
import Tweet from '../nodes/Tweet';
import CodeNode from '../nodes/Code';
import IframeNode from '../nodes/Iframe';
const renderNode = function renderNode(data, props) {
  const {
    type,
    leaves,
    data: nodeData
  } = data;
  const {
    active,
    classes,
    nodeProps = {}
  } = props;
  if (leaves) {
    return leaves.map((d, idx) => <Fragment key={idx}>
        {renderLeaf(d, props)}
      </Fragment>);
  }
  if (type) {
    const children = <>
        {data.nodes.map((d, idx) => <Fragment key={idx}>
            {renderNode(d, props)}
          </Fragment>)}
      </>;
    switch (type) {
      case 'blockquote':
        return <blockquote className={classnames(classes.blockquote)} {...get(nodeProps, 'blockquote', {})}>
            {children}
          </blockquote>;
      case 'bulleted-list':
        return <ul className={classnames(classes.list, classes.bullets)} {...get(nodeProps, 'bulleted-list', {})}>
            {children}
          </ul>;
      case 'list-item':
        return <li className={classnames(classes.text, classes.item)} {...get(nodeProps, 'list-item', {})}>
            {children}
          </li>;
      case 'numbered-list':
        return <ol className={classnames(classes.list, classes.numbered)} {...get(nodeProps, 'numbered-list', {})}>
            {children}
          </ol>;
      case 'paragraph':
        return <p className={classnames(classes.text, classes.paragraph)} {...get(nodeProps, 'paragraph', {})}>
            {children}
          </p>;
      case 'link':
        return <a className={classes.link} href={nodeData.href} {...get(nodeProps, 'link', {})}>
            {children}
          </a>;
      case 'image':
        return <figure className={classes['image-container']} {...get(nodeProps, 'image__figure', {})}>
            <img className={classes.image} src={nodeData.canonical} alt="Custom – missing alt text" {...get(nodeProps, 'image__img', {})} />
          </figure>;
      case 'tweet':
        return <Tweet className={classes['tweet-container']} tweet={nodeData.url} />;
      case 'youtube':
        return <div className={classes['youtube-container']}>
            <CodeNode active={active} code={nodeData.html} />
          </div>;
      case 'code':
        return <CodeNode className={classes['code-container']} active={active} code={nodeData.code} />;
      case 'iframe':
        return <IframeNode className={classes.iframe} active={active} code={nodeData.code} />;
      default:
        return () => null;
    }
  }
  return null;
};
export default renderNode;