import * as React from "react";
import { get } from "lodash";
import { PropertiesProps } from "../types";

import PropertiesBuilder from "@sc/modules/v2/Properties/components/generator";
import { updateSection } from "@sc/modules/v2/Properties/components/generator";

import formBuilderSettings from "../settings";
import { FormFieldTypes } from "@sc/modules/v2/CRUD/FormBuilder/types";
import EditFormField from "@sc/modules/v2/CRUD/FormBuilder/EditFormField/EditFormField";
import {
  defaultData,
  styleData,
} from "@sc/modules/v2/CRUD/FormBuilder/FormBuilder.stories";
import { EditorMode } from "@sc/modules/v2/Editor/types";
import { FormBuilder } from "@sc/modules/v2/CRUD/FormBuilder";

/**
 * The property window that shows for the FormBuilderEditorObject
 */
const FormBuilderPropertyWindow: React.FC<PropertiesProps> = (props) => {
  const [settings, setSettings] = React.useState(props.settings);

  const handleSettingsChange = (id, settings, dbUpdate = true) => {
    const { updateComponentSettings } = props;
    setSettings(settings);
    if (dbUpdate) updateComponentSettings(id, settings, true, false);
  };

  /**
   * Triggers when the <FormBuilder /> component showing in the property window changes
   * @params
   */
  const handleFormBuilderChange = (): void => {};

  /**
   * Triggers when the properties in the Field Size section changes
   * @params
   */
  const handleFieldSizeChange = (): void => {};

  /**
   * Triggers when the properties in the position padding section changes
   * @params
   */
  const handleFieldPositionPaddingChange = (): void => {};

  /**
   * Triggers when the properties in the position & padding section changes
   * @params
   */
  const handleBorderShadowChange = (): void => {};

  /**
   * Triggers when the properties in the font/typography section changes
   * @params
   */
  const handleFontChange = (): void => {};

  // const { updateComponentSettings, settings } = props;
  const { properties } = formBuilderSettings;
  const { sections } = properties.main;

  const withFormBuilder = updateSection(sections, "formBuilder_settings", {
    component: (
      <FormBuilder
        {...props}
        data={settings.data}
        mode={EditorMode.EDITOR}
        onBlur={(newData) => {
          console.log("blur", newData);
          handleSettingsChange(
            settings.id,
            {
              ...settings,
              data: newData,
            },
            true
          );
        }}
        onChange={(newData) => {
          console.log("change", newData);
          handleSettingsChange(settings.id, {
            ...settings,
            data: newData,
          });
        }}
      />
    ),
  });

  const updatedProperties = {
    ...properties,
    main: { ...properties.main, sections: withFormBuilder },
  };

  return <PropertiesBuilder data={updatedProperties} {...props} />;
};

export default React.memo(FormBuilderPropertyWindow);