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

const { Title, Paragraph, Text } = Typography

const UlComponent = ({ children }) => (
  <ul style={{ paddingLeft: '20px', margin: 0 }}>{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) => <Title level={1} {...props} />,
    h2: (props) => <Title level={2} {...props} />,
    h3: (props) => <Title level={3} {...props} />,
    h4: (props) => <Title level={4} {...props} />,
    h5: (props) => <Title level={5} {...props} />,
    h6: (props) => <Title level={6} {...props} />,
    p: (props) => <Paragraph {...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 (
    <Space
      direction='vertical'
      style={{ width: '100%' }}
      className={'markdown-display'}
    >
      <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
        {content}
      </ReactMarkdown>
    </Space>
  )
}

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

export default MarkdownDisplay