import React, { useEffect, useImperativeHandle, useState } from 'react';
import AlertMenu from './fullScreen'
import E from 'wangeditor';
import { Button } from 'antd';

interface WangType {
  braftRef: any;//挂载
  disabled?: any;//是否可编辑
  echo?: any;//回显内容
  value?: any;
  height?: number;
  onChange?: (value: any) => void
}
let editor: any = null;

const BraftText: React.FC<WangType> = (props) => {
  let willCreate = true;

  // 菜单 key ，各个菜单不能重复-自定义工具
  const menuKey = 'alertMenuKey'
  //======================================================================================state
  const [content, setContent] = useState('');
  const [fullScreen, fullScreenSet] = useState(false);
  const {
    braftRef,
    echo,
    disabled,
    value,
    height,
    onChange,
  } = props;

  const tools = [//工具栏
    'head',//标题
    'fontSize', //字号
    'lineHeight', //行高
    'foreColor', //颜色
    'bold', //加粗
    'italic', //斜体
    'underline', //下划线
    'strikeThrough', //文字删除线
    'indent', //缩进
    'justify', //文字对齐方式
    'undo', //撤销
    'redo', //重做
    'fullscreen', //全屏

    'emoticon',//表情
    'image',//图片
    'video',//视频
    'table',//表格
    'todo',//待办
  ];

  //=======================================================================================func
  useEffect(() => {
    if (willCreate) {
      // 注：class写法需要在componentDidMount 创建编辑器
      editor = new E("#div1")

      //工具栏
      editor.config.menus = tools;
      //提示
      editor.config.placeholder = '为了能顺利发布，建议您内容去掉下划线等格式，尽量以纯文本形式发布。'
      // 配置 onchange 回调函数
      editor.config.onchange = editorOnChange;
      // 注册菜单
      // editor.menus.extend(menuKey, AlertMenu);

      // 将菜单加入到 editor.config.menus 中    const menuKey = 'alertMenuKey' 
      // 也可以通过配置 menus 调整菜单的顺序，参考【配置菜单】部分的文档    editor.config.menus.push(menuKey)
      // editor.config.menus = editor.config.menus.concat(menuKey)

      // 设置编辑区域高度为 500px
      height && (editor.config.height = height);
      /**一定要创建 */
      editor.create();

      //控制是否可编辑
      disabled && makeDis();

      willCreate = false;
    }

    // 重新设置编辑器内容
    echo && editor.txt.html(echo);
    value && editor.txt.html(value);

    return () => {
      // 组件销毁时销毁编辑器  注：class写法需要在componentWillUnmount中调用
      editor.destroy()
    }
  }, [value, echo]);
  /**
  *提供给父级的内容
  **/
  useImperativeHandle(braftRef, () => ({
    getText,
    getHtml,
    getHtml1,
    makeDis,
  }));

  // 获取html方法1
  function getHtml() {
    return content
  }

  // 获取html方法2
  function getHtml1() {
    return editor.txt.html()
  }

  // 获取text
  function getText() {
    alert(editor.txt.text())
  }

  //change
  function editorOnChange(newHtml: any) {
    setContent(newHtml);
    triggerChange(newHtml)
  }

  //不可编辑
  function makeDis() {
    editor.disable();
  }

  //form取值
  const triggerChange = (newHtml: any) => {
    onChange?.(newHtml);
  };
  return (
    <div>
      {/* <Button onClick={() => { editor.enable() }}>全屏</Button>
      <Button onClick={() => { editor.disable() }}>全屏</Button> */}
      <div id="div1" style={{ textAlign: 'left' }}></div>
    </div>
  )
}
export default BraftText