import React, { useState } from "react";
import BraftEditor, { ControlType } from "braft-editor";
import "braft-editor/dist/index.css";

// 引入表情包扩展模块样式文件
import 'braft-extensions/dist/emoticon.css'
// 引入表情包扩展模块和默认表情包列表
import Emoticon, { defaultEmoticons } from 'braft-extensions/dist/emoticon';
import MaxLength from 'braft-extensions/dist/max-length'

const lengthOptions = {
  defaultValue: 100, // 指定默认限制数，如不指定则为Infinity(无限)
  // includeEditors: ['editor-id-1'], // 指定该模块对哪些BraftEditor生效，不传此属性则对所有BraftEditor有效
  // excludeEditors: ['editor-id-2'],  // 指定该模块对哪些BraftEditor无效
}
BraftEditor.use(MaxLength(lengthOptions))

// 转换默认表情包列表，让webpack可以正确加载到默认表情包中的图片，请确保已对png格式的文件配置了loader
// 如果你使用的webpack版本不支持动态require，或者使用的其他打包工具，请勿使用此写法
const emoticons = defaultEmoticons.map((item: string) => require(`braft-extensions/dist/assets/${item}`))

// 也可以使用自己的表情包资源，不受打包工具限制
// const emoticons = ['http://path/to/emoticon-1.png', 'http://path/to/emoticon-2.png', 'http://path/to/emoticon-3.png', 'http://path/to/emoticon-4.png', ...]

const emotionOptions = {
  // includeEditors: ['editor-id-1'], // 指定该模块对哪些BraftEditor生效，不传此属性则对所有BraftEditor有效
  // excludeEditors: ['editor-id-2'],  // 指定该模块对哪些BraftEditor无效
  emoticons: emoticons, // 指定可用表情图片列表，默认为空
  closeOnBlur: true, // 指定是否在点击表情选择器之外的地方时关闭表情选择器，默认false
  closeOnSelect: false // 指定是否在选择表情后关闭表情选择器，默认false
}

BraftEditor.use(Emoticon(emotionOptions))

export const BarftEditorPage = () => {
  const controls: ControlType[] = [
    "bold",
    "italic",
    "underline",
    "separator",
    "link",
    "emoji",
    "separator",
    "media"
  ];

  const [editorState, setEditorState] = useState(
    BraftEditor.createEditorState("<p>Hello <b>World!</b></p>")
  );

  return (
    <div className="editor-wrapper">
      <BraftEditor
        value={editorState}
        onChange={setEditorState}
        controls={controls}
        contentStyle={{
          height: 210,
          boxShadow: "inset 0 1px 3px rgba(0,0,0,.1)"
        }}
      />
    </div>
  );
};

export default BarftEditorPage;