import React from 'react';
import styled from 'styled-components';
import Markdown from 'markdown-to-jsx';

type Props = {
    /** Allows styling to be overridden */
    className?: string,
    children?: Node,
}

const Wrapper = styled.div`
    & strong, bold {
     font-weight: bold;
    }

    & em, i {
        font-style: italic;
    }

    & ol {
        display: block;
        list-style-type: decimal;
        margin-top: 1em;
        margin-bottom: 1em;
        margin-left: 0;
        margin-right: 0;
        padding-left: 40px;
    }

    & ul {
        display: block;
        list-style-type: disc;
        margin-top: 1em;
        margin-bottom: 1 em;
        margin-left: 0;
        margin-right: 0;
        padding-left: 40px;
    }

    & h1 {
        display: block;
        font-size: 2em;
        margin-top: 0.67em;
        margin-bottom: 0.67em;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
    }

    & h2 {
        display: block;
        font-size: 1.5em;
        margin-top: 0.83em;
        margin-bottom: 0.83em;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
    }

    & h3 {
        display: block;
        font-size: 1.17em;
        margin-top: 1em;
        margin-bottom: 1em;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
    }

    & h4 {
        display: block;
        font-size: 1em;
        margin-top: 1.33em;
        margin-bottom: 1.33em;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
    }

    & h5 {
        display: block;
        font-size: .83em;
        margin-top: 1.67em;
        margin-bottom: 1.67em;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
    }
`;

/** This is a lightweight component intended to be used for content from
 *  Contentful or similar markdown. When we parse markdown from Contentful,
 *  the base styling for html tags is stripped.
 *  This component converst markdown to jsx,
 *  then reinstates the default CSS styling for standard html tags, but can be overridden by the
 *  parent component that uses this.
 */

const MarkdownTheme = ({ className, children } :Props) => (
  <Wrapper className={className}>
    <Markdown>{children}</Markdown>
  </Wrapper>
);

MarkdownTheme.defaultProps = {
  className: '',
  children: null,
};

export default MarkdownTheme;