import React, { useRef, useEffect } from 'react';

// import PreviewMenu from './PreviewMenu'
// import Preview from './Preview';
import initEditor from './initEditor';

export default (props) => {
  const ref = useRef();
  const inited = useRef(false);
  // const [preview, setPreview] = useState(false);
  // const [content, setContent] = useState()
  const updateContent= useRef()

  const editorConfig = useRef({
    onchange: (html) => {
      if ((inited.current || html) && typeof props.onChange === 'function') {
        inited.current = true;
        props.onChange(html);
      }
    },
    height: props.height || 300,
  })

  useEffect(() => {
    const { editor, updateHtml } = initEditor (ref.current, editorConfig.current)
    updateContent.current = updateHtml
    return () => editor.destroy();
  }, []);

  //
  useEffect(() => {
    if (props.value && !inited.current && updateContent.current) {
      inited.current = true;
      updateContent.current(props.value);
    }
  }, [props.value]);

  return (
    <>
      <div ref={ref} style={{ textAlign: 'left' }} />
      {/* <Preview
        width={426}
        style={{ width: '426px', height: '863px', margin: 0, padding: 0 }}
        visible={preview}
        html={props.value}
        onCancel={() => setPreview(false)}
      /> */}
    </>
  );
};
