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.state = {
            mdeState: null,
        };
        this.converter = new Showdown.Converter({
            tables: true,
            simplifiedAutoLink: true,
            strikethrough: true,
            tasklists: true
        });
    }

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

    render() {
        return (
            <div className="container">
                <ReactMde
                    layout="horizontal"
                    buttonContentOptions={{ iconProvider }}
                    onChange={this.handleValueChange}
                    editorState={this.state.mdeState}
                    generateMarkdownPreview={(markdown) => Promise.resolve(this.converter.makeHtml(markdown))}
                />
            </div>
        );
    }
}