import React, { useEffect, useState } from "react";
import { Editor } from "react-draft-wysiwyg";
import { EditorState, convertToRaw } from "draft-js";
// import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import toalbarOptions, {
  editorStateToHtml,
  htmlToEditorState,
} from "./toalbarOptions";
import { Container } from "./styled";

function TextEditor({ onChange, defaultValue }) {
  const [editorState, setEditorState] = useState(
    defaultValue ? htmlToEditorState(defaultValue) : EditorState.createEmpty(),
  );

  // draft data (has blocks)
  const rawState = convertToRaw(editorState.getCurrentContent());

  useEffect(() => {
    onChange(editorStateToHtml(editorState));
  }, [rawState]);

  return (
    <Container>
      <Editor
        editorState={editorState}
        toolbar={toalbarOptions}
        // onContentStateChange={onContentStateChange}
        onEditorStateChange={setEditorState}
        // customStyleMap={styleMap}
      />
    </Container>
  );
}

export default TextEditor;
