import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import { Typography } from 'antd'
import PropTypes from 'prop-types'

const { Paragraph, Text } = Typography

const UlComponent = ({ children }) => <ul>{children}</ul>
UlComponent.propTypes = {
  children: PropTypes.node
}

const OlComponent = ({ children }) => (
  <ol style={{ paddingLeft: '20px', margin: 0 }}>{children}</ol>
)
OlComponent.propTypes = {
  children: PropTypes.node
}

const LiComponent = ({ children }) => <li>{children}</li>
LiComponent.propTypes = {
  children: PropTypes.node
}

const BlockquoteComponent = ({ children }) => (
  <Paragraph>
    <blockquote>{children}</blockquote>
  </Paragraph>
)
BlockquoteComponent.propTypes = { children: PropTypes.node }

const MarkdownDisplay = ({ content }) => {
  const components = {
    h1: (props) => <h1 {...props} />,
    h2: (props) => <h2 {...props} />,
    h3: (props) => <h3 {...props} />,
    h4: (props) => <h4 {...props} />,
    h5: (props) => <h5 {...props} />,
    h6: (props) => <h6 {...props} />,
    p: (props) => <p {...props} />,
    ul: UlComponent,
    ol: OlComponent,
    li: LiComponent,
    strong: (props) => <Text strong {...props} />,
    em: (props) => <Text italic {...props} />,
    code: ({ inline, ...props }) =>
      inline ? (
        <Text code {...props} />
      ) : (
        <Paragraph>
          <pre {...props} />
        </Paragraph>
      ),
    blockquote: BlockquoteComponent
  }

  return (
    <div className="markdown markdown-display">
      <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
        {content}
      </ReactMarkdown>
    </div>
  )
}

MarkdownDisplay.propTypes = {
  content: PropTypes.string.isRequired
}

export default MarkdownDisplay