import React, { Component } from 'react';
import PropTypes from 'prop-types';
import md2jsonml from 'md2jsonml';
import prism from '../../vendors/prism';
import toReactElement from 'jsonml-to-react-component';
import { join } from 'path';
import { Link } from 'react-router';
import './Markdown.scss';

export default class Markdown extends Component {
  static displayName = 'Markdown';

  static propTypes = {
    /**
     * markdown string
     */
    value: PropTypes.any.isRequired,
    jsonml: PropTypes.bool,
  };

  static defaultProps = {
    value: '',
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  converters = [
    [
      (firstLevel) => {
        return (
          Array.isArray(firstLevel) &&
          firstLevel[0] === 'pre' &&
          Array.isArray(firstLevel[2]) &&
          firstLevel[2][0] === 'code' &&
          typeof firstLevel[2][1] === 'string'
        );
      },
      (node, index) => {
        return (
          <pre key={index}>
            <code
              dangerouslySetInnerHTML={{
                __html: prism.highlight(node[2][1], prism.languages.javascript),
              }}
            />
          </pre>
        );
      },
    ],
    [
      (node) => node && node[0] === 'a' && typeof node[1] === 'object',
      (node, idx) => {
        const appRoutePrefix = window.routePrefix;
        const { href, target } = node[1];
        if (href) {
          if (/^http/.test(href) || /^#[^/]/.test(href)) {
            return (
              <a key={idx} target={target} href={href}>
                {node[2]}
              </a>
            );
          } else {
            let fixedHref = href;
            if (/^#\//.test(fixedHref)) {
              fixedHref = join(appRoutePrefix, fixedHref.slice(1));
            }
            return (
              <Link key={idx} to={fixedHref}>
                {node[2]}
              </Link>
            );
          }
        } else {
          return <a>{node[2]}</a>;
        }
      },
    ],
  ];

  processJSONML = (value) => {
    const jsonml = this.props.jsonml ? value : md2jsonml(value);

    return jsonml;
  };

  render() {
    const { style, value } = this.props;
    return (
      <div className="markdown-block typo markdown-body" style={style}>
        {toReactElement(this.processJSONML(value), this.converters)}
      </div>
    );
  }
}