import React from "react";
import PropTypes from "prop-types";
import { renderTrees } from "@times-components/markup";
import ArticleImage from "@times-components/article-image";
import PullQuote from "@times-components/pull-quote";
import BodyParagraph from "./article-body-paragraph";
import ArticleLink from "./article-link";

import {
  PrimaryImg,
  SecondaryImg,
  InlineImg,
  PullQuoteContainer,
  PullQuoteResp
} from "../styles/article-body/responsive";

export const responsiveImageWrapper = imageType => {
  switch (imageType) {
    case "secondary":
      return SecondaryImg;
    case "inline":
      return InlineImg;
    default:
      return PrimaryImg;
  }
};

const ArticleRow = ({ content: { data, index } }) =>
  renderTrees([data], {
    paragraph(key, attributes, children) {
      return (
        <BodyParagraph key={index} uid={index}>
          {children}
        </BodyParagraph>
      );
    },
    image(key, { display, ratio, url, caption, credits }) {
      const ImageWrapper = responsiveImageWrapper(display);
      return (
        <ImageWrapper key={key}>
          <ArticleImage
            imageOptions={{
              display,
              ratio,
              url
            }}
            captionOptions={{
              caption,
              credits
            }}
          />
        </ImageWrapper>
      );
    },
    pullQuote(key, { content, caption: { name, twitter } }) {
      return (
        <PullQuoteContainer>
          <PullQuoteResp>
            <PullQuote
              key={key}
              content={content}
              caption={name}
              twitter={twitter}
            />
          </PullQuoteResp>
        </PullQuoteContainer>
      );
    },
    link(key, attributes, children) {
      return (
        <ArticleLink
          key={index}
          uuid={index}
          onPress={() => {}}
          url={attributes.href}
        >
          {children}
        </ArticleLink>
      );
    }
  });

ArticleRow.propTypes = {
  content: PropTypes.shape({
    data: PropTypes.shape({
      attributes: PropTypes.object,
      children: PropTypes.arrayOf(PropTypes.object),
      name: PropTypes.string
    }),
    index: PropTypes.number
  }).isRequired
};

export default ArticleRow;

@@ -835,21 +835,19 @@
 ph key=%7B
-index
+key
 %7D uid=%7Bi
@@ -1455,26 +1455,36 @@
 oteContainer
+ key=%7Bkey%7D
 %3E%0A
-
           %3CP
@@ -1523,46 +1523,8 @@
 uote
-%0A              key=%7Bkey%7D%0A             
  con
@@ -1537,30 +1537,16 @@
 content%7D
-%0A             
  caption
@@ -1552,30 +1552,16 @@
 n=%7Bname%7D
-%0A             
  twitter
@@ -1570,28 +1570,16 @@
 twitter%7D
-%0A           
  /%3E%0A    
@@ -1736,21 +1736,19 @@
    key=%7B
-index
+key
 %7D%0A      

handle keys properly in the article rows renderers (#559)