/**
 *

 * WangEditor5的使用
 * 2022年6月21日
 * 官方文档 https://www.wangeditor.com/v5/getting-started.html
 * 将github 的源代码 下载下来 并执行
 * npm install
 * 再在 git bash 中执行
 * npm run build 获取编译后的文件/packages/editor/dist 复制出来放在项目代码中并使用
 * 2022年6月25日 解决了上传图片功能
 * TODO 无法创建自定义菜单 (Pdf上传功能, 视频上传功能);
 * TODO https://www.wangeditor.com/v5/development.html#%E6%B3%A8%E5%86%8C%E8%8F%9C%E5%8D%95
 *
 * */

/**
 *  * 所有的菜单
 // 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';
import compressImage from '@/webPublic/zyd_public/WangEditor/compressImage';
// import uploadFile from '@/webPublic/zyd_public/WangEditor/uploadFile';
import { queryApiActionPath } from '@/webPublic/one_stop_public/utils/queryConfig';
import { uploadFile as uploadOnestopFile } from '@/webPublic/one_stop_public/libs/PictureSignature/ShowItem';
console.log(WangEditor5);
// console.log(WangEditor5Menus);

export default function WangEditorReactComponent(props) {
  const {
    domKey = 'cmsContent',
    height = '450px',
    value,
    onChange,
  } = props;
  useEffect(() => {
    let htmlDefault = '';
    if (value && value.indexOf('wangEditorHtml') > -1) {
      htmlDefault = value;
    } else {
      htmlDefault = '<div class="wangEditorHtml">' + value + '</div>';
    }
    const editorConfig = {
        placeholder: '请输入内容',
        html: htmlDefault,
        MENU_CONF: {
          uploadImage: {
            customUpload: (file, insertFn) => {
              compressImage(file, (fileNew) => {
                uploadOnestopFile(fileNew).then((y) => { // 使用一站式的文件上传接口
                  if (y && y.length) {
                    insertFn(queryApiActionPath() + y, file.name);
                  }
                });
              });
            },
          },
        },

        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',
      ],
      // insertKeys: {
      //   index: 5, // 插入的位置，基于当前的 toolbarKeys
      //   keys: ['video-upload'],
      // },
    };

    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>;
}
