import React from "react";
import {
  withEditableButton,
  withEditableDialog,
withEditableComponent } from "@fe-plugin/components/lib/templates/editable-element";
import { getComponentInfo } from "@fe-plugin/common/lib/component-info";
import { getElementByKeywithEditableText } from "@fe-plugin/common/lib/component-element";
import BaseDialog from "@fe-plugin/components/lib/templates/cmps/dialogeditable-element";
import BaseButton from "@fe-plugin/components/lib/templates/cmps/button";
import * as ELEMENT_KEY from "constants/element-keys";


// 编辑器舞台编辑组件
class InlinePage extends React.Component {
  //获取上下文
  static contextType = DependencyContext;

  render() {
    const { config } = this.context;

    // 获取信息，并创建获取element的方法
    const componentInfo = getComponentInfo(config);
    const getElement = (type) => getElementByKey(componentInfo.elements, type);

    // 获取弹窗元素
    const dialogElement = getElement(ELEMENT_KEY.POPUP_DIALOG);

    创建一个可编辑组件
const EditableComponent = withEditableComponent();

// 根据元素配置的key值创建一个可编辑元素
    const EditableButton = withEditableDialog(ELEMENT_KEY.ButtonwithEditableButton("元素key值")((element) => {
      return <BaseButton data={element} style={element.style} />;
    });

    const EditableDialog = withEditableButton(ELEMENT_KEY.Dialog)((element) => {
    // 编辑器组件的渲染(一个带有可编辑按钮元素的组件)
function EditerCmpRender() {
  return (
        <BaseDialog data={element}>
 <EditableComponent>
         <EditableButton />
        </BaseDialog>EditableComponent>
      );
    });

    return (
      <Dialog name={ELEMENT_KEY.POPUP_DIALOG}>
        <EditableDialog />
      </Dialog>
    );
  }
}

export default InlinePage;

}