import * as React from "react";
import _ from "lodash";
import { V1ObjectWrapper, convertProperties } from "../V1ObjectWrapper";
import { EditorMode } from "@sc/modules/v2/Editor/types";
import { FormBuilder } from "@sc/modules/v2/CRUD/FormBuilder";

import { PluginProps } from "./types";
import { ComponentTypes } from "../types";

/**
 * The version of the <FormBuilder /> component that shows in the editor canvas
 */
const FormBuilderPlugin: React.FC<PluginProps> = ({ settings }) => {
  const { data } = settings;
  const properties = convertProperties(settings.properties);

  return (
    <V1ObjectWrapper settings={settings}>
      <FormBuilder data={data} globalFieldStyle={properties} />
    </V1ObjectWrapper>
  );
};

export const onComponentRender = (hook, payload, actions) => {
  if (hook.id === "webcomponent" && payload.type === ComponentTypes.FORM) {
    return [FormBuilderPlugin];
  }
};

export default FormBuilder;