import * as React from "react";
import ReactMde from 'react-mde';
import * as Showdown from "showdown";
import 'react-mde/lib/styles/css/react-mde-all.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'


const icons = {
    "bold": <FontAwesomeIcon icon="bold" />,
    "heading": <FontAwesomeIcon icon="heading" />,
    "italic": <FontAwesomeIcon icon="italic" />,
    "strikethrough": <FontAwesomeIcon icon="strikethrough" />,
    "link": <FontAwesomeIcon icon="link" />,
    "quote-right": <FontAwesomeIcon icon="quote-right" />,
    "code": <FontAwesomeIcon icon="code" />,
    "image": <FontAwesomeIcon icon="image" />,
    "list-ul": <FontAwesomeIcon icon="list-ul" />,
    "list-ol": <FontAwesomeIcon icon="list-ol" />,
    "tasks": <FontAwesomeIcon icon="tasks" />,
  };

  const iconProvider = (name) => {
    return icons[name] || "❓";
  };
  

export default class MarkdownEditor extends React.Component {

    constructor(props) {
        super(props);
        this.converter = new Showdown.Converter({tables: true, simplifiedAutoLink: true});
    }

    handleValueChange = (mdeState) => {
        this.setState({mdeState});
    }

    render() {
      const defaultProps = {
        layout: 'horizontal',
        buttonContentOptions: { iconProvider },
        generateMarkdownPreview: (markdown) => Promise.resolve(this.converter.makeHtml(markdown)),
      }
      const props=  {
        ...defaultProps,
        ...this.props,
      }
        return (
          <ReactMde {...props} />
        );
    }
}