import { richText, CATEGORIES } from "../../configuration/constants";
import { disableAllDescendantsDraggable } from "../../utils";

export default {
  // 组件名称
  name: richText,

  // 前面板 html 模板
  viewTemplate() {
    return `
      <div
        class="${richText}-wrap"
        data-gjs-type="${richText}"
      ></div>
    `;
  },

  // 前面板 html 样式
  viewstyle() {
    return `
        <style>
          .${richText}-wrap {
              padding: 10px;
          }

        </style>
      `;
  },
  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      label: "富文本",
      attributes: { class: "fa fa-file-word-o" },
    };
  },

  // 后面板显示属性配置
  spOptions() {
    return {
      label: "富文本",
      icon: "globe",
      docUrl: "",
      outPorts: [
        {
          uuid: "out1",
          subType: "all",
          description: {
            zh_CN: "输出文本",
          },
        },
      ],
    };
  },

  componentOptions() {
    return {
      name: richText,
      dmode: "absolute",
      droppable: false,
      traits: [],
      textable: false,
    };
  },

  onModelScript() {
    const self = this;
    const richTextContainer = self.querySelector(".rich-text-container");
    const _id = self.getAttribute('id');
    if (richTextContainer) {
      const richTextEditor = new Quill(`#${_id} .rich-text-container`, {
        modules: {
          toolbar: true,
        },
        theme: "snow",
      });
      self
        .querySelectorAll("*")
        .forEach((descendant) => descendant.setAttribute("draggable", "false"));

      // quill 事件
      richTextEditor.on("text-change", (delta, oldDelta, source) => {
        console.log("on change", delta, oldDelta, source);
        console.log("getText", richTextEditor.getText());
      });
    }
  },

  onViewInit() {
    const comps = this.model.get("components");

    if (!comps.length) {
      comps.reset();
      comps.add(`
          <div class="${richText}-container">
          </div>
        `);
    }

    const evn = "";
    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
  },

  onViewRender(editor, el, model) {
    disableAllDescendantsDraggable(el);
  },
};
