/**
 *

 * WangEditor5的使用
 * 2022年6月21日
 * 官方文档 https://www.wangeditor.com/v5/getting-started.html
 * 将github 的源代码 下载下来 并执行
 * npm install
 * 再在 git bash 中执行
 * npm run build 获取编译后的文件/packages/editor/dist 复制出来放在项目代码中并使用
 * */

/**
 *  * 所有的菜单
 // toolbarKeys: [
 //   'bold', 'underline',
 //   'italic', 'through',
 //   'code', 'sub',
 //   'sup', 'clearStyle',
 //   'color', 'bgColor',
 //   'fontSize', 'fontFamily',
 //   'indent', 'delIndent',
 //   'justifyLeft', 'justifyRight',
 //   'justifyCenter', 'justifyJustify',
 //   'lineHeight', 'insertImage',
 //   'deleteImage', 'editImage',
 //   'viewImageLink', 'imageWidth30',
 //   'imageWidth50', 'imageWidth100',
 //   'divider', 'emotion',
 //   'insertLink', 'editLink',
 //   'unLink', 'viewLink',
 //   'codeBlock', 'blockquote',
 //   'headerSelect', 'header1',
 //   'header2', 'header3',
 //   'header4', 'header5',
 //   'todo', 'redo', 'undo',
 //   'fullScreen', 'enter',
 //   'bulletedList', 'numberedList',
 //   'insertTable', 'deleteTable',
 //   'insertTableRow', 'deleteTableRow',
 //   'insertTableCol', 'deleteTableCol',
 //   'tableHeader', 'tableFullWidth',
 //   'insertVideo', 'uploadVideo',
 //   'editVideoSize', 'uploadImage',
 //   'codeSelectLang',
 // ],
 * */

import styles from './css/style.less';
import * as WangEditor5 from './index.esm';
import React, { Fragment, useEffect, useState } from 'react';

export default function WangEditorReactComponent(props) {
  const {
    domKey = 'cmsContent',
    height = '450px',
    value,
    onChange,
  } = props;
  useEffect(() => {
    console.log(WangEditor5);
    let htmlDefault = '';
    if (value && value.indexOf('wangEditorHtml') > -1) {
      htmlDefault = value;
    } else {
      htmlDefault = '<div class="wangEditorHtml">' + value + '</div>';
    }
    const editorConfig = {
        placeholder: '请输入内容',
        html: htmlDefault,
        onChange: (editor) => {
          // console.log('content', editor.children);
          onChange(editor.getHtml());
          console.log('html', editor.getHtml());
        },
      }
    ;
    const toolbarConfig = {
      excludeKeys: [
        'codeBlock',
        'emotion',
        'group-video',
        'undo',
        'redo',
        'bulletedList',
        'numberedList',
      ],
    };

    const editor = WangEditor5.createEditor({
        selector: '#' + domKey,
        config: editorConfig,
        mode: 'default',
      },
    );
    const toolBar = WangEditor5.createToolbar({
      editor,
      selector: '#wangEditorToolBar',
      config: toolbarConfig,
      mode: 'default',
    });

    console.log(editor.getAllMenuKeys());
    console.log(toolBar.getConfig().toolbarKeys);

  }, []);

  return <div className={styles.wangEditor5}
              style={{ zIndex: '149', }}
  >
    <div id={'wangEditorToolBar'}
         style={{ zIndex: '150', }}
    >

    </div>
    <div id={domKey}
         style={{ zIndex: '149', }}
    >

    </div>
  </div>;
}
