import * as React from "react";
import { PluginProps } from "./types";
import { FormBuilder } from "@sc/modules/v2/CRUD/FormBuilder";

import EditorObject from "@sc/modules/page/Builder/EditorObject";
import { V1ObjectWrapper, convertProperties } from "../V1ObjectWrapper";
import Properties from "./Properties";
import { LiveFormFieldProps } from "@sc/modules/v2/CRUD/FormBuilder/LiveFormField/types";
/**
 * The version of the <FormBuilder /> component that shows in the editor canvas
 */
const FormBuilderEditorObject: React.FC<PluginProps> = (props) => {
  const { settings, children } = props;
  const { data, properties } = settings;
  // const [data, setData] = React.useState<LiveFormFieldProps[]>(settings.data);
  // const properties = convertProperties(settings.properties);
  return (
    <V1ObjectWrapper settings={settings}>
      <EditorObject
        showOverlay
        // label="Form Builder"
        {...props}
        PropertiesView={Properties}
      >
        <FormBuilder data={data} globalFieldStyle={properties} />
      </EditorObject>
    </V1ObjectWrapper>
  );
};

export default FormBuilderEditorObject;