import * as React from "react";
import { get } from "lodash";

// import EditorObject from "@sc/modules/page/Builder/EditorObject";
// import PropertiesBuilder from "@sc/modules/v2/Properties/components/generator";
import { PluginProps } from "./types";
import { Body } from "./live";
import { CURSOR_ID } from "@sc/modules/v2/Editor/types";

// import pluginSettings from "./settings";

// const PropertiesGenerator = (props) => {
//   const { properties } = pluginSettings;
//   return (
//     <PropertiesBuilder {...props} title="Body Properties" data={properties} />
//   );
// };

export const EditorBody: React.FC<PluginProps> = (props) => {
  const { settings, mode, id, pageContent, children } = props;

  const childContent = pageContent.filter((itm) => itm.parent === settings.id);

  let isEmpty = false;

  if (childContent.length) {
    isEmpty = !!(childContent.length === 1 && childContent[0].id === CURSOR_ID);
  } else isEmpty = true;

  const defaultBodyStyle = isEmpty ? { padding: 40 } : {};

  return (
    <Body
      {...settings}
      style={{ ...defaultBodyStyle, ...get(settings, "properties", {}) }}
    >
      {children}
    </Body>
  );
};

export default EditorBody;
